Merge pull request #42 from oasisprotocol/mz/mobile

Tweak layout component

Author: buberdds

src/components/ui/layout.tsx

@@ -2,9 +2,10 @@ import { FC, PropsWithChildren, ReactNode } from 'react'
 import { SidebarProvider, SidebarTrigger } from './sidebar'
 import { useIsMobile } from '../../hooks'
 import { Separator } from './separator'
+import { cn } from '../../lib/utils'
 
 const Header: FC<PropsWithChildren> = ({ children }) => (
-  <header className="mt-12 md:mt-0 sticky md:static z-50 top-0">
+  <header className="mt-0 sticky md:static z-50 top-0">
     <nav className="md:h-16 px-3 md:px-6 py-2.5 bg-background border-b border-border shadow-sm flex items-center">
       <div className="w-full max-w-[96rem] mx-auto flex">{children}</div>
     </nav>
@@ -44,6 +45,7 @@ interface LayoutProps {
   headerBreadcrumbsContent?: ReactNode
   footerContent?: ReactNode
   sidebar?: ReactNode
+  className?: string
 }
 
 export const Layout: FC<PropsWithChildren<LayoutProps>> = ({
@@ -52,11 +54,12 @@ export const Layout: FC<PropsWithChildren<LayoutProps>> = ({
   headerBreadcrumbsContent,
   footerContent,
   sidebar,
+  className,
 }) => {
   const isMobile = useIsMobile()
 
   const layoutContent = (
-    <div className="w-full max-w-[96rem] mx-auto flex flex-col min-h-[800px] md:max-h-dvh">
+    <div className={cn('w-full max-w-[96rem] mx-auto flex flex-col min-h-[800px] md:max-h-dvh', className)}>
       {headerContent && <Header>{headerContent}</Header>}
 
       {isMobile && (