Skip to content

Commit 9fc73b3

Browse files
Viren070Viren070
committed
fix(frontend): ui issues
1 parent 173609b commit 9fc73b3

6 files changed

Lines changed: 75 additions & 60 deletions

File tree

‎packages/frontend/src/app/dashboard/analytics/analytics-page.tsx‎

Lines changed: 48 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -194,17 +194,17 @@ export function AnalyticsPage() {
194194
No addon data for this range.
195195
</p>
196196
) : (
197-
<div className="grid lg:grid-cols-[1fr,260px] gap-6">
198-
<div className="overflow-x-auto">
199-
<table className="w-full text-sm">
197+
<div className="grid lg:grid-cols-[1fr,240px] gap-6 items-center">
198+
<div className="overflow-x-auto -mx-4 px-4 lg:mx-0 lg:px-0">
199+
<table className="w-full text-sm min-w-[560px]">
200200
<thead className="text-[--muted] text-xs uppercase">
201201
<tr className="text-left border-b border-[--border]">
202-
<th className="py-2">Addon</th>
203-
<th className="py-2 text-right">Requests</th>
204-
<th className="py-2 text-right">Share</th>
205-
<th className="py-2 text-right">Errors</th>
206-
<th className="py-2 text-right">Err %</th>
207-
<th className="py-2 text-right">Avg ms</th>
202+
<th className="py-2 pr-3">Addon</th>
203+
<th className="py-2 px-3 text-right">Requests</th>
204+
<th className="py-2 px-3 text-right">Share</th>
205+
<th className="py-2 px-3 text-right">Errors</th>
206+
<th className="py-2 px-3 text-right">Err %</th>
207+
<th className="py-2 pl-3 text-right">Avg ms</th>
208208
</tr>
209209
</thead>
210210
<tbody>
@@ -213,48 +213,53 @@ export function AnalyticsPage() {
213213
key={a.presetId}
214214
className="border-b border-[--border]/50"
215215
>
216-
<td className="py-2 font-medium">{a.presetId}</td>
217-
<td className="py-2 text-right tabular-nums">
216+
<td className="py-2 pr-3 font-medium">
217+
{a.presetId}
218+
</td>
219+
<td className="py-2 px-3 text-right tabular-nums">
218220
{a.requests.toLocaleString()}
219221
</td>
220-
<td className="py-2 text-right tabular-nums">
222+
<td className="py-2 px-3 text-right tabular-nums">
221223
{a.share}%
222224
</td>
223-
<td className="py-2 text-right tabular-nums">
225+
<td className="py-2 px-3 text-right tabular-nums">
224226
{a.errors}
225227
</td>
226228
<td
227229
className={cn(
228-
'py-2 text-right tabular-nums',
230+
'py-2 px-3 text-right tabular-nums',
229231
a.errorRate > 10 && 'text-red-500'
230232
)}
231233
>
232234
{a.errorRate}%
233235
</td>
234-
<td className="py-2 text-right tabular-nums">
236+
<td className="py-2 pl-3 text-right tabular-nums">
235237
{a.avgLatencyMs ?? '—'}
236238
</td>
237239
</tr>
238240
))}
239241
</tbody>
240242
</table>
241243
</div>
242-
<DonutChart
243-
data={d.addons.slice(0, 6).map((a) => ({
244-
name: a.presetId,
245-
value: a.requests,
246-
}))}
247-
centerLabel="requests"
248-
centerValue={d.total.toLocaleString()}
249-
/>
244+
<div className="mx-auto w-full max-w-[240px] aspect-square">
245+
<DonutChart
246+
data={d.addons.slice(0, 6).map((a) => ({
247+
name: a.presetId,
248+
value: a.requests,
249+
}))}
250+
centerLabel="requests"
251+
centerValue={d.total.toLocaleString()}
252+
height={240}
253+
/>
254+
</div>
250255
</div>
251256
)
252257
}
253258
</DashboardQueryBoundary>
254259
</Card>
255260

256261
{/* Feature usage — what users have configured. Counts are distinct
257-
users (uuid_hashes) per day per key, summed across the window.
262+
users per day per key, summed across the window.
258263
Drives roadmap decisions: which services/presets actually get used. */}
259264
<Card className="p-4">
260265
<div className="mb-3 flex items-center justify-between">
@@ -290,23 +295,25 @@ export function AnalyticsPage() {
290295
!d.topUsers.length ? (
291296
<p className="text-sm text-[--muted]">No data for this range.</p>
292297
) : (
293-
<table className="w-full text-sm">
294-
<tbody>
295-
{d.topUsers.map((u) => (
296-
<tr
297-
key={u.uuidHash}
298-
className="border-b border-[--border]/50"
299-
>
300-
<td className="py-1.5 font-mono text-xs text-[--muted]">
301-
{u.uuidHash.slice(0, 16)}…
302-
</td>
303-
<td className="py-1.5 text-right tabular-nums">
304-
{u.requests.toLocaleString()}
305-
</td>
306-
</tr>
307-
))}
308-
</tbody>
309-
</table>
298+
<div className="overflow-x-auto">
299+
<table className="w-full text-sm">
300+
<tbody>
301+
{d.topUsers.map((u) => (
302+
<tr
303+
key={u.uuidHash}
304+
className="border-b border-[--border]/50"
305+
>
306+
<td className="py-1.5 font-mono text-xs text-[--muted] break-all">
307+
{u.uuidHash.slice(0, 16)}
308+
</td>
309+
<td className="py-1.5 pl-3 text-right tabular-nums whitespace-nowrap">
310+
{u.requests.toLocaleString()}
311+
</td>
312+
</tr>
313+
))}
314+
</tbody>
315+
</table>
316+
</div>
310317
)
311318
}
312319
</DashboardQueryBoundary>

‎packages/frontend/src/app/dashboard/settings/_components/import-env-modal.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -136,17 +136,17 @@ export function ImportEnvModal({
136136
className="flex items-start justify-between gap-3 py-1.5 px-2 rounded-md hover:bg-[--subtle] transition-colors"
137137
>
138138
<div className="min-w-0 flex-1">
139-
<div className="flex items-center gap-2">
140-
<span className="font-medium truncate">
139+
<div className="flex flex-wrap items-baseline gap-x-2 gap-y-0.5 min-w-0">
140+
<span className="font-medium break-words">
141141
{k.label}
142142
</span>
143143
{k.env && (
144-
<code className="text-xs text-[--muted] truncate">
144+
<code className="text-xs text-[--muted] break-all min-w-0">
145145
{k.env}
146146
</code>
147147
)}
148148
</div>
149-
<div className="text-xs text-[--muted] truncate mt-0.5 font-mono">
149+
<div className="text-xs text-[--muted] break-all mt-0.5 font-mono min-w-0">
150150
{previewValue(k.value, k.secret)}
151151
</div>
152152
</div>

‎packages/frontend/src/app/dashboard/settings/_components/import-settings-modal.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -298,10 +298,10 @@ export function ImportSettingsModal({
298298
className="flex items-start gap-3 py-1.5 px-2 rounded-md hover:bg-[--subtle] transition-colors"
299299
>
300300
<div className="min-w-0 flex-1">
301-
<code className="text-xs text-[--muted] truncate block">
301+
<code className="text-xs text-[--muted] break-all block">
302302
{key}
303303
</code>
304-
<div className="text-xs text-[--foreground] truncate mt-0.5 font-mono">
304+
<div className="text-xs text-[--foreground] break-all mt-0.5 font-mono min-w-0">
305305
{previewValue(value)}
306306
</div>
307307
</div>

‎packages/frontend/src/app/dashboard/settings/_components/reset-settings-modal.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,8 @@ export function ResetSettingsModal({
9191
}, [open, resettable]);
9292

9393
const groups = React.useMemo(() => groupKeys(resettable), [resettable]);
94-
const allChecked = selected.size === resettable.length && resettable.length > 0;
94+
const allChecked =
95+
selected.size === resettable.length && resettable.length > 0;
9596
const someChecked = selected.size > 0 && !allChecked;
9697

9798
const toggle = (key: string) => {
@@ -164,7 +165,7 @@ export function ResetSettingsModal({
164165
footer={
165166
<>
166167
<Button
167-
intent="gray-basic"
168+
intent="gray-outline"
168169
onClick={() => onOpenChange(false)}
169170
disabled={isPending}
170171
>
@@ -238,15 +239,15 @@ export function ResetSettingsModal({
238239
className="flex-1 text-left min-w-0"
239240
onClick={() => toggle(k.key)}
240241
>
241-
<div className="flex items-center gap-2">
242-
<span className="font-medium truncate">
242+
<div className="flex flex-wrap items-baseline gap-x-2 gap-y-0.5 min-w-0">
243+
<span className="font-medium break-words">
243244
{k.label}
244245
</span>
245-
<code className="text-xs text-[--muted] truncate">
246+
<code className="text-xs text-[--muted] break-all min-w-0">
246247
{k.key}
247248
</code>
248249
</div>
249-
<div className="text-xs text-[--muted] truncate mt-0.5">
250+
<div className="text-xs text-[--muted] break-all mt-0.5 min-w-0">
250251
<span className="font-mono">
251252
{previewValue(k.value, k.secret)}
252253
</span>

‎packages/frontend/src/app/dashboard/settings/settings-page.tsx‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,13 @@ function TabForm({
9797
const n = toName(k.key);
9898
shape[n] = z.any();
9999
// Secrets start blank so an untouched field PATCHes nothing.
100-
defaults[n] = k.secret ? '' : k.value;
100+
if (k.secret) {
101+
defaults[n] = '';
102+
} else if (k.value === null && k.ui.kind === 'enum') {
103+
defaults[n] = '';
104+
} else {
105+
defaults[n] = k.value;
106+
}
101107
byName.set(n, k);
102108
}
103109
return { schema: z.object(shape), defaults, byName };
@@ -121,8 +127,11 @@ function TabForm({
121127
}
122128
continue;
123129
}
124-
if (JSON.stringify(val) !== JSON.stringify(k.value))
125-
patch[k.key] = val;
130+
const isNullableEnum =
131+
k.ui.kind === 'enum' && (k.value === null || k.default === null);
132+
const normalised = isNullableEnum && val === '' ? null : val;
133+
if (JSON.stringify(normalised) !== JSON.stringify(k.value))
134+
patch[k.key] = normalised;
126135
}
127136
if (Object.keys(patch).length === 0) {
128137
toast.info('No changes to save.');
@@ -302,9 +311,7 @@ export function SettingsPage() {
302311
value={t.section}
303312
className="space-y-4 animate-in fade-in-0 slide-in-from-bottom-2 duration-300"
304313
>
305-
{tab === t.section && (
306-
<TabForm tab={t} allKeys={data.keys} />
307-
)}
314+
{tab === t.section && <TabForm tab={t} allKeys={data.keys} />}
308315
</TabsContent>
309316
))}
310317
</div>

‎packages/frontend/src/components/ui/modal/modal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export const ModalAnatomy = defineStyleAnatomy({
3636
]),
3737
footer: cva([
3838
'UI-Modal__footer',
39-
'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
39+
'flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
4040
]),
4141
title: cva([
4242
'UI-Modal__title',

0 commit comments

Comments
 (0)