External/bichon
1
0
Fork 0
mirror of https://github.com/rustmailer/bichon.git synced 2026-08-03 07:48:34 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: Overviews are breaking out of their boxes on the dashboard (v1.0.0) #218

Browse Source
This commit is contained in:
rustmailer
2026-05-17 10:35:25 +08:00
parent f440069912
commit d543508a23
1 changed files with 62 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/features/dashboard/index.tsx
+62 -53
View File
@@ -20,6 +20,7 @@ import { get_dashboard_stats, INITIAL_DASHBOARD_STATS, TimeBucket } from '@/api/
import { Main } from '@/components/layout/main';
import { FixedHeader } from '@/components/layout/fixed-header';
import { useTranslation } from 'react-i18next';
import LongText from '@/components/long-text';
import { getToken } from '@/stores/authStore';
import { useNavigate } from '@tanstack/react-router';
import useMinimalAccountList from '@/hooks/use-minimal-account-list';
@@ -346,18 +347,18 @@ export default function MailArchiveDashboard() {
</CardContent>
</Card>
</div>
<div className="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
<Card>
<div className="grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
<Card className="overflow-hidden">
<CardHeader className="!px-4 !pt-4 !pb-1">
<CardTitle className="text-xs font-bold uppercase tracking-wider">{t('dashboard.top10Senders')}</CardTitle>
</CardHeader>
<CardContent className="p-0">
{hasTopSenders ? (
<Table>
<Table className="table-fixed">
<TableHeader>
<TableRow>
<TableHead className="text-xs">{t('dashboard.sender')}</TableHead>
<TableHead className="text-right text-xs">{t('dashboard.count')}</TableHead>
<TableHead className="w-[96px] text-right text-xs">{t('dashboard.count')}</TableHead>
</TableRow>
</TableHeader>
<TableBody>
@@ -368,16 +369,18 @@ export default function MailArchiveDashboard() {
<div className="absolute left-0 top-0 bottom-0 w-[2px] bg-primary opacity-0 group-hover:opacity-100 transition-opacity" />
<div className="text-xs flex flex-wrap gap-x-1 min-w-0 flex-1">
<span className="flex items-center">
<button
type="button"
onClick={(e) => {
e.stopPropagation();
handleQuickSearch({ from: s.key })
}}
className="hover:text-primary hover:underline transition-colors truncate max-w-[258px]"
>
{s.key}
</button>
<LongText className="max-w-[180px] md:max-w-[160px] lg:max-w-[200px] xl:max-w-[220px]">
<button
type="button"
onClick={(e) => {
e.stopPropagation();
handleQuickSearch({ from: s.key })
}}
className="hover:text-primary hover:underline transition-colors"
>
{s.key}
</button>
</LongText>
</span>
</div>
</div>
@@ -392,17 +395,17 @@ export default function MailArchiveDashboard() {
)}
</CardContent>
</Card>
<Card>
<Card className="overflow-hidden">
<CardHeader className="!px-4 !pt-4 !pb-1">
<CardTitle className="text-xs font-bold uppercase tracking-wider">{t('dashboard.top10LargestEmails')}</CardTitle>
</CardHeader>
<CardContent className="p-0">
{hasTopEmails ? (
<Table>
<Table className="table-fixed">
<TableHeader>
<TableRow>
<TableHead className="text-xs">{t('dashboard.subject')}</TableHead>
<TableHead className="text-right text-xs">{t('dashboard.size')}</TableHead>
<TableHead className="w-[96px] text-right text-xs">{t('dashboard.size')}</TableHead>
</TableRow>
</TableHeader>
<TableBody>
@@ -413,16 +416,18 @@ export default function MailArchiveDashboard() {
<div className="absolute left-0 top-0 bottom-0 w-[2px] bg-primary opacity-0 group-hover:opacity-100 transition-opacity" />
<div className="text-xs flex flex-wrap gap-x-1 min-w-0 flex-1">
<span className="flex items-center">
<button
type="button"
onClick={(e) => {
e.stopPropagation();
handleQuickSearch({ id: m.id })
}}
className="hover:text-primary hover:underline transition-colors truncate max-w-[258px]"
>
{m.subject || t('dashboard.noSubject')}
</button>
<LongText className="max-w-[180px] md:max-w-[160px] lg:max-w-[200px] xl:max-w-[220px]">
<button
type="button"
onClick={(e) => {
e.stopPropagation();
handleQuickSearch({ id: m.id })
}}
className="hover:text-primary hover:underline transition-colors"
>
{m.subject || t('dashboard.noSubject')}
</button>
</LongText>
</span>
</div>
</div>
@@ -437,7 +442,7 @@ export default function MailArchiveDashboard() {
)}
</CardContent>
</Card>
<Card>
<Card className="overflow-hidden">
<CardHeader className="!px-4 !pt-4 !pb-1">
<CardTitle className="text-xs font-bold uppercase tracking-wider">
{t('dashboard.top10LargestAttachments')}
@@ -445,11 +450,11 @@ export default function MailArchiveDashboard() {
</CardHeader>
<CardContent className="p-0">
{stats?.top_largest_attachments?.length ? (
<Table>
<Table className="table-fixed">
<TableHeader>
<TableRow>
<TableHead className="text-xs">{t('attachment.name')}</TableHead>
<TableHead className="text-right text-xs">{t('dashboard.size')}</TableHead>
<TableHead className="w-[96px] text-right text-xs">{t('dashboard.size')}</TableHead>
</TableRow>
</TableHeader>
<TableBody>
@@ -463,16 +468,18 @@ export default function MailArchiveDashboard() {
<div className="absolute left-0 top-0 bottom-0 w-[2px] bg-primary opacity-0 group-hover:opacity-100 transition-opacity" />
<div className="text-xs flex flex-wrap gap-x-1 min-w-0 flex-1">
<span className="flex items-center">
<button
type="button"
onClick={(e) => {
e.stopPropagation();
handleQuickAttachmentSearch({ id: a.id })
}}
className="hover:text-primary hover:underline transition-colors truncate max-w-[238px]"
>
{a.name || 'Unnamed'}
</button>
<LongText className="max-w-[160px] md:max-w-[140px] lg:max-w-[180px] xl:max-w-[200px]">
<button
type="button"
onClick={(e) => {
e.stopPropagation();
handleQuickAttachmentSearch({ id: a.id })
}}
className="hover:text-primary hover:underline transition-colors"
>
{a.name || 'Unnamed'}
</button>
</LongText>
</span>
</div>
</div>
@@ -489,17 +496,17 @@ export default function MailArchiveDashboard() {
)}
</CardContent>
</Card>
<Card>
<Card className="overflow-hidden">
<CardHeader className="!px-4 !pt-4 !pb-1">
<CardTitle className="text-xs font-bold uppercase tracking-wider">{t('dashboard.top10Accounts')}</CardTitle>
</CardHeader>
<CardContent className="p-0">
{hasTopAccounts ? (
<Table>
<Table className="table-fixed">
<TableHeader>
<TableRow>
<TableHead className="text-xs">{t('dashboard.account')}</TableHead>
<TableHead className="text-right text-xs">{t('dashboard.emails')}</TableHead>
<TableHead className="w-[96px] text-right text-xs">{t('dashboard.emails')}</TableHead>
</TableRow>
</TableHeader>
<TableBody>
@@ -510,16 +517,18 @@ export default function MailArchiveDashboard() {
<div className="absolute left-0 top-0 bottom-0 w-[2px] bg-primary opacity-0 group-hover:opacity-100 transition-opacity" />
<div className="text-xs flex flex-wrap gap-x-1 min-w-0 flex-1">
<span className="flex items-center">
<button
type="button"
onClick={(e) => {
e.stopPropagation();
handleQuickSearch({ account_ids: [getAccountIdByEmail(acc.key) || 0] })
}}
className="hover:text-primary hover:underline transition-colors truncate max-w-[258px]"
>
{acc.key}
</button>
<LongText className="max-w-[180px] md:max-w-[160px] lg:max-w-[200px] xl:max-w-[220px]">
<button
type="button"
onClick={(e) => {
e.stopPropagation();
handleQuickSearch({ account_ids: [getAccountIdByEmail(acc.key) || 0] })
}}
className="hover:text-primary hover:underline transition-colors"
>
{acc.key}
</button>
</LongText>
</span>
</div>
</div>