From 622d64dd4555871408951655c518086d687624d6 Mon Sep 17 00:00:00 2001
From: wancat <wancat@wancat.cc>
Date: Sun, 25 Feb 2024 13:55:05 +0800
Subject: [PATCH] fix: overflow in hint

---
 app/src/components/HintPart.vue | 115 ++++++++++++++++----------------
 1 file changed, 59 insertions(+), 56 deletions(-)

diff --git a/app/src/components/HintPart.vue b/app/src/components/HintPart.vue
index 3d6b4bd..beb0b0f 100644
--- a/app/src/components/HintPart.vue
+++ b/app/src/components/HintPart.vue
@@ -26,62 +26,65 @@ const right = () => {
 </script>
 
 <template>
-  <div class="w-full flex items-center p-2 overflow-auto">
-    <font-awesome-icon
-      :icon="['far', 'lightbulb']"
-      class="text-yellow-200 p-2 content-center"
-    />
-    <h1 class="inline text-text w-1/2 font-xl p-2 m-1">
-      <!-- Hint -->
-      提示
-    </h1>
-    <div v-if="current !== -1" class="flex w-full justify-end items-end">
-      <button
-        class="p-2 m-1 w-1/8"
-        id="Lbutton"
-        @click="left"
-        :disabled="current <= 0"
-      >
-        <font-awesome-icon
-          :icon="['fas', 'arrow-right']"
-          class="text-text"
-          rotation="180"
-        />
-      </button>
-      <p class="inline text-text font-xl w-1/14 p-2 m-1">{{ current + 1 }}</p>
-      <p class="inline text-text font-xl w-1/14 p-2 m-1">/</p>
-      <p class="inline text-text font-xl w-1/14 p-2 m-1">
-        {{ sessionStore.session.hints.length }}
-      </p>
-      <button
-        class="p-2 m-1 w-1/8"
-        id="Rbutton"
-        @click="right"
-        :disabled="current === sessionStore.session.hints.length - 1"
-      >
-        <font-awesome-icon :icon="['fas', 'arrow-right']" class="text-text" />
-      </button>
+  <div class="h-full flex flex-col">
+    <!-- Hint Header -->
+    <div class="flex items-center p-2 h-10">
+      <font-awesome-icon
+        :icon="['far', 'lightbulb']"
+        class="text-yellow-200 p-2 content-center"
+      />
+      <h1 class="inline text-text w-1/2 font-xl p-2 m-1">
+        <!-- Hint -->
+        提示
+      </h1>
+      <div v-if="current !== -1" class="flex w-full justify-end items-end">
+        <button
+          class="p-2 m-1 w-1/8"
+          id="Lbutton"
+          @click="left"
+          :disabled="current <= 0"
+        >
+          <font-awesome-icon
+            :icon="['fas', 'arrow-right']"
+            class="text-text"
+            rotation="180"
+          />
+        </button>
+        <p class="inline text-text font-xl w-1/14 p-2 m-1">{{ current + 1 }}</p>
+        <p class="inline text-text font-xl w-1/14 p-2 m-1">/</p>
+        <p class="inline text-text font-xl w-1/14 p-2 m-1">
+          {{ sessionStore.session.hints.length }}
+        </p>
+        <button
+          class="p-2 m-1 w-1/8"
+          id="Rbutton"
+          @click="right"
+          :disabled="current === sessionStore.session.hints.length - 1"
+        >
+          <font-awesome-icon :icon="['fas', 'arrow-right']" class="text-text" />
+        </button>
+      </div>
+    </div>
+    <div id="hint" class="bg-bg p-8 overflow-y-auto">
+      <ul>
+        <li
+          v-for="response in sessionStore.session.responses[current]"
+          :key="response"
+          class="text-text font-xl whitespace-pre-wrap"
+        >
+          <div v-for="content in response.content" :key="content">
+            <MarkdownText :content="content" />
+          </div>
+        </li>
+        <li
+          v-for="hint in sessionStore.session.hints[current]"
+          :key="hint"
+          class="text-text-primary font-xl whitespace-pre-wrap"
+        >
+          <MarkdownText :content="hint" />
+        </li>
+      </ul>
+      <br />
     </div>
   </div>
-  <div id="hint" class="bg-bg flex flex-wrap p-8 overflow-auto">
-    <ul>
-      <li
-        v-for="response in sessionStore.session.responses[current]"
-        :key="response"
-        class="text-text font-xl whitespace-pre-wrap"
-      >
-        <div v-for="content in response.content" :key="content">
-          <MarkdownText :content="content" />
-        </div>
-      </li>
-      <li
-        v-for="hint in sessionStore.session.hints[current]"
-        :key="hint"
-        class="text-text font-xl whitespace-pre-wrap"
-      >
-        <MarkdownText :content="hint" />
-      </li>
-    </ul>
-    <br />
-  </div>
 </template>