Global container

apps/console/src/components/AppSidebarShell.tsx

@@ -20,7 +20,7 @@ export function AppSidebarShell({
   ...props
 }: AppSidebarShellProps) {
   return (
-    <Sidebar variant="inset" {...props}>
+    <Sidebar variant="sidebar" {...props}>
       <SidebarHeader>{organizationSwitcher}</SidebarHeader>
       <SidebarContent>
         {navMain}

apps/console/src/layouts/ConsoleLayout.tsx

@@ -9,12 +9,7 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
-import { Separator } from "@/components/ui/separator";
-import {
-  SidebarInset,
-  SidebarProvider,
-  SidebarTrigger,
-} from "@/components/ui/sidebar";
+import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
 import { Toaster } from "@/components/ui/toaster";
 import { graphql, useLazyLoadQuery } from "react-relay";
 import { ConsoleLayoutBreadcrumbFrameworkOverviewQuery } from "./__generated__/ConsoleLayoutBreadcrumbFrameworkOverviewQuery.graphql";
@@ -384,13 +379,11 @@ export default function ConsoleLayout() {
   return (
     <SidebarProvider>
       <Suspense>
-        <AppSidebar />
+        <AppSidebar className="p-4" />
       </Suspense>
-      <SidebarInset>
-        <header className="flex h-16 shrink-0 items-center gap-2">
-          <div className="flex items-center gap-2 px-4">
-            <SidebarTrigger className="-ml-1" />
-            <Separator orientation="vertical" className="mr-2 h-4" />
+      <SidebarInset className="flex items-center">
+        <div className="w-lg md:w-xl lg:w-3xl xl:w-4xl 2xl:w-5xl p-8">
+          <header className="flex shrink-0 items-center gap-2">
             <Routes>
               <Route
                 path=":organizationsId"
@@ -492,14 +485,12 @@ export default function ConsoleLayout() {
                 />
               </Route>
             </Routes>
-          </div>
-        </header>
-        <div className="flex flex-1 flex-col gap-4 px-8 pt-0">
-          <div className="w-full max-w-[1000px]">
+          </header>
+          <div className="mt-7 w-full">
             <Outlet />
           </div>
-          <Toaster />
         </div>
+        <Toaster />
       </SidebarInset>
     </SidebarProvider>
   );