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

This commit is contained in:
rustmailer
2026-01-06 14:36:01 +08:00
parent 147f5b4f55
commit 1768c1a590
12 changed files with 12 additions and 13 deletions
@@ -358,7 +358,7 @@ export function AccountActionDialog({ currentRow, open, onOpenChange }: Props) {
onOpenChange(state); 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"> <div className="p-6 pb-2 flex-shrink-0">
<DialogHeader className="text-left"> <DialogHeader className="text-left">
<DialogTitle>{isEdit ? t('accounts.updateAccount') : t('accounts.addAccount')}</DialogTitle> <DialogTitle>{isEdit ? t('accounts.updateAccount') : t('accounts.addAccount')}</DialogTitle>
@@ -85,7 +85,7 @@ export function RunningStateDialog({ currentRow, open, onOpenChange }: Props) {
<span className="text-blue-500 font-medium truncate">{currentRow.email}</span> <span className="text-blue-500 font-medium truncate">{currentRow.email}</span>
</DialogTitle> </DialogTitle>
</DialogHeader> </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 && ( {isLoading && (
<div className="space-y-4 py-6"> <div className="space-y-4 py-6">
<Skeleton className="h-6 w-1/2" /> <Skeleton className="h-6 w-1/2" />
@@ -111,7 +111,7 @@ export function MailList({
/> />
<span className="text-xs text-muted-foreground"> <span className="text-xs text-muted-foreground">
{selected.size > 0 {selected.size > 0
? `${selected.size} ${t('common.selected')}` ? `${t('search.bulkActions.selected', { count: selected.size })}`
: t('common.selectAll')} : t('common.selectAll')}
</span> </span>
</div> </div>
+2 -2
View File
@@ -340,7 +340,7 @@ export function Mail({
)} )}
> >
<Separator className="mb-2" /> <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> <div>
<AccountSwitcher onAccountSelect={(accountId) => { <AccountSwitcher onAccountSelect={(accountId) => {
localStorage.setItem('mailbox:selectedAccountId', `${accountId}`); localStorage.setItem('mailbox:selectedAccountId', `${accountId}`);
@@ -389,7 +389,7 @@ export function Mail({
</div> </div>
<Separator /> <Separator />
<div className="mt-2"> <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 <MailList
isLoading={isMessagesLoading} isLoading={isMessagesLoading}
items={(envelopes?.items ?? []).sort((a, b) => { items={(envelopes?.items ?? []).sort((a, b) => {
-1
View File
@@ -32,7 +32,6 @@ export default function Mailboxes() {
return ( return (
<> <>
{/* ===== Top Heading ===== */}
<FixedHeader /> <FixedHeader />
<Main> <Main>
<Mail <Mail
+1 -1
View File
@@ -151,7 +151,7 @@ export default function Search() {
</p> </p>
</div> </div>
</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 <MailList
isLoading={isLoading} isLoading={isLoading}
items={emails} items={emails}
+1 -1
View File
@@ -147,7 +147,7 @@ export function MailList({
/> />
<span className="text-xs text-muted-foreground"> <span className="text-xs text-muted-foreground">
{totalSelected > 0 {totalSelected > 0
? `${totalSelected} ${t('common.selected')}` ? `${t('search.bulkActions.selected', { count: totalSelected })}`
: t('common.selectAll')} : t('common.selectAll')}
</span> </span>
</div> </div>
+1 -1
View File
@@ -83,7 +83,7 @@ export function EnvelopeTags({ selectedTags, onTagToggle }: EnvelopeTagsProps) {
{sortedTags.length === 0 ? ( {sortedTags.length === 0 ? (
<p className="py-2 pl-2 text-sm text-muted-foreground">{t('mail.noTagsYet')}</p> <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 }) => { {sortedTags.map(({ tag: facet, count }) => {
const checked = selectedTags.includes(facet); const checked = selectedTags.includes(facet);
const id = `tag-${facet}`; const id = `tag-${facet}`;
@@ -91,7 +91,7 @@ export function APITokens() {
</Button> </Button>
</div> </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} /> <TokenCardList tokens={tokens} userId={user.id} />
</ScrollArea> </ScrollArea>
</> </>
+1 -1
View File
@@ -44,7 +44,7 @@ export function Profile() {
} }
return ( 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!} /> <UserProfileForm user={user!} />
</div> </div>
) )
@@ -132,7 +132,7 @@ export function PermissionsDialog({
return ( return (
<Dialog open={open} onOpenChange={onOpenChange}> <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"> <DialogHeader className="pb-4 border-b">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<DialogTitle>{title}</DialogTitle> <DialogTitle>{title}</DialogTitle>
@@ -273,7 +273,7 @@ export function UserProfileForm({ user }: UserProfileFormProps) {
})} })}
</h2> </h2>
<ScrollArea className="h-[32rem] pr-4"> <ScrollArea className="h-[calc(100vh-16rem)] pr-4">
<div className="grid grid-cols-1 gap-3"> <div className="grid grid-cols-1 gap-3">
{accessibleAccountIds.map((accountId) => { {accessibleAccountIds.map((accountId) => {
const email = getEmailById(accountId) const email = getEmailById(accountId)