dtoro/mule-image
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: tighten sidebars with eyebrow section headers

Browse Source 
Compact the left/right sidebars and the photo info panel: shrink panel
widths, drop header height, switch top-level tree groups and metadata
sections to small uppercase eyebrow labels, and tighten row padding,
icon sizes, and count badges throughout.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
authentik Default Admin
2026-04-09 19:03:22 +02:00
parent 12a616d4b5
commit 8f25c58b74
6 changed files with 91 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/components/heaps/ActiveHeapCard.tsx
View File

@@ -56,20 +56,20 @@ export function ActiveHeapCard() {
}))
return (
<div className="m-2 rounded-lg border border-border bg-surface-2 shadow-sm">
<div className="m-1.5 rounded-md border border-border bg-surface-2 shadow-sm">
{/* Header — clickable, navigates to the heap section. */}
<button
onClick={() =>
navigateToSection(`heap-${activeHeap.id}`, { heapId: activeHeap.id })
}
className="flex w-full items-center gap-2 rounded-t-lg px-3 py-2 text-left hover:bg-surface-offset"
className="flex w-full items-center gap-1.5 rounded-t-md px-2 py-1.5 text-left hover:bg-surface-offset"
title={`Open "${activeHeap.name}"`}
>
<ShoppingBasket className="h-4 w-4 flex-shrink-0 text-pick" />
<span className="min-w-0 flex-1 truncate text-sm font-semibold text-text">
<ShoppingBasket className="h-3.5 w-3.5 flex-shrink-0 text-pick" />
<span className="min-w-0 flex-1 truncate text-[12px] font-semibold text-text">
{activeHeap.name}
</span>
<span className="flex h-5 min-w-[24px] items-center justify-center rounded bg-surface px-1.5 text-[11px] font-medium text-text-muted">
<span className="flex h-4 min-w-[20px] items-center justify-center rounded bg-surface px-1 text-[10px] font-medium text-text-muted">
{orderedIds.length}
</span>
</button>
@@ -81,7 +81,7 @@ export function ActiveHeapCard() {
* so the cacti frame the photos rather than the (transparent) sky. */}
<div
key={activeHeap.id}
className="relative h-24 overflow-hidden rounded-b-lg px-3 pb-3"
className="relative h-20 overflow-hidden rounded-b-md px-2 pb-2"
style={{
backgroundImage: `url(${cardBg})`,
backgroundSize: 'cover',
@@ -117,10 +117,10 @@ export function ActiveHeapCard() {
position: 'absolute',
left: '50%',
top: '50%',
marginLeft: -32, // half of w-16
marginTop: -32, // half of h-16
marginLeft: -26, // half of w-13
marginTop: -26, // half of h-13
}}
className="h-16 w-16 rounded object-cover shadow-md ring-1 ring-black/40"
className="h-[52px] w-[52px] rounded object-cover shadow-md ring-1 ring-black/40"
/>
))}
</AnimatePresence>