style: make the sidebar layout float and update spacing

src/components/layout/app-sidebar.tsx

@@ -12,7 +12,7 @@ import { sidebarData } from './data/sidebar-data'
 
 export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
   return (
-    <Sidebar collapsible='icon' {...props}>
+    <Sidebar collapsible='icon' variant='floating' {...props}>
       <SidebarHeader>
         <TeamSwitcher teams={sidebarData.teams} />
       </SidebarHeader>

src/components/layout/header.tsx

@@ -27,7 +27,7 @@ export const Header = React.forwardRef<React.ElementRef<'header'>, HeaderProps>(
       <header
         ref={ref}
         className={cn(
-          'flex items-center gap-3 sm:gap-4 bg-background p-4 md:px-8 h-16',
+          'flex items-center gap-3 sm:gap-4 bg-background p-4 h-16',
           sticky && 'sticky top-0 z-20',
           offset > 10 && sticky ? 'shadow' : 'shadow-none',
           className

src/components/layout/main.tsx

@@ -11,7 +11,7 @@ export const Main = React.forwardRef<React.ElementRef<'main'>, MainProps>(
       <main
         ref={ref}
         className={cn(
-          'px-4 py-6 md:px-8',
+          'px-4 py-6',
           fixed && 'flex flex-col flex-grow overflow-hidden'
         )}
         {...props}