jack/PocketVeto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: prevent horizontal overflow in notification history rows on mobile

Browse Source 
Add overflow-hidden to EventRow containers and break-words to brief summary
to prevent long unbreakable text from widening the viewport and causing zoom.
Also switch h-screen to h-dvh for correct mobile viewport height.

Authored by: Jack Levy
This commit is contained in:
Jack Levy
2026-03-15 19:58:34 -04:00
parent 21dd784fbb
commit 761ffa85d9
1 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/app/notifications/page.tsx
View File

@@ -1048,9 +1048,9 @@ export default function NotificationsPage() {
const billTitle = p.bill_title as string | undefined;
const briefSummary = p.brief_summary as string | undefined;
return (
<div className="flex items-start gap-3 py-3">
<div className="flex items-start gap-3 py-3 overflow-hidden">
<Icon className={`w-4 h-4 mt-0.5 shrink-0 ${meta.color}`} />
<div className="flex-1 min-w-0">
<div className="flex-1 min-w-0 overflow-hidden">
<div className="flex items-center gap-2 flex-wrap">
<span className="text-xs font-medium">{meta.label}</span>
{billLabel && (
@@ -1085,7 +1085,7 @@ export default function NotificationsPage() {
) : null;
})()}
{briefSummary && (
<p className="text-xs text-muted-foreground mt-0.5 line-clamp-2">{briefSummary}</p>
<p className="text-xs text-muted-foreground mt-0.5 line-clamp-2 break-words">{briefSummary}</p>
)}
</div>
{showDispatch && (