fix: fix table horizontal scroll and collapsed sidebar

apps/webui/src/components/ui/detail-empty-view.tsx

@@ -0,0 +1,18 @@
+import { memo } from "react";
+import { Card, CardContent } from "./card";
+
+export interface DetailEmptyViewProps {
+  message: string;
+}
+
+export const DetailEmptyView = memo(({ message }: DetailEmptyViewProps) => {
+  return (
+    <div className="container mx-auto py-6 max-w-4xl">
+      <Card>
+        <CardContent className="flex items-center justify-center h-32">
+          <p className="text-muted-foreground">{message ?? "No data"}</p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+});

apps/webui/src/components/ui/sidebar.tsx

@@ -25,8 +25,6 @@ import {
 import { useIsMobile } from "@/presentation/hooks/use-mobile";
 import { cn } from "@/presentation/utils";
 
-const SIDEBAR_COOKIE_NAME = "sidebar_state";
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const SIDEBAR_WIDTH = "16rem";
 const SIDEBAR_WIDTH_MOBILE = "18rem";
 const SIDEBAR_WIDTH_ICON = "3rem";
@@ -81,10 +79,6 @@ function SidebarProvider({
       } else {
         _setOpen(openState);
       }
-
-      // This sets the cookie to keep the sidebar state.
-      // TODO: FIX THIS
-      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
     },
     [setOpenProp, open]
   );
@@ -310,7 +304,7 @@ function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
     <main
       data-slot="sidebar-inset"
       className={cn(
-        "bg-background relative flex w-full flex-1 flex-col",
+        "bg-background relative flex w-full flex-1 min-w-0 flex-col",
         "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
         className
       )}