optimized layout for TextToMermaid.

package.json

@@ -15,12 +15,12 @@
     "mermaid": "^11.9.0",
     "svg2pdf.js": "^2.5.0",
     "vite-plugin-vuetify": "^2.1.1",
-    "vue": "^3.5.17",
+    "vue": "^3.5.18",
     "vue-router": "^4.5.1",
     "vuetify": "^3.9.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.0",
-    "vite": "^7.0.4"
+    "vite": "^7.0.6"
   }
 }

src/App.vue

@@ -21,7 +21,7 @@ import Sidebar from './components/Sidebar.vue'
 .main-content {
   flex: 1;
   /* margin-left: 220px; */
-  padding: 40px;
+  padding: 0;
 }
 * {
   box-sizing: border-box;

src/components/TextToMermaid.vue

 <template>
-    <div class="text-to-mermaid">
-      <h1 class="page-title">Text to Mermaid Converter</h1>
-      
-      <div class="converter-container">
+    <!-- <div class="text-to-mermaid"> -->
+    <v-container fluid class="text-to-mermaid">
+      <!-- <h1 class="page-title">Text to Mermaid Converter</h1> -->
+      <v-row>
+        <v-col cols="12">
+          <h1 class="text-h4 text-center font-weight-bold mx-3 my-3">Text to Mermaid Converter</h1>
+        </v-col>
+      </v-row>
+      <v-divider :thickness="1" color="white" class="border-opacity-100"></v-divider>
+      <!-- <div class="converter-container"> -->
+      <v-row class="mx-3 my-3"> 
+        <v-col cols="12" md="4" class="pa-3">
           <!-- Input Section -->
           <div class="input-section">
             <h3>Input Text</h3>
-          <textarea 
+            <v-textarea 
               v-model="inputText" 
               @input="handleInput"
               placeholder="Enter your text here to convert to Mermaid diagram..."
               class="text-input"
               rows="10"
-          ></textarea>
+            ></v-textarea>
             
             <div class="button-group">
               <button @click="convertNow" class="convert-btn" :disabled="isProcessing">
@@ -29,7 +37,9 @@
               <span v-else-if="currentState === 'error'">Error occurred</span>
             </div>
           </div>
+        </v-col>
         
+        <v-col cols="12" md="8" class="pa-3">
           <!-- Output Section -->
           <div class="output-section">
             <h3>Mermaid Diagram</h3>
@@ -125,8 +135,11 @@
               </div>
             </div>
           </div>
-      </div>
-    </div>
+        </v-col>
+      <!-- </div> -->
+      </v-row>
+    <!-- </div> -->
+    </v-container>
   </template>
   
   <script setup>
@@ -524,20 +537,21 @@
   <style scoped>
   .text-to-mermaid {
     /* max-width: 2400px; */
-    display: grid;
-    grid-template-rows: 1fr;
+    /* display: grid;
+    grid-template-rows: 1fr; */
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    margin: 10px;
+    /* margin: 10px; */
     padding: 0;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    height: 100%;
   }
-  .converter-container {
+  /* .converter-container {
     display: grid;
     grid-template-columns: 1fr 1.5fr;
     grid-template-rows: 1fr;
     gap: 40px;
     margin: 40px;
-  }
+  } */
   .input-section, .output-section {
     background: #f8f9fa;
     padding: 20px;
@@ -1283,23 +1297,6 @@
     background: #545b62;
   }
 
-  /* @media (max-width: 768px) {
-    .converter-container {
-      grid-template-columns: 1fr;
-    }
-    .button-group {
-      flex-direction: column;
-    }
-  }
-  @media (min-width: 1920px) {
-    .text-to-mermaid {
-      max-width: 2800px;
-    }
-    
-    .converter-container {
-      gap: 80px;
-    }
-  } */
   .page-title {
     font-size: 2.4rem;           /* Larger, more prominent */
     font-weight: 700;            /* Bold */

src/style.css

@@ -60,6 +60,8 @@ button:focus-visible {
 
 #app {
   /* max-width: 1280px; */
+  width: 100%;
+  height: 100%;
   margin: 0 auto;
   padding: 2rem;
   text-align: center;