Display dialogue in hints. Adjust Game page layout

app/src/components/HintPart.vue

@@ -26,7 +26,7 @@ const right = () => {
 </script>
 
 <template>
-  <div class="w-full flex items-center p-2">
+  <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"
@@ -63,8 +63,17 @@ const right = () => {
       </button>
     </div>
   </div>
-  <div id="hint" class="bg-bg flex flex-wrap p-8">
+  <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"

app/src/views/GamePage.vue

@@ -61,7 +61,7 @@ onMounted(async () => {
   <!-- main -->
   <div id="main" class="h-[94vh] w-full flex p-3 space-x-3">
     <!-- Topic and Command List -->
-    <div class="bg-bg-secondary h-full w-1/3 rounded-lg">
+    <div class="bg-bg-secondary h-full w-1/4 rounded-lg">
       <section id="quest" class="h-full p-3 overflow-auto">
         <QuestPart />
       </section>
@@ -71,17 +71,17 @@ onMounted(async () => {
       </section> -->
     </div>
     <!-- Terminal and Hint -->
-    <div class="bg-bg h-full w-1/3 rounded-lg">
-      <section id="hint" class="h-2/5">
+    <div class="bg-bg h-full w-1/2 rounded-lg">
+      <section id="hint" class="h-3/5">
         <HintPart />
       </section>
       <hr class="border-border border" />
-      <section id="terminal" class="h-3/5 overflow-hidden">
+      <section id="terminal" class="h-2/5 overflow-hidden">
         <TerminalPart />
       </section>
     </div>
     <!-- Visualization -->
-    <div class="h-full w-1/3">
+    <div class="h-full w-1/4">
       <div class="bg-border rounded-xl h-[90%] p-2">
         <div class="bg-bg rounded-lg h-full p-2">
           <section id="visualization" class="bg-bg-primary h-full rounded-md">