Update static/style.css

static/style.css

@@ -27,6 +27,7 @@
     --aqua: #8ec07c;
 }
 
+/* Base Styling */
 body {
     background-color: var(--bg0);
     color: var(--fg0);
@@ -58,137 +59,135 @@ button:hover {
     color: var(--fg0) !important;
 }
 
-.dropdown {
-    position: relative;
+/* === Config Panel Behavior === */
+#configPanel {
+    max-height: 1000px;
     overflow: visible;
-    text-align: center;
+    transition: max-height 0.5s ease, padding 0.5s ease, opacity 0.5s ease;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
 }
 
-.options {
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 240px;
-    z-index: 9999;
-    background-color: var(--bg-statusline1) !important;
-    color: var(--fg0);
-    backdrop-filter: none !important;
-    -webkit-backdrop-filter: none !important;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.25) !important;
-    scrollbar-width: thin;
-    scrollbar-color: #665c54 var(--bg-statusline1);
-    border-radius: 0.5rem;
-    white-space: nowrap;
-    text-align: center;
+#configPanel.minimal .model-label,
+#configPanel.minimal .dropdown,
+#configPanel.minimal .options {
+    display: none !important;
 }
 
-.options::-webkit-scrollbar {
-    width: 8px;
-}
-.options::-webkit-scrollbar-track {
-    background-color: var(--bg-statusline1) !important;
-    border-radius: 0.25rem;
-}
-.options::-webkit-scrollbar-thumb {
-    background-color: #665c54 !important;
-    border-radius: 4px;
-    border: 2px solid var(--bg-statusline1);
-}
-.options::-webkit-scrollbar-thumb:hover {
-    background-color: #7c6f64 !important;
+#configPanel.minimal .model-name {
+    display: block;
+    font-weight: bold;
+    margin-top: 0.25rem;
+    text-align: center;
 }
-.options div:hover {
-    background-color: var(--blue) !important;
-    color: var(--fg1) !important;
-    font-weight: 600;
-    cursor: pointer;
+
+#configPanel.minimal .loader {
+    display: none;
 }
-.options div {
-    padding: 0.5rem 0.75rem;
-    text-align: center;
+
+#configPanel.minimal .model-zone.loading .loader {
+    display: flex;
+    justify-content: center;
+    margin-top: 0.5rem;
 }
 
-footer {
-    margin-top: 1rem;
-    padding-top: 1rem;
-    font-size: 0.875rem;
-    color: var(--fg1);
-    opacity: 0.7;
+/* Expanded mode: show everything */
+#configPanel.expanded .model-label,
+#configPanel.expanded .dropdown,
+#configPanel.expanded .model-name {
+    display: block;
 }
 
-form#chatForm {
-    margin-bottom: 0.5rem;
+#configPanel.expanded .loader {
+    display: none;
 }
 
-@keyframes bounce {
-  0%, 80%, 100% {
-    transform: scale(0);
-  }
-  40% {
-    transform: scale(1);
-  }
+#configPanel.expanded .model-zone.loading .loader {
+    display: flex;
+    justify-content: center;
+    margin-top: 0.5rem;
 }
 
-.dot {
-  width: 8px;
-  height: 8px;
-  margin: 0 4px;
-  background-color: var(--aqua);
-  border-radius: 50%;
-  animation: bounce 1.4s infinite ease-in-out both;
+/* Model zone layout */
+.model-zone {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
 }
 
-.animation-delay-150 {
-  animation-delay: 0.15s;
+/* Dropdown */
+.model-dropdown {
+    width: 100%;
 }
-.animation-delay-300 {
-  animation-delay: 0.3s;
+
+.options {
+    background-color: var(--bg-statusline1);
+    color: var(--fg0);
+    box-shadow: 0 4px 8px rgba(0,0,0,0.25);
+    border-radius: 0.5rem;
+    max-height: 200px;
+    overflow-y: auto;
+    position: absolute;
+    z-index: 9999;
+    margin-top: 0.5rem;
 }
-.bg-aqua {
-  background-color: var(--aqua);
+
+.options div {
+    padding: 0.5rem;
+    cursor: pointer;
 }
 
-#configPanel {
-  max-height: 1000px;
-  overflow: visible;
-  transition: max-height 0.5s ease, padding 0.5s ease, opacity 0.5s ease;
-  display: flex;
-  justify-content: space-around;
+.options div:hover {
+    background-color: var(--blue);
+    color: var(--fg1);
 }
 
-#configPanel.minimal .model-zone .model-label,
-#configPanel.minimal .model-zone .dropdown {
-  display: none;
+/* Loader dots */
+.loader {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: row;
+    gap: 0.5rem;
 }
 
-#configPanel.minimal .model-zone .model-name,
-#configPanel.minimal .model-zone .loader {
-  display: inline-block;
+@keyframes bounce {
+    0%, 80%, 100% {
+        transform: scale(0);
+    }
+    40% {
+        transform: scale(1);
+    }
 }
 
-#configPanel.expanded .model-zone .model-name {
-  display: none;
+.dot {
+    width: 8px;
+    height: 8px;
+    background-color: var(--aqua);
+    border-radius: 50%;
+    animation: bounce 1.4s infinite ease-in-out both;
 }
 
-#configPanel.expanded .model-zone .model-label,
-#configPanel.expanded .model-zone .dropdown {
-  display: block;
+.animation-delay-150 {
+    animation-delay: 0.15s;
 }
 
-.model-zone {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
+.animation-delay-300 {
+    animation-delay: 0.3s;
 }
 
-.model-name {
-  font-weight: bold;
-  padding: 0.5rem 0;
+/* Footer */
+footer {
+    margin-top: 1rem;
+    font-size: 0.875rem;
+    color: var(--fg1);
+    opacity: 0.7;
 }
 
+/* Chat container */
 #chatContainer {
-  position: relative;
-  z-index: 0;
+    position: relative;
+    z-index: 0;
 }