apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-07-08 22:22:17 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(editor-panel): enhance layout and styling for improved usability

Browse source 
- Updated the EditorPanelContent to streamline the header layout and improve button styling for closing the panel.
- Adjusted the grid layout for better alignment and spacing, enhancing the overall user experience.
- Integrated a vertical separator with updated styling for a more cohesive design.
This commit is contained in:
Anish Sarkar 2026-07-06 16:12:38 +05:30
parent 4088289f95
commit 7a3f99c4f2
2 changed files with 87 additions and 72 deletions
Download patch file Download diff file Expand all files Collapse all files

31
surfsense_web/components/editor-panel/editor-panel.tsx
View file

@ -574,28 +574,14 @@ export function EditorPanelContent({
<>
{showDesktopHeader ? (
<div className="shrink-0">
<div className="shrink-0 flex h-12 items-center justify-between px-3 border-b">
<h2 className="select-none text-lg font-semibold">File</h2>
<div className="flex items-center gap-1 shrink-0">
<Button
variant="ghost"
size="icon"
onClick={onClose}
className="h-8 w-8 rounded-full shrink-0 text-muted-foreground hover:text-accent-foreground"
>
<XIcon className="h-4 w-4" />
<span className="sr-only">Close editor panel</span>
</Button>
</div>
</div>
<div className="grid h-10 grid-cols-[minmax(0,1fr)_auto] items-center gap-3 border-b px-4">
<div className="grid h-12 grid-cols-[minmax(0,1fr)_auto] items-center gap-3 border-b px-4">
<div className="min-w-0 flex flex-1 items-center gap-2">
<p className="truncate text-sm text-muted-foreground">{displayTitle}</p>
{memoryLimitState && (
<>
<Separator
orientation="vertical"
className="mx-1 bg-border data-[orientation=vertical]:h-4 data-[orientation=vertical]:w-px dark:bg-white/10"
className="mx-1.5 bg-muted-foreground/20 data-[orientation=vertical]:h-4 data-[orientation=vertical]:w-px dark:bg-muted-foreground/25"
/>
<span className={`shrink-0 text-xs ${memoryCounterClassName}`}>
{memoryLimitState.label}
@ -671,6 +657,19 @@ export function EditorPanelContent({
)}
</>
)}
<Separator
orientation="vertical"
className="mx-1.5 bg-muted-foreground/20 data-[orientation=vertical]:h-4 data-[orientation=vertical]:w-px dark:bg-muted-foreground/25"
/>
<Button
variant="ghost"
size="icon"
onClick={onClose}
className="size-6 shrink-0 rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
>
<XIcon className="size-4" />
<span className="sr-only">Close editor panel</span>
</Button>
</div>
</div>
</div>