fix permission sync banner

Author: brendan-kellam

packages/web/src/app/(app)/layout.tsx

@@ -168,21 +168,22 @@ export default async function Layout(props: LayoutProps) {
 
     return (
         <SyntaxGuideProvider>
-            {
-                isPermissionSyncBannerVisible ? (
-                    <PermissionSyncBanner
-                        initialHasPendingFirstSync={(isServiceError(hasPendingFirstSync) || hasPendingFirstSync === null) ?
-                            false :
-                            hasPendingFirstSync.hasPendingFirstSync
-                        }
-                    />
-                ) : null
-            }
+
             <div className="fixed inset-0 flex bg-shell">
                 <SidebarProvider defaultOpen={cookieStore.get("sidebar_state")?.value !== "false"}>
                     {sidebar}
                     <div className="flex-1 min-h-0 flex flex-col pt-2 pb-2 pr-2">
-                        <div className="flex-1 min-h-0 bg-background flex flex-col border border-[#e6e6e6] dark:border-[#1d1d1f] rounded-xl">
+                        <div className="flex-1 min-h-0 bg-background flex flex-col border border-[#e6e6e6] dark:border-[#1d1d1f] rounded-xl overflow-hidden">
+                            {
+                                isPermissionSyncBannerVisible ? (
+                                    <PermissionSyncBanner
+                                        initialHasPendingFirstSync={(isServiceError(hasPendingFirstSync) || hasPendingFirstSync === null) ?
+                                            false :
+                                            hasPendingFirstSync.hasPendingFirstSync
+                                        }
+                                    />
+                                ) : null
+                            }
                             <div className="flex-1 min-h-0 overflow-y-auto">
                                 {children}
                             </div>