Skip to content

Commit 2acc323

Browse files
jR4dh3yjR4dh3y
committed
Fix drive card size badge layout
1 parent d27799e commit 2acc323

3 files changed

Lines changed: 59 additions & 34 deletions

File tree

‎frontend/src/lib/components/DriveCard.svelte‎

Lines changed: 27 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -91,44 +91,56 @@
9191

9292
<button
9393
type="button"
94-
class="flex items-stretch gap-3 p-4 bg-surface-secondary border border-border-primary rounded-lg cursor-pointer transition-all duration-150 text-left w-full hover:bg-surface-tertiary hover:border-border-focus relative"
94+
class="relative flex w-full cursor-pointer items-stretch gap-3 rounded-lg border border-border-primary bg-surface-secondary p-4 text-left transition-all duration-150 hover:border-border-focus hover:bg-surface-tertiary"
9595
onclick={handleCardClick}
9696
oncontextmenu={handleContextMenu}
9797
>
98-
<div class="shrink-0 w-16 flex items-center justify-center rounded bg-surface-elevated text-text-secondary">
98+
<div
99+
class="flex w-16 shrink-0 items-center justify-center rounded bg-surface-elevated text-text-secondary"
100+
>
99101
<HardDrive size={24} />
100102
</div>
101103

102-
<div class="flex-1 min-w-0 flex flex-col gap-1 py-0.5">
104+
<div class="flex min-w-0 flex-1 flex-col gap-1 py-0.5">
103105
{#if renaming}
104-
<InlineRename
105-
value={displayName}
106-
onSave={handleSaveRename}
107-
onCancel={handleCancelRename}
108-
/>
106+
<InlineRename value={displayName} onSave={handleSaveRename} onCancel={handleCancelRename} />
109107
{:else}
110-
<div class="flex items-center justify-between gap-2 h-5">
111-
<span class="text-sm font-medium text-text-primary">{displayName}</span>
112-
<Badge variant="default">{totalFormatted}</Badge>
108+
<div class="grid h-5 grid-cols-[minmax(0,1fr)_5.25rem] items-center gap-2">
109+
<span class="min-w-0 truncate text-sm font-medium text-text-primary" title={displayName}>
110+
{displayName}
111+
</span>
112+
<div class="flex w-[5.25rem] shrink-0 justify-end overflow-hidden">
113+
<Badge variant="default">{totalFormatted}</Badge>
114+
</div>
113115
</div>
114116
{/if}
115117
<div class="text-xs text-text-muted">
116118
{usedFormatted} used · {freeFormatted} free
117119
{#if drive.readOnly}
118-
<span class="text-warning ml-1">· Read-only</span>
120+
<span class="ml-1 text-warning">· Read-only</span>
119121
{/if}
120122
</div>
121123
{#if drive.device}
122-
<div class="text-[10px] text-text-muted font-mono truncate" title="{drive.device} ({drive.fsType || 'unknown'})">
123-
{drive.device}{#if drive.fsType} · {drive.fsType}{/if}
124+
<div
125+
class="truncate font-mono text-[10px] text-text-muted"
126+
title="{drive.device} ({drive.fsType || 'unknown'})"
127+
>
128+
{drive.device}{#if drive.fsType}
129+
· {drive.fsType}{/if}
124130
</div>
125131
{/if}
126132

127133
<div class="flex items-center gap-3">
128134
<div class="flex-1">
129135
<ProgressBar value={drive.usedPct} size="sm" variant={progressVariant} />
130136
</div>
131-
<span class="text-[11px] shrink-0 {drive.usedPct >= 90 ? 'text-danger' : drive.usedPct >= 75 ? 'text-warning' : 'text-text-muted'}">
137+
<span
138+
class="shrink-0 text-[11px] {drive.usedPct >= 90
139+
? 'text-danger'
140+
: drive.usedPct >= 75
141+
? 'text-warning'
142+
: 'text-text-muted'}"
143+
>
132144
{drive.usedPct.toFixed(1)}%
133145
</span>
134146
</div>

‎frontend/src/lib/components/SystemDriveCard.svelte‎

Lines changed: 26 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -91,50 +91,59 @@
9191

9292
<button
9393
type="button"
94-
class="flex items-stretch gap-3 p-4 bg-surface-secondary border border-border-primary rounded-lg w-full text-left cursor-pointer transition-all duration-150 hover:bg-surface-tertiary hover:border-border-focus relative"
94+
class="relative flex w-full cursor-pointer items-stretch gap-3 rounded-lg border border-border-primary bg-surface-secondary p-4 text-left transition-all duration-150 hover:border-border-focus hover:bg-surface-tertiary"
9595
onclick={handleCardClick}
9696
oncontextmenu={handleContextMenu}
9797
>
98-
<div class="shrink-0 w-22 flex items-center justify-center rounded bg-surface-elevated text-text-secondary">
98+
<div
99+
class="flex w-22 shrink-0 items-center justify-center rounded bg-surface-elevated text-text-secondary"
100+
>
99101
{#if isRootDrive}
100102
<Database size={22} />
101103
{:else}
102104
<HardDrive size={22} />
103105
{/if}
104106
</div>
105107

106-
<div class="flex-1 min-w-0 flex flex-col gap-1.5">
108+
<div class="flex min-w-0 flex-1 flex-col gap-1.5">
107109
{#if renaming}
108-
<InlineRename
109-
value={displayName}
110-
onSave={handleSaveRename}
111-
onCancel={handleCancelRename}
112-
/>
110+
<InlineRename value={displayName} onSave={handleSaveRename} onCancel={handleCancelRename} />
113111
{:else}
114-
<div class="flex items-center justify-between gap-2 h-5">
115-
<span class="text-sm font-medium text-text-primary truncate" title={drive.mountPoint}>
112+
<div class="grid h-5 grid-cols-[minmax(0,1fr)_5.25rem] items-center gap-2">
113+
<span
114+
class="min-w-0 truncate text-sm font-medium text-text-primary"
115+
title={drive.mountPoint}
116+
>
116117
{displayName}
117118
</span>
118-
<Badge variant="default">{totalFormatted}</Badge>
119+
<div class="flex w-[5.25rem] shrink-0 justify-end overflow-hidden">
120+
<Badge variant="default">{totalFormatted}</Badge>
121+
</div>
119122
</div>
120123
{/if}
121-
124+
122125
<div class="text-xs text-text-muted">
123126
{usedFormatted} used · {freeFormatted} free
124127
</div>
125-
126-
<div class="text-[11px] text-text-muted font-mono truncate" title="{drive.device}">
128+
129+
<div class="truncate font-mono text-[11px] text-text-muted" title={drive.device}>
127130
{drive.device}
128131
{#if drive.fsType}
129132
<span class="text-text-secondary"> · {drive.fsType}</span>
130133
{/if}
131134
</div>
132-
133-
<div class="flex items-center gap-3 mt-0.5">
135+
136+
<div class="mt-0.5 flex items-center gap-3">
134137
<div class="flex-1">
135138
<ProgressBar value={drive.usedPct} size="sm" variant={progressVariant} />
136139
</div>
137-
<span class="text-[11px] shrink-0 font-medium {drive.usedPct >= 90 ? 'text-danger' : drive.usedPct >= 75 ? 'text-warning' : 'text-text-muted'}">
140+
<span
141+
class="shrink-0 text-[11px] font-medium {drive.usedPct >= 90
142+
? 'text-danger'
143+
: drive.usedPct >= 75
144+
? 'text-warning'
145+
: 'text-text-muted'}"
146+
>
138147
{drive.usedPct.toFixed(1)}%
139148
</span>
140149
</div>

‎frontend/src/lib/components/ui/Badge.svelte‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,10 +13,14 @@
1313
success: 'bg-success/20 text-success',
1414
warning: 'bg-warning/20 text-warning',
1515
danger: 'bg-danger/20 text-danger',
16-
info: 'bg-accent/20 text-accent',
16+
info: 'bg-accent/20 text-accent'
1717
};
1818
</script>
1919

20-
<span class="inline-flex items-center px-2 py-0.5 text-xs font-medium rounded {variantClasses[variant]}">
20+
<span
21+
class="inline-flex items-center rounded px-2 py-0.5 text-xs font-medium whitespace-nowrap {variantClasses[
22+
variant
23+
]}"
24+
>
2125
{@render children()}
2226
</span>

0 commit comments

Comments
 (0)