fixed layout centralization issue for Text to Mermaid.

package-lock.json

@@ -15,7 +15,7 @@
         "vite-plugin-vuetify": "^2.1.1",
         "vue": "^3.5.17",
         "vue-router": "^4.5.1",
-        "vuetify": "^3.9.0-beta.1"
+        "vuetify": "^3.9.2"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^6.0.0",

package.json

@@ -16,7 +16,7 @@
     "vite-plugin-vuetify": "^2.1.1",
     "vue": "^3.5.17",
     "vue-router": "^4.5.1",
-    "vuetify": "^3.9.0-beta.1"
+    "vuetify": "^3.9.2"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.0",

src/App.vue

@@ -13,8 +13,8 @@ import Sidebar from './components/Sidebar.vue'
 
 <style>
 #app {
-  min-height: 100vh;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  /* min-height: 100vh; */
+  /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
   padding: 0;
   display: flex;
 }

src/components/TextToMermaid.vue

@@ -523,21 +523,20 @@
   
   <style scoped>
   .text-to-mermaid {
-    max-width: 2400px;
-    width: 100%;
-    margin: 0;
+    /* max-width: 2400px; */
+    display: grid;
+    grid-template-rows: 1fr;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    margin: 10px;
     padding: 0;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   }
   .converter-container {
     display: grid;
     grid-template-columns: 1fr 1.5fr;
+    grid-template-rows: 1fr;
     gap: 40px;
-    /* margin-bottom: 30px; */
-    /* justify-content: start; */
-    /* max-width: 1200px; */
-    /* margin-left: 0; */
-    margin-top: 24px;
+    margin: 40px;
   }
   .input-section, .output-section {
     background: #f8f9fa;
@@ -546,7 +545,7 @@
     border: 1px solid #e9ecef;
   }
   .output-section {
-    background: #f8f9fa;
+    /* background: #f8f9fa; */
     padding: 20px;
     border-radius: 8px;
     border: 1px solid #e9ecef;
@@ -554,8 +553,7 @@
   }
   .text-input {
     width: 100%;
-    min-width: 400px;   /* Increased minimum width */
-    max-width: 1200px;  /* Increased maximum width */
+    max-width: 100%;  /* Increased maximum width */
     padding: 12px;
     border: 1px solid #ced4da;
     border-radius: 4px;
@@ -649,7 +647,6 @@
     padding: 15px 32px; /* Increased right/left padding */
     background: #e9ecef;
     border-bottom: 1px solid #dee2e6;
-    min-width: 480px; /* Ensure enough width for controls */
     max-width: 100%;
     overflow-x: auto;
   }
@@ -1304,7 +1301,6 @@
     }
   } */
   .page-title {
-    margin-bottom: 32px;         /* Adds space below the heading */
     font-size: 2.4rem;           /* Larger, more prominent */
     font-weight: 700;            /* Bold */
     letter-spacing: 1px;

src/style.css

@@ -59,7 +59,7 @@ button:focus-visible {
 }
 
 #app {
-  max-width: 1280px;
+  /* max-width: 1280px; */
   margin: 0 auto;
   padding: 2rem;
   text-align: center;