From 4572f6bf7acf9dc41087593a6a3933ef450ff69e Mon Sep 17 00:00:00 2001
From: Joel Wetzell <git@jwetzell.com>
Date: Fri, 13 Feb 2026 20:36:00 -0600
Subject: [PATCH] config layout tweaks

---
 src/app/config/config.component.html | 60 ++++++++++++++--------------
 1 file changed, 31 insertions(+), 29 deletions(-)

diff --git a/src/app/config/config.component.html b/src/app/config/config.component.html
index ec54bf3..219a495 100644
--- a/src/app/config/config.component.html
+++ b/src/app/config/config.component.html
@@ -1,24 +1,11 @@
 @if (config()) {
-  <div class="flex h-full flex-row m-2 gap-1.5">
-    <div class="flex flex-col">
-      <div class="text-2xl text-white text-center">Modules</div>
-      <div class="flex-grow h-full overflow-scroll gap-1.5 border-2 border-gray-500">
-        @for (module of modules(); track module; let i = $index) {
-          <div>
-            <app-module
-              [path]="`modules/${i}`"
-              (moduleChange)="moduleUpdated(i, $event)"
-              [module]="module"
-              (delete)="deleteModule(i)"
-            ></app-module>
-          </div>
-        }
-      </div>
-      <div class="flex mb-2">
+  <div class="flex h-full flex-row p-2 gap-1.5">
+    <div class="flex flex-col min-w-1/6 border-2 rounded-lg border-gray-500">
+      <div class="flex items-center">
         @if (schemaService.moduleTypes.length > 0) {
           <div
             matTooltip="Add Module"
-            class="flex items-center justify-center w-full h-10 rounded-lg bg-gray-200 hover:cursor-pointer hover:bg-gray-300 m-2"
+            class="flex items-center justify-center w-10 h-10 rounded-full bg-transparent hover:bg-gray-700 hover:cursor-pointer text-blue-400 border-blue-400 border-2 m-2"
             [matMenuTriggerFor]="addModuleMenu"
           >
             <mat-icon>add</mat-icon>
@@ -31,12 +18,36 @@
             }
           </mat-menu>
         }
+        <div class="text-2xl text-white flex-grow text-center">Modules</div>
+        <div class="w-10 h-10 m-2"></div>
+      </div>
+      <div class="flex-grow h-full overflow-x-hidden overflow-y-auto gap-1.5">
+        @for (module of modules(); track module; let i = $index) {
+          <div>
+            <app-module
+              [path]="`modules/${i}`"
+              (moduleChange)="moduleUpdated(i, $event)"
+              [module]="module"
+              (delete)="deleteModule(i)"
+            ></app-module>
+          </div>
+        }
       </div>
     </div>
-    <div class="flex flex-col flex-grow">
-      <div class="text-2xl text-white text-center w-full">Routes</div>
+    <div class="flex flex-col flex-grow border-2 border-gray-500 rounded-lg">
+      <div class="flex items-center">
+        <div
+          matTooltip="Add Route"
+          class="flex items-center justify-center w-10 h-10 rounded-full bg-transparent hover:bg-gray-700 hover:cursor-pointer text-blue-400 border-blue-400 border-2 m-2"
+          (click)="addRoute()"
+        >
+          <mat-icon>add</mat-icon>
+        </div>
+        <div class="text-2xl text-white text-center flex-grow">Routes</div>
+        <div class="w-10 h-10 m-2"></div>
+      </div>
       <div
-        class="flex-grow h-full overflow-scroll flex flex-row flex-wrap gap-1.5 content-baseline border-2 border-gray-500"
+        class="flex-grow h-full overflow-x-hidden overflow-y-auto flex flex-row flex-wrap gap-1.5 content-baselinerounded-sm"
       >
         @for (route of routes(); track route; let i = $index) {
           <div>
@@ -50,15 +61,6 @@
           </div>
         }
       </div>
-      <div class="flex mb-2">
-        <div
-          matTooltip="Add Route"
-          class="flex items-center justify-center w-full h-10 rounded-lg m-2 bg-gray-200 hover:cursor-pointer hover:bg-gray-300"
-          (click)="addRoute()"
-        >
-          <mat-icon>add</mat-icon>
-        </div>
-      </div>
     </div>
   </div>
 }