fix(ui): proper resizing width when collapsing sidebar

Author: x0sina

dashboard/src/components/charts/AllNodesStackedBarChart.tsx

@@ -221,7 +221,6 @@ export function AllNodesStackedBarChart() {
   const [modalOpen, setModalOpen] = useState(false)
   const [selectedData, setSelectedData] = useState<any>(null)
   const [currentDataIndex, setCurrentDataIndex] = useState(0)
-  const [chartKey, setChartKey] = useState(0)
 
   const chartContainerRef = useRef<HTMLDivElement>(null)
 
@@ -230,61 +229,6 @@ export function AllNodesStackedBarChart() {
   const { data: nodesData } = useGetNodes(undefined, { query: { enabled: true } })
   const { resolvedTheme } = useTheme()
 
-  // Improved resize handling
-  useEffect(() => {
-    let timeoutId: NodeJS.Timeout
-
-    const handleResize = () => {
-      clearTimeout(timeoutId)
-      // Debounce to avoid excessive re-renders
-      timeoutId = setTimeout(() => {
-        setChartKey(prev => prev + 1)
-      }, 150)
-    }
-
-    // Listen to window resize
-    window.addEventListener('resize', handleResize)
-
-    // Use ResizeObserver on the chart container and its parent
-    const resizeObserver = new ResizeObserver(handleResize)
-
-    // Observe the chart container
-    if (chartContainerRef.current) {
-      resizeObserver.observe(chartContainerRef.current)
-    }
-
-    // Observe main content area (catches sidebar changes)
-    const mainContent = document.querySelector('main') || document.querySelector('[role="main"]') || document.getElementById('main-content')
-    if (mainContent) {
-      resizeObserver.observe(mainContent)
-    }
-
-    // Observe body for class/attribute changes (sidebar state)
-    const mutationObserver = new MutationObserver(handleResize)
-    mutationObserver.observe(document.body, {
-      attributes: true,
-      attributeFilter: ['class', 'data-sidebar-state', 'data-state'],
-      childList: false,
-      subtree: false
-    })
-
-    // Also observe the sidebar element itself if it exists
-    const sidebar = document.querySelector('[data-sidebar]') || document.querySelector('aside')
-    if (sidebar) {
-      mutationObserver.observe(sidebar, {
-        attributes: true,
-        attributeFilter: ['class', 'data-state'],
-      })
-    }
-
-    return () => {
-      clearTimeout(timeoutId)
-      window.removeEventListener('resize', handleResize)
-      resizeObserver.disconnect()
-      mutationObserver.disconnect()
-    }
-  }, [])
-
   // Navigation handler for modal
   const handleModalNavigate = (index: number) => {
     if (chartData && chartData[index]) {
@@ -637,9 +581,8 @@ export function AllNodesStackedBarChart() {
               className="max-h-[400px] min-h-[200px]"
             />
           ) : (
-            <div className="mx-auto w-full max-w-[70rem]">
+            <div className="mx-auto w-full">
               <ChartContainer
-                key={chartKey}
                 dir={'ltr'}
                 config={chartConfig}
                 className="max-h-[400px] min-h-[200px] w-full"
@@ -695,6 +638,7 @@ export function AllNodesStackedBarChart() {
                         fill={chartConfig[node.name]?.color || `hsl(var(--chart-${(idx % 5) + 1}))`}
                         radius={nodeList.length === 1 ? [4, 4, 4, 4] : idx === 0 ? [0, 0, 4, 4] : idx === nodeList.length - 1 ? [4, 4, 0, 0] : [0, 0, 0, 0]}
                         cursor="pointer"
+                        className='rounded-t-xl overflow-hidden'
                       />
                     ))}
                   </BarChart>

dashboard/src/components/charts/AreaCostumeChart.tsx

@@ -12,7 +12,6 @@ import { Button } from '@/components/ui/button'
 import { Clock, History, Cpu, MemoryStick } from 'lucide-react'
 import { dateUtils } from '@/utils/dateFormatter'
 import { useTheme } from 'next-themes'
-import { useSidebar } from '@/components/ui/sidebar'
 
 type DataPoint = {
   time: string
@@ -156,13 +155,11 @@ const isNodeRealtimeStats = (stats: SystemStats | NodeRealtimeStats): stats is N
 export function AreaCostumeChart({ nodeId, currentStats, realtimeStats }: AreaCostumeChartProps) {
   const { t } = useTranslation()
   const { resolvedTheme } = useTheme()
-  const { state: sidebarState } = useSidebar()
   const [statsHistory, setStatsHistory] = useState<DataPoint[]>([])
   const [isLoading, setIsLoading] = useState(true)
   const [error, setError] = useState<Error | null>(null)
   const [dateRange, setDateRange] = useState<DateRange | undefined>(undefined)
   const [viewMode, setViewMode] = useState<'realtime' | 'historical'>('realtime')
-  const [chartKey, setChartKey] = useState(0) // Force chart refresh
 
   // Add refs for chart container
   const chartContainerRef = useRef<HTMLDivElement>(null)
@@ -207,27 +204,6 @@ export function AreaCostumeChart({ nodeId, currentStats, realtimeStats }: AreaCo
     setViewMode('realtime')
   }, [nodeId])
 
-  // INSTANT sidebar state change detection - ZERO delay
-  useEffect(() => {
-    if (statsHistory.length > 0) {
-      setChartKey(k => k + 1)
-    }
-  }, [sidebarState, statsHistory.length])
-
-  // INSTANT resize handling - ZERO delay
-  useEffect(() => {
-    const handleResize = () => {
-      if (statsHistory.length > 0) {
-        setChartKey(k => k + 1)
-      }
-    }
-
-    window.addEventListener('resize', handleResize)
-    return () => {
-      window.removeEventListener('resize', handleResize)
-    }
-  }, [statsHistory.length])
-
   // Toggle between real-time and historical view
   const toggleViewMode = () => {
     if (viewMode === 'realtime') {
@@ -468,7 +444,6 @@ export function AreaCostumeChart({ nodeId, currentStats, realtimeStats }: AreaCo
         ) : (
           <div 
             ref={chartContainerRef}
-            key={`chart-container-${chartKey}`} // Force container refresh
             className="h-[280px] w-full sm:h-[320px] lg:h-[360px] transition-all duration-300 ease-in-out"
           >
             <ChartContainer dir="ltr" config={chartConfig} className="h-full w-full">

dashboard/src/components/dialogs/UserModal.tsx

@@ -3,7 +3,7 @@ import GroupsSelector from '@/components/common/GroupsSelector'
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
 import { Button } from '@/components/ui/button'
 import { Calendar } from '@/components/ui/calendar'
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
 import { LoaderButton } from '@/components/ui/loader-button'
@@ -1308,6 +1308,9 @@ export default function UserModal({ isDialogOpen, onOpenChange, form, editingUse
           <DialogTitle className={`${dir === 'rtl' ? 'text-right' : 'text-left'}`}>
             {editingUser ? t('userDialog.editUser', { defaultValue: 'Edit User' }) : t('createUser', { defaultValue: 'Create User' })}
           </DialogTitle>
+          <DialogDescription className="sr-only">
+            {editingUser ? t('userDialog.editUser', { defaultValue: 'Edit User' }) : t('createUser', { defaultValue: 'Create User' })}
+          </DialogDescription>
         </DialogHeader>
         <Form {...form}>
           <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">

dashboard/src/components/ui/sidebar.tsx

@@ -295,7 +295,11 @@ const SidebarRail = React.forwardRef<HTMLButtonElement, React.ComponentProps<'bu
             'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar',
             '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
             '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+            'group-data-[collapsible=icon]:translate-x-0 group-data-[collapsible=icon]:after:left-full group-data-[collapsible=icon]:after:w-[1px]',
+            '[[data-side=left][data-collapsible=icon]_&]:right-0 [[data-side=left][data-collapsible=icon]_&]:translate-x-0',
+            '[[data-side=right][data-collapsible=icon]_&]:left-0 [[data-side=right][data-collapsible=icon]_&]:translate-x-0',
             'hover:after:w-[4px] hover:after:bg-sidebar-accent',
+            'group-data-[collapsible=icon]:hover:after:w-[2px]',
             'after:transition-all after:duration-200',
             'hover:bg-sidebar/5',
             'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring',
@@ -318,7 +322,7 @@ const SidebarInset = React.forwardRef<HTMLDivElement, React.ComponentProps<'main
     <main
       ref={ref}
       className={cn(
-        'relative flex min-h-svh flex-1 flex-col bg-background',
+        'relative flex min-h-svh min-w-0 flex-1 flex-col bg-background overflow-x-hidden',
         'peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow',
         className,
       )}

dashboard/src/pages/_dashboard.tsx

@@ -3,7 +3,7 @@ import { AppSidebar } from '@/components/layout/sidebar'
 import PageTransition from '@/components/PageTransition'
 import RouteGuard from '@/components/RouteGuard'
 import { TopLoadingBar } from '@/components/TopLoadingBar'
-import { SidebarProvider } from '@/components/ui/sidebar'
+import { SidebarInset, SidebarProvider } from '@/components/ui/sidebar'
 import { getCurrentAdmin } from '@/service/api'
 import { Outlet } from 'react-router'
 
@@ -18,17 +18,19 @@ export const clientLoader = async (): Promise<any> => {
 
 export default function DashboardLayout() {
   return (
-    <SidebarProvider>
+    <SidebarProvider className=''>
       <RouteGuard>
         <TopLoadingBar />
-        <div className="flex w-full flex-col lg:flex-row">
+        <div className='flex w-full flex-col lg:flex-row'>
           <AppSidebar />
-          <div className="flex min-h-screen w-full flex-col justify-between gap-y-4">
-            <PageTransition duration={250}>
-              <Outlet />
-            </PageTransition>
-            <Footer />
-          </div>
+          <SidebarInset>
+            <div className="flex min-h-screen w-full flex-col justify-between gap-y-4">
+              <PageTransition duration={250}>
+                <Outlet />
+              </PageTransition>
+              <Footer />
+            </div>
+          </SidebarInset>
         </div>
       </RouteGuard>
     </SidebarProvider>