Improve app layout and style

src/App.vue

@@ -1,21 +1,18 @@
 <script setup lang="ts">
 import PageHeader from '@/components/PageHeader.vue'
 import PageFooter from '@/components/PageFooter.vue'
+import EditorContainer from '@/components/EditorContainer.vue'
 import VariablesControl from '@/components/VariablesControl.vue'
 import TemplateResult from '@/components/TemplateResult.vue'
-import useEditor from '@/composables/useEditor'
-
-useEditor('container')
 </script>
 
 <template>
   <PageHeader />
-  <main class="flex flex-wrap justify-center gap-5 my-5">
-    <div
-      id="container"
-      class="h-96 w-screen md:w-[43rem]"
-    />
-    <VariablesControl />
+  <main>
+    <div class="flex flex-wrap justify-center gap-5 my-5">
+      <EditorContainer />
+      <VariablesControl />
+    </div>
     <TemplateResult />
   </main>
   <PageFooter />

src/components/TemplateResult.vue

@@ -7,11 +7,11 @@ const { textResult } = useEditor()
 </script>
 
 <template>
-  <section>
+  <section class="flex flex-col items-center gap-3">
     <h2 class="text-xl font-semibold">
       Template Result
     </h2>
-    <p class="max-w-md whitespace-pre-wrap">
+    <p class="w-full md:w-[43rem] whitespace-pre-wrap border border-gray-600 p-5">
       {{ textResult }}
     </p>
   </section>

src/components/VariablesControl.vue

@@ -1,34 +1,40 @@
 <script setup lang="ts">
 import useEditor from '@/composables/useEditor'
-
 const { variables } = useEditor()
 </script>
 
 <template>
-  <section class="border border-gray-600 p-3 min-w-72 w-fit h-96">
-    <table class="w-full">
-      <thead>
-        <tr>
-          <th>Variable</th>
-          <th>Value</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          v-for="(value, key) in variables"
-          :key="key"
-        >
-          <td>{{ key }}</td>
-          <td>
-            <input
-              v-model="variables[key]"
-              type="text"
-              class="w-full text-black"
-              placeholder="Enter value"
-            >
-          </td>
-        </tr>
-      </tbody>
-    </table>
+  <section class="flex flex-col items-center gap-3 w-full md:w-80 md:h-96">
+    <h2 class="text-xl font-semibold text-center">
+      Variables
+    </h2>
+    <div class="border border-gray-600 w-full p-3">
+      <table class="w-full">
+        <thead>
+          <tr>
+            <th>Variable</th>
+            <th>Value</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            v-for="(_, key) in variables"
+            :key="key"
+          >
+            <td class="px-1 py-2">
+              {{ key }}
+            </td>
+            <td class="px-1 py-2">
+              <input
+                v-model="variables[key]"
+                type="text"
+                class="w-full text-black"
+                placeholder="Enter value"
+              >
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
   </section>
 </template>