Skip to content

Commit bb91ad0

Browse files
x0sinax0sina
committed
fix(dashboard): tighten modal and sidebar UI spacing
- Align sidebar version and update status on one line - Improve sidebar submenu spacing and child item styling - Open date pickers below fields by default - Match node API key generator button styling - Reduce user modal footer spacing
1 parent a3bf671 commit bb91ad0

7 files changed

Lines changed: 29 additions & 30 deletions

File tree

‎dashboard/src/components/common/date-picker.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@ interface BaseDatePickerProps {
9292
popoverAlignDesktop?: DatePickerAlign
9393
/**
9494
* When `side` is unset: side on viewports wider than mobile (mobile uses `bottom`).
95-
* @default 'left'
95+
* @default 'bottom'
9696
*/
9797
popoverSideDesktop?: DatePickerSide
9898
}
@@ -175,7 +175,7 @@ export function DatePicker({
175175
align,
176176
side,
177177
popoverAlignDesktop = 'end',
178-
popoverSideDesktop = 'left',
178+
popoverSideDesktop = 'bottom',
179179
}: DatePickerProps) {
180180
const { t, i18n } = useTranslation()
181181
const dir = useDirDetection()

‎dashboard/src/components/dialogs/node-modal.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -559,24 +559,25 @@ export default function NodeModal({ isDialogOpen, onOpenChange, form, editingNod
559559
<FormItem>
560560
<FormLabel>{t('nodeModal.apiKey')}</FormLabel>
561561
<FormControl>
562-
<div className={cn('flex w-full min-w-0 items-stretch gap-0', dir === 'rtl' && 'flex-row-reverse')}>
562+
<div className={cn('flex w-full min-w-0 items-center gap-2', dir === 'rtl' && 'flex-row-reverse')}>
563563
<Input
564564
isError={!!form.formState.errors.api_key}
565565
type="text"
566566
placeholder={t('nodeModal.apiKeyPlaceholder')}
567567
autoComplete="off"
568-
className="min-w-0 rounded-e-none border-e-0 shadow-none focus-visible:z-10"
568+
className="min-w-0"
569569
{...field}
570570
onChange={e => field.onChange(e.target.value)}
571571
/>
572572
<Button
573573
type="button"
574-
variant="outline"
575-
size="sm"
574+
variant="ghost"
575+
size="icon"
576576
onClick={generateUUID}
577-
className="shrink-0 rounded-s-none px-3 focus-visible:z-10"
577+
className="shrink-0"
578+
title={t('nodeModal.generateApiKey', { defaultValue: 'Generate API key' })}
578579
>
579-
<RefreshCw className="!h-4 !w-4" aria-hidden />
580+
<RefreshCw className="h-3 w-3" aria-hidden />
580581
</Button>
581582
</div>
582583
</FormControl>

‎dashboard/src/components/dialogs/user-modal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2581,7 +2581,7 @@ function UserModal({ isDialogOpen, onOpenChange, form, editingUser, editingUserI
25812581
{renderUserMetaPanel('mt-4 lg:hidden')}
25822582
</div>
25832583
{/* Cancel/Create buttons - always visible */}
2584-
<div className="mt-4 flex flex-row items-center justify-end gap-3 overflow-x-auto">
2584+
<div className="-mx-1 mt-2 flex flex-row items-center justify-end gap-3 overflow-x-auto px-1 py-1 sm:mx-0 sm:px-0 sm:pb-0 sm:pt-2">
25852585
{editingUser && (
25862586
<DropdownMenu modal={false} open={isActionsMenuOpen} onOpenChange={setActionsMenuOpen}>
25872587
<DropdownMenuTrigger asChild>

‎dashboard/src/components/layout/nav-main.tsx‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { ChevronRight, type LucideIcon } from 'lucide-react'
22

33
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible'
4-
import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubItem, useSidebar } from '@/components/ui/sidebar'
4+
import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, useSidebar } from '@/components/ui/sidebar'
55
import { NavLink, useLocation } from 'react-router'
66
import { useTranslation } from 'react-i18next'
77

@@ -57,14 +57,12 @@ export function NavMain({
5757
<SidebarMenuSub>
5858
{item.items?.map(subItem => (
5959
<SidebarMenuSubItem key={subItem.title}>
60-
<NavLink to={subItem.url} end onClick={handleNavigation}>
61-
{({ isActive }) => (
62-
<SidebarMenuButton className="flex items-center gap-2" isActive={isActive}>
63-
<subItem.icon />
64-
<span>{t(subItem.title)}</span>
65-
</SidebarMenuButton>
66-
)}
67-
</NavLink>
60+
<SidebarMenuSubButton asChild className="flex items-center gap-2 h-8" isActive={location.pathname === subItem.url}>
61+
<NavLink to={subItem.url} end onClick={handleNavigation}>
62+
<subItem.icon />
63+
<span>{t(subItem.title)}</span>
64+
</NavLink>
65+
</SidebarMenuSubButton>
6866
</SidebarMenuSubItem>
6967
))}
7068
</SidebarMenuSub>

‎dashboard/src/components/layout/sidebar.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -426,11 +426,11 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
426426
<div className="flex min-w-0 flex-1 flex-col items-start overflow-hidden">
427427
<span className={cn(isRTL ? 'text-right' : 'text-left', 'truncate text-sm font-semibold leading-tight')}>{t('pasarguard')}</span>
428428
{isSudo && (
429-
<div className="flex min-w-0 items-center gap-1.5">
430-
<span className="shrink-0 text-xs opacity-45">{displayVersion}</span>
431-
<div className="min-w-0 flex-1">
429+
<div className="flex min-w-0 items-baseline gap-1.5 whitespace-nowrap leading-none">
430+
<span className="shrink-0 whitespace-nowrap text-xs leading-none opacity-45">{displayVersion}</span>
431+
<div className="min-w-max shrink-0">
432432
<TooltipProvider>
433-
<VersionBadge currentVersion={normalizedVersion} />
433+
<VersionBadge currentVersion={normalizedVersion} className="leading-none" />
434434
</TooltipProvider>
435435
</div>
436436
</div>
@@ -475,10 +475,10 @@ export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
475475
<div className="flex flex-col overflow-hidden">
476476
<span className={cn(isRTL ? 'text-right' : 'text-left', 'truncate text-sm font-semibold leading-tight')}>{t('pasarguard')}</span>
477477
{isSudo && (
478-
<div className="flex items-center gap-1.5">
479-
<span className="text-xs opacity-45">{displayVersion}</span>
478+
<div className="flex items-baseline gap-1.5 whitespace-nowrap leading-none">
479+
<span className="shrink-0 whitespace-nowrap text-xs leading-none opacity-45">{displayVersion}</span>
480480
<TooltipProvider>
481-
<VersionBadge currentVersion={normalizedVersion} />
481+
<VersionBadge currentVersion={normalizedVersion} className="leading-none" />
482482
</TooltipProvider>
483483
</div>
484484
)}

‎dashboard/src/components/layout/version-badge.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -48,11 +48,11 @@ export function VersionBadge({ currentVersion, className }: VersionBadgeProps) {
4848
href={releaseLink}
4949
target="_blank"
5050
rel="noopener noreferrer"
51-
className={cn('inline-flex items-center gap-0.5 text-[10px] opacity-70 text-amber-600 dark:text-amber-400 hover:opacity-100 hover:underline min-w-0 max-w-full transition-opacity', className)}
51+
className={cn('inline-flex min-w-max items-center gap-0.5 whitespace-nowrap text-[10px] leading-none text-amber-600 opacity-70 transition-opacity hover:opacity-100 hover:underline dark:text-amber-400', className)}
5252
onClick={(e) => e.stopPropagation()}
5353
>
5454
<span className="h-1 w-1 rounded-full bg-amber-500 dark:bg-amber-400 shrink-0" />
55-
<span className="truncate min-w-0">{t('version.needsUpdate')}</span>
55+
<span className="whitespace-nowrap leading-none">{t('version.needsUpdate')}</span>
5656
</a>
5757
</TooltipTrigger>
5858
<TooltipContent side="bottom" className="p-1.5">
@@ -73,9 +73,9 @@ export function VersionBadge({ currentVersion, className }: VersionBadgeProps) {
7373
return (
7474
<Tooltip delayDuration={100}>
7575
<TooltipTrigger asChild>
76-
<span className={cn('inline-flex items-center gap-0.5 text-[10px] opacity-70 text-emerald-600 dark:text-emerald-400 min-w-0 max-w-full', className)}>
76+
<span className={cn('inline-flex min-w-max items-center gap-0.5 whitespace-nowrap text-[10px] leading-none text-emerald-600 opacity-70 dark:text-emerald-400', className)}>
7777
<span className="h-1 w-1 rounded-full bg-emerald-500 dark:bg-emerald-400 shrink-0" />
78-
<span className="truncate min-w-0">{t('version.upToDate')}</span>
78+
<span className="whitespace-nowrap leading-none">{t('version.upToDate')}</span>
7979
</span>
8080
</TooltipTrigger>
8181
<TooltipContent side="bottom" className="p-1.5">

‎dashboard/src/components/ui/sidebar.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -579,7 +579,7 @@ const SidebarMenuSub = React.forwardRef<HTMLUListElement, React.ComponentProps<'
579579
<ul
580580
ref={ref}
581581
data-sidebar="menu-sub"
582-
className={cn('mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-sidebar-border px-2.5 py-0.5 ltr:border-l rtl:border-r', 'group-data-[collapsible=icon]:hidden', className)}
582+
className={cn('mx-3.5 mt-1.5 flex min-w-0 translate-x-px flex-col gap-1 border-sidebar-border px-2.5 py-0.5 ltr:border-l rtl:border-r', 'group-data-[collapsible=icon]:hidden', className)}
583583
{...props}
584584
/>
585585
))

0 commit comments

Comments
 (0)