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

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}`;