small adjustments

Author: danil-nizamov

diagram.js

@@ -99,7 +99,7 @@ function renderTable(svg, table, schema, selectedTableId, selectedColId, onSelec
   title.textContent = table.name; g.appendChild(title);
 
   // HEADER SEPARATOR
-  g.appendChild(createSvg('line', { x1: x + 8, y1: y + DIAGRAM.HEADER_H, x2: x + width - 8, y2: y + DIAGRAM.HEADER_H, stroke: '#d1d5db', 'stroke-width': '0.5' }));
+  g.appendChild(createSvg('line', { x1: x, y1: y + DIAGRAM.HEADER_H, x2: x + width, y2: y + DIAGRAM.HEADER_H, stroke: '#d1d5db', 'stroke-width': '0.5' }));
 
   // DRAG BUTTON (the ONLY drag handle)
   const btnSize = 16;

solution.json

@@ -1,105 +1,73 @@
 {
-  "version": "1.0",
-  "name": "ShopDB",
+  "name": "Untitled schema",
   "tables": [
     {
-      "id": "tbl_users",
+      "id": "tbl_users_5jfh90d",
       "name": "users",
       "columns": [
         {
-          "id": "u_id",
+          "id": "col_id_tp7z9eh",
           "name": "id",
           "type": "int",
           "nullable": false,
           "default": null
-        },
-        {
-          "id": "u_email",
-          "name": "email",
-          "type": "varchar(255)",
-          "nullable": false,
-          "default": null
-        },
-        {
-          "id": "u_name",
-          "name": "name",
-          "type": "varchar(255)",
-          "nullable": false,
-          "default": null
         }
       ],
       "primaryKey": [
-        "u_id"
+        "col_id_tp7z9eh"
       ],
       "uniqueConstraints": [
         {
-          "id": "uq_users_email",
+          "id": "uq_obntuki",
           "columns": [
-            "u_email"
+            "col_id_tp7z9eh"
           ]
         }
       ],
       "indexes": [],
       "position": {
-        "x": 603,
-        "y": 125
-      }
+        "x": 656,
+        "y": 133
+      },
+      "color": "white"
     },
     {
-      "id": "tbl_orders",
-      "name": "orders****",
+      "id": "tbl_wow_ntv1bum",
+      "name": "peep",
       "columns": [
         {
-          "id": "o_id",
+          "id": "col_id_w4l8ea5",
           "name": "id",
           "type": "int",
           "nullable": false,
           "default": null
         },
         {
-          "id": "o_user_id",
+          "id": "col_user_id_v0cqfey",
           "name": "user_id",
           "type": "int",
           "nullable": false,
           "default": null
-        },
-        {
-          "id": "o_total",
-          "name": "total",
-          "type": "decimal(10,2)",
-          "nullable": false,
-          "default": "0.00"
         }
       ],
       "primaryKey": [
-        "o_id"
+        "col_id_w4l8ea5"
+      ],
+      "uniqueConstraints": [
+        {
+          "id": "uq_54xxf1u",
+          "columns": [
+            "col_id_w4l8ea5"
+          ]
+        }
       ],
-      "uniqueConstraints": [],
       "indexes": [],
       "position": {
-        "x": 85,
-        "y": -102
+        "x": 304,
+        "y": 223
       },
-      "color": "blue"
+      "color": "red"
     }
   ],
-  "foreignKeys": [
-    {
-      "id": "fk_a1cw4cy",
-      "from": {
-        "table": "tbl_orders",
-        "columns": [
-          "o_user_id"
-        ]
-      },
-      "to": {
-        "table": "tbl_users",
-        "columns": [
-          "u_id"
-        ]
-      },
-      "onDelete": "NO ACTION",
-      "onUpdate": "NO ACTION"
-    }
-  ]
+  "foreignKeys": []
 }

style.css

@@ -71,15 +71,15 @@
   }
 
   header{
-    display:flex;align-items:center;gap:1rem;padding:.5rem 1rem; /* Reduced from .75rem to .5rem */
+    display:flex;align-items:center;gap:1rem;padding:.45rem 1rem; /* Reduced from .75rem to .5rem */
     border-bottom:1px solid var(--stroke);
     background:var(--box)
   }
 
   /* Light theme navigation bar background */
   @media (prefers-color-scheme: light) {
     header {
-      background: #ffffff; /* Changed to white */
+      background: #ffffff;
     }
   }
   header h1{font-size:1.1rem;margin:0}
@@ -142,24 +142,24 @@
 
   /* Input field specific styles (exclude checkboxes) */
   input:not([type="checkbox"]) {
-    min-height: 3rem; /* Reduced from 3.75rem (20% reduction) */
+    min-height: 3rem;
     max-height: 8.737499999999999rem;
     padding-left: 1rem;
     padding-right: 2.75rem;
-    padding-top: 0.75rem; /* Reduced from 0.94975rem */
-    padding-bottom: 0.75rem; /* Reduced from 0.94975rem */
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
   }
 
   /* Select field specific styles to match inputs */
   select {
     -webkit-appearance: none;
     -moz-appearance: none;
-    min-height: 3rem; /* Reduced from 3.75rem (20% reduction) */
+    min-height: 3rem;
     max-height: 8.737499999999999rem;
     padding-left: 1rem;
-    padding-right: 3rem; /* Increased from 2.75rem to give arrow more space */
-    padding-top: 0.75rem; /* Reduced from 0.94975rem */
-    padding-bottom: 0.75rem; /* Reduced from 0.94975rem */
+    padding-right: 3rem;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
     appearance: none; /* Remove default arrow */
     background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
     background-repeat: no-repeat;
@@ -198,10 +198,8 @@
 
   /* Dark-mode specifics */
 @media (prefers-color-scheme: dark) {
-    /* 1) Sidebar "menus" (cards) should have no border in dark */
     .card { border: none; }
 
-    /* 2) Buttons should be dark with light-grey border */
     button {
       background: rgb(45 56 85 / 0.25);
       border-color: rgb(57 69 99);
@@ -213,7 +211,6 @@
       color: rgb(215 218 230);
     }
 
-    /* Update delete buttons to transparent red in dark mode */
     button.danger {
     background: rgba(239, 68, 68, 0.05);
     border-color: rgba(239, 68, 68, 0.6);
@@ -232,14 +229,12 @@
       color: rgb(215 218 230);
     }
 
-    /* 3) Inputs and selects dark with grey default (placeholder) text */
     input:not([type="checkbox"]), select {
       background: rgb(23 32 55);
       color: #c1c7d7;
       border-color: transparent;
     }
 
-    /* Dark mode dropdown arrow */
     select {
       background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c1c7d7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
       background-repeat: no-repeat;