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.
This commit is contained in:
@@ -750,6 +750,15 @@ body {
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-actions {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-title {
|
.card-title {
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>LLM Proxy Gateway - Admin Dashboard</title>
|
<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="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="icon" href="img/logo-icon.png" type="image/png" sizes="any">
|
||||||
<link rel="apple-touch-icon" href="img/logo-icon.png">
|
<link rel="apple-touch-icon" href="img/logo-icon.png">
|
||||||
|
|||||||
@@ -284,7 +284,7 @@ class Dashboard {
|
|||||||
<h3 class="card-title">Model Registry</h3>
|
<h3 class="card-title">Model Registry</h3>
|
||||||
<p class="card-subtitle">Manage model availability and custom pricing</p>
|
<p class="card-subtitle">Manage model availability and custom pricing</p>
|
||||||
</div>
|
</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;">
|
<select id="model-provider-filter" class="form-control" style="margin-bottom: 0; padding: 4px 8px; width: auto;">
|
||||||
<option value="">All Providers</option>
|
<option value="">All Providers</option>
|
||||||
<option value="openai">OpenAI</option>
|
<option value="openai">OpenAI</option>
|
||||||
|
|||||||
Reference in New Issue
Block a user