fix: overflow in hint

app/src/components/HintPart.vue

@@ -26,7 +26,9 @@ const right = () => {
 </script>
 
 <template>
-  <div class="w-full flex items-center p-2 overflow-auto">
+  <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"
@@ -63,7 +65,7 @@ const right = () => {
         </button>
       </div>
     </div>
-  <div id="hint" class="bg-bg flex flex-wrap p-8 overflow-auto">
+    <div id="hint" class="bg-bg p-8 overflow-y-auto">
       <ul>
         <li
           v-for="response in sessionStore.session.responses[current]"
@@ -77,11 +79,12 @@ const right = () => {
         <li
           v-for="hint in sessionStore.session.hints[current]"
           :key="hint"
-        class="text-text font-xl whitespace-pre-wrap"
+          class="text-text-primary font-xl whitespace-pre-wrap"
         >
           <MarkdownText :content="hint" />
         </li>
       </ul>
       <br />
     </div>
+  </div>
 </template>