root/FootPrint
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 1 Activity

fix(grades): semester card header wraps on mobile - badges and buttons no longer overflow card width

Browse Source
This commit is contained in:
root
2026-10-17 11:58:37 +08:00
parent 0905cebb02
commit 7331111379
14 changed files with 36 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/pages/grades/GradesPage.tsx
+15 -17
View File
@@ -286,23 +286,21 @@ function SemesterCard({ sem }: { sem: SemesterGrades }) {
return (
<Card>
<CardHeader
title={sem.term}
extra={
<div className="flex items-center gap-2">
<Badge color="var(--brand-text)">绩点 {sem.gpa ?? '—'}</Badge>
{sem.rank != null && <Badge color="var(--success)">排名 {sem.rank}/{sem.total_students ?? '—'}</Badge>}
<Badge color="var(--text-3)">均分 {sem.stats.avg ?? '—'}</Badge>
<Badge color="var(--text-3)">{sem.stats.credits} 学分</Badge>
<Button size="sm" variant="ghost" onClick={() => autoGpaMut.mutate()} disabled={autoGpaMut.isPending}>
<Calculator size={13} /> 自动绩点
</Button>
<Button size="icon-sm" variant="ghost" aria-label="编辑学期" onClick={() => setSemDialog(true)}>
<Pencil size={13} />
</Button>
</div>
}
/>
<div className="flex min-h-11 flex-col items-start justify-center gap-1.5 border-b border-line px-4 py-2 sm:flex-row sm:items-center sm:justify-between sm:gap-2">
<h3 className="text-[13px] font-semibold text-ink-1">{sem.term}</h3>
<div className="flex flex-wrap items-center gap-1.5">
<Badge color="var(--brand-text)">绩点 {sem.gpa ?? '—'}</Badge>
{sem.rank != null && <Badge color="var(--success)">排名 {sem.rank}/{sem.total_students ?? '—'}</Badge>}
<Badge color="var(--text-3)">均分 {sem.stats.avg ?? '—'}</Badge>
<Badge color="var(--text-3)">{sem.stats.credits} 学分</Badge>
<Button size="sm" variant="ghost" onClick={() => autoGpaMut.mutate()} disabled={autoGpaMut.isPending}>
<Calculator size={13} /> 自动绩点
</Button>
<Button size="icon-sm" variant="ghost" aria-label="编辑学期" onClick={() => setSemDialog(true)}>
<Pencil size={13} />
</Button>
</div>
</div>
<CardBody className="p-0">
<div className="hidden overflow-x-auto md:block">
<div className="-mx-1 overflow-x-auto px-1"><table className="w-full border-collapse text-[13px]">