fix: add max-width for large screens to improve responsiveness (#194)

Author: satnaing

src/components/layout/authenticated-layout.tsx

@@ -52,7 +52,10 @@ export function AuthenticatedLayout({ children }: Props) {
               // If layout is fixed and sidebar is inset,
               // set the height to 100svh - 1rem (total margins) to prevent overflow
               // 'peer-data-[variant=inset]:has-[[data-layout=fixed]]:h-[calc(100svh-1rem)]',
-              'peer-data-[variant=inset]:has-[[data-layout=fixed]]:h-[calc(100svh-(var(--spacing)*4))]'
+              'peer-data-[variant=inset]:has-[[data-layout=fixed]]:h-[calc(100svh-(var(--spacing)*4))]',
+
+              // Set content container, so we can use container queries
+              '@container/content'
             )}
           >
             {children ?? <Outlet />}

src/components/layout/main.tsx

@@ -3,16 +3,23 @@ import { cn } from '@/lib/utils'
 
 interface MainProps extends React.HTMLAttributes<HTMLElement> {
   fixed?: boolean
+  fluid?: boolean
   ref?: React.Ref<HTMLElement>
 }
 
-export const Main = ({ fixed, className, ...props }: MainProps) => {
+export const Main = ({ fixed, className, fluid, ...props }: MainProps) => {
   return (
     <main
       data-layout={fixed ? 'fixed' : 'auto'}
       className={cn(
         'px-4 py-6',
+
+        // If layout is fixed, make the main container flex and grow
         fixed && 'flex grow flex-col overflow-hidden',
+
+        // If layout is not fluid, set the max-width
+        !fluid &&
+          '@7xl/content:mx-auto @7xl/content:w-full @7xl/content:max-w-7xl',
         className
       )}
       {...props}