From 0526304398b9225633cf92ab79439dd28b16df13 Mon Sep 17 00:00:00 2001
From: hobokenchicken <dustin@dustin.coffee>
Date: Sat, 7 Mar 2026 01:37:27 +0000
Subject: [PATCH] style(dashboard): fix bunched buttons in card headers

This commit adds a proper flexbox layout to the '.card-actions' CSS class. Previously, action buttons (like Export and Refresh on the Analytics page) were bunching up because they lacked a flex container with appropriate gap and wrapping rules. It also updates the '.card-header' to wrap gracefully on smaller screens.
---
 static/css/dashboard.css | 9 +++++++++
 static/index.html        | 2 +-
 static/js/dashboard.js   | 2 +-
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/static/css/dashboard.css b/static/css/dashboard.css
index afeb1373..4b848ed6 100644
--- a/static/css/dashboard.css
+++ b/static/css/dashboard.css
@@ -750,6 +750,15 @@ body {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    flex-wrap: wrap;
+    gap: 1rem;
+}
+
+.card-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
 }
 
 .card-title {
diff --git a/static/index.html b/static/index.html
index c62156dc..6d05abe0 100644
--- a/static/index.html
+++ b/static/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>LLM Proxy Gateway - Admin Dashboard</title>
-    <link rel="stylesheet" href="/css/dashboard.css?v=8">
+    <link rel="stylesheet" href="/css/dashboard.css?v=9">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link rel="icon" href="img/logo-icon.png" type="image/png" sizes="any">
     <link rel="apple-touch-icon" href="img/logo-icon.png">
diff --git a/static/js/dashboard.js b/static/js/dashboard.js
index aa88c90f..53a84b24 100644
--- a/static/js/dashboard.js
+++ b/static/js/dashboard.js
@@ -284,7 +284,7 @@ class Dashboard {
                         <h3 class="card-title">Model Registry</h3>
                         <p class="card-subtitle">Manage model availability and custom pricing</p>
                     </div>
-                    <div class="card-actions" style="display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;">
+                    <div class="card-actions">
                         <select id="model-provider-filter" class="form-control" style="margin-bottom: 0; padding: 4px 8px; width: auto;">
                             <option value="">All Providers</option>
                             <option value="openai">OpenAI</option>