Update static/style.css

static/style.css

@@ -25,6 +25,8 @@
   --visual_green: #a9b665;
   --aqua: #8ec07c;
 }
+
+/* Base Styling */
 body {
   background-color: var(--bg0);
   color: var(--fg0);
@@ -49,12 +51,74 @@ button:hover {
   background-color: var(--purple) !important;
   color: var(--fg0) !important;
 }
-/* Dropdown */
-.dropdown {
-  position: relative;
+
+/* Config Panel Layout */
+#configPanel {
+  max-height: 1000px;
   overflow: visible;
+  transition: max-height 0.5s ease, padding 0.5s ease, opacity 0.5s ease;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+#configPanel > h2 {
+  text-align: center;
+}
+#configPanel .grid {
+  justify-items: center;
+}
+.model-zone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   text-align: center;
 }
+
+/* Minimal View */
+#configPanel.minimal .model-label,
+#configPanel.minimal .model-dropdown,
+#configPanel.minimal .options {
+  display: none !important;
+}
+#configPanel.minimal .model-name {
+  display: inline-block;
+  font-weight: bold;
+  margin-top: 0.25rem;
+}
+#configPanel.minimal .loader {
+  display: none;
+}
+#configPanel.minimal .model-zone.loading .loader {
+  display: flex;
+  justify-content: center;
+  margin-top: 0.5rem;
+}
+
+/* Expanded View */
+#configPanel.expanded .model-label,
+#configPanel.expanded .model-dropdown {
+  display: block;
+}
+#configPanel.expanded .model-name {
+  display: none;
+}
+#configPanel.expanded .loader {
+  display: none;
+}
+#configPanel.expanded .model-zone.loading .loader {
+  display: flex;
+  justify-content: center;
+  margin-top: 0.5rem;
+}
+
+/* Dropdown */
+.model-dropdown {
+  position: relative;
+  background-color: var(--bg-statusline1);
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  cursor: pointer;
+}
 .options {
   position: absolute;
   top: 100%;
@@ -68,15 +132,13 @@ button:hover {
   border-radius: 0.5rem;
   max-height: 15rem;
   overflow-y: auto;
-  scrollbar-width: thin;
-  scrollbar-color: #665c54 var(--bg-statusline1);
   display: none;
 }
 .options.show {
   display: block;
 }
 .options div {
-  padding: 0.5rem 0.75rem;
+  padding: 0.5rem;
   text-align: center;
   cursor: pointer;
 }
@@ -85,6 +147,8 @@ button:hover {
   color: var(--fg1);
   font-weight: 600;
 }
+
+/* Scrollbar WebKit */
 .options::-webkit-scrollbar {
   width: 8px;
 }
@@ -100,37 +164,13 @@ button:hover {
 .options::-webkit-scrollbar-thumb:hover {
   background-color: #7c6f64;
 }
-/* Config Panel */
-#configPanel {
-  max-height: 1000px;
-  overflow: visible;
-  transition: max-height 0.5s ease, padding 0.5s ease, opacity 0.5s ease;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
-#configPanel.minimal .model-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-  gap: 1rem;
-}
-#configPanel.minimal .dropdown,
-#configPanel.minimal label {
-  display: none;
-}
-#configPanel.minimal .model-name,
-#configPanel.minimal .loader {
-  display: block;
-}
-#configPanel.expanded .model-name,
-#configPanel.expanded .loader {
-  display: none;
-}
-/* Align loading animation */
+
+/* Loader */
 .loader {
   display: flex;
   justify-content: center;
   align-items: center;
+  flex-direction: row;
   gap: 4px;
   margin-top: 4px;
 }
@@ -151,12 +191,7 @@ button:hover {
   0%, 80%, 100% { transform: scale(0); }
   40% { transform: scale(1); }
 }
-.model-zone {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-}
+
 /* Footer */
 footer {
   margin-top: 1rem;
@@ -165,7 +200,7 @@ footer {
   color: var(--fg1);
   opacity: 0.7;
 }
-/* Chat layering fix */
+/* Chat */
 #chatContainer {
   position: relative;
   z-index: 0;