refactor: layout components

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

src/renderer/components/layout/AppLayout.tsx

@@ -13,7 +13,7 @@ interface IAppLayout {
  */
 export const AppLayout: FC<IAppLayout> = ({ children }) => {
   return (
-    <Box className="flex flex-col max-h-screen bg-gitify-background">
+    <Box className="flex flex-col min-h-screen bg-gitify-background">
       <Sidebar />
       {/* Content area with left padding to make space for the sidebar */}
       <Box className="flex-1 pl-sidebar">{children}</Box>

src/renderer/components/layout/Contents.tsx

@@ -4,16 +4,27 @@ import { cn } from '../../utils/cn';
 
 interface IContents {
   children: ReactNode;
-  padding?: boolean;
+  paddingHorizontal?: boolean;
+  paddingBottom?: boolean;
 }
 
 /**
  * Contents component holds the main content of a page.
  * It provides proper padding and handles scrolling.
  */
-export const Contents: FC<IContents> = ({ children, padding = true }) => {
+export const Contents: FC<IContents> = ({
+  children,
+  paddingHorizontal = true,
+  paddingBottom = false,
+}) => {
   return (
-    <Box className={cn('grow overflow-y-auto mb-4', padding && 'px-8')}>
+    <Box
+      className={cn(
+        'grow overflow-x-hidden overflow-y-auto',
+        paddingHorizontal && 'px-8',
+        paddingBottom && 'pb-4',
+      )}
+    >
       {children}
     </Box>
   );

src/renderer/components/layout/__snapshots__/AppLayout.test.tsx.snap

@@ -23,7 +23,7 @@ export const FiltersRoute: FC = () => {
         Filters
       </Header>
 
-      <Contents>
+      <Contents paddingBottom>
         <Stack direction="vertical" gap="spacious">
           <UserTypeFilter />
           <UserHandleFilter />

src/renderer/components/layout/__snapshots__/Contents.test.tsx.snap

@@ -38,7 +38,7 @@ export const NotificationsRoute: FC = () => {
 
   return (
     <Page id="notifications">
-      <Contents padding={false}>
+      <Contents paddingHorizontal={false}>
         {notifications.map((accountNotifications) => (
           <AccountNotifications
             key={getAccountUUID(accountNotifications.account)}

src/renderer/routes/Filters.tsx

@@ -19,7 +19,7 @@ export const SettingsRoute: FC = () => {
         Settings
       </Header>
 
-      <Contents>
+      <Contents paddingBottom>
         <Stack direction="vertical" gap="spacious">
           <AppearanceSettings />
           <NotificationSettings />