fix: Large empty space at the bottom of the screen #98

web/src/features/accounts/components/action-dialog.tsx

@@ -358,7 +358,7 @@ export function AccountActionDialog({ currentRow, open, onOpenChange }: Props) {
         onOpenChange(state);
       }}
     >
-      <DialogContent className="max-w-[95vw] md:max-w-5xl w-full p-0 overflow-hidden flex flex-col h-[90vh]">
+      <DialogContent className="max-w-[95vw] md:max-w-5xl w-full p-0 overflow-hidden flex flex-col h-[50rem]">
         <div className="p-6 pb-2 flex-shrink-0">
           <DialogHeader className="text-left">
             <DialogTitle>{isEdit ? t('accounts.updateAccount') : t('accounts.addAccount')}</DialogTitle>

web/src/features/accounts/components/running-state-dialog.tsx

@@ -85,7 +85,7 @@ export function RunningStateDialog({ currentRow, open, onOpenChange }: Props) {
             <span className="text-blue-500 font-medium truncate">{currentRow.email}</span>
           </DialogTitle>
         </DialogHeader>
-        <ScrollArea className="max-h-[85vh] px-4 sm:px-6 pb-6">
+        <ScrollArea className="max-h-[55rem] px-4 sm:px-6 pb-6">
           {isLoading && (
             <div className="space-y-4 py-6">
               <Skeleton className="h-6 w-1/2" />

web/src/features/mailbox/components/mail-list.tsx

@@ -111,7 +111,7 @@ export function MailList({
                     />
                     <span className="text-xs text-muted-foreground">
                         {selected.size > 0
-                            ? `${selected.size} ${t('common.selected')}`
+                            ? `${t('search.bulkActions.selected', { count: selected.size })}`
                             : t('common.selectAll')}
                     </span>
                 </div>

web/src/features/mailbox/components/mail.tsx

@@ -340,7 +340,7 @@ export function Mail({
                         )}
                     >
                         <Separator className="mb-2" />
-                        <ScrollArea className='h-[50rem] w-full pr-4 -mr-4 py-1'>
+                        <ScrollArea className='h-[calc(100vh-8rem)] w-full pr-4 -mr-4 py-1'>
                             <div>
                                 <AccountSwitcher onAccountSelect={(accountId) => {
                                     localStorage.setItem('mailbox:selectedAccountId', `${accountId}`);
@@ -389,7 +389,7 @@ export function Mail({
                             </div>
                             <Separator />
                             <div className="mt-2">
-                                <ScrollArea className='h-[40rem] w-full pr-4 -mr-4 py-1'>
+                                <ScrollArea className='h-[calc(100vh-14rem)] w-full pr-4 -mr-4 py-1'>
                                     <MailList
                                         isLoading={isMessagesLoading}
                                         items={(envelopes?.items ?? []).sort((a, b) => {

web/src/features/mailbox/index.tsx

@@ -32,7 +32,6 @@ export default function Mailboxes() {
 
     return (
         <>
-            {/* ===== Top Heading ===== */}
             <FixedHeader />
             <Main>
                 <Mail

web/src/features/search/index.tsx

@@ -151,7 +151,7 @@ export default function Search() {
                     </p>
                   </div>
                 </div>}
-                {total > 0 && <ScrollArea className='h-[40rem] w-full pr-4 -mr-4 py-1'>
+                {total > 0 && <ScrollArea className='h-[calc(100vh-14rem)] w-full pr-4 -mr-4 py-1'>
                   <MailList
                     isLoading={isLoading}
                     items={emails}

web/src/features/search/mail-list.tsx

@@ -147,7 +147,7 @@ export function MailList({
                     />
                     <span className="text-xs text-muted-foreground">
                         {totalSelected > 0
-                            ? `${totalSelected} ${t('common.selected')}`
+                            ? `${t('search.bulkActions.selected', { count: totalSelected })}`
                             : t('common.selectAll')}
                     </span>
                 </div>

web/src/features/search/tag-facet.tsx

@@ -83,7 +83,7 @@ export function EnvelopeTags({ selectedTags, onTagToggle }: EnvelopeTagsProps) {
         {sortedTags.length === 0 ? (
           <p className="py-2 pl-2 text-sm text-muted-foreground">{t('mail.noTagsYet')}</p>
         ) : (
-          <ScrollArea className="h-[45rem] w-full pr-4 -mr-4">
+          <ScrollArea className="h-[calc(100vh-12rem)] w-full pr-4 -mr-4">
             {sortedTags.map(({ tag: facet, count }) => {
               const checked = selectedTags.includes(facet);
               const id = `tag-${facet}`;

web/src/features/settings/api-tokens/index.tsx

@@ -91,7 +91,7 @@ export function APITokens() {
             </Button>
           </div>
 
-          <ScrollArea className="h-[40rem] w-full pr-4 -mr-4 py-1">
+          <ScrollArea className="h-[calc(100vh-16rem)] w-full pr-4 -mr-4 py-1">
             <TokenCardList tokens={tokens} userId={user.id} />
           </ScrollArea>
         </>

web/src/features/settings/profile/index.tsx

@@ -44,7 +44,7 @@ export function Profile() {
   }
 
   return (
-    <div className="w-full max-w-6xl ml-0 px-4">
+    <div className="w-full max-w-7xl ml-0 px-4">
       <UserProfileForm user={user!} />
     </div>
   )

web/src/features/settings/profile/permissions-dialog.tsx

@@ -132,7 +132,7 @@ export function PermissionsDialog({
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-3xl w-[90vw] overflow-hidden flex flex-col max-h-[90vh]">
+      <DialogContent className="max-w-4xl w-[90vw] overflow-hidden flex flex-col max-h-[90vh]">
         <DialogHeader className="pb-4 border-b">
           <div className="flex items-center gap-3">
             <DialogTitle>{title}</DialogTitle>

web/src/features/settings/profile/profile-form.tsx

@@ -273,7 +273,7 @@ export function UserProfileForm({ user }: UserProfileFormProps) {
                   })}
                 </h2>
 
-                <ScrollArea className="h-[32rem] pr-4">
+                <ScrollArea className="h-[calc(100vh-16rem)] pr-4">
                   <div className="grid grid-cols-1 gap-3">
                     {accessibleAccountIds.map((accountId) => {
                       const email = getEmailById(accountId)