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 billTitle = p.bill_title as string | undefined;
const briefSummary = p.brief_summary as string | undefined; const briefSummary = p.brief_summary as string | undefined;
return ( 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}`} /> <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"> <div className="flex items-center gap-2 flex-wrap">
<span className="text-xs font-medium">{meta.label}</span> <span className="text-xs font-medium">{meta.label}</span>
{billLabel && ( {billLabel && (
@@ -1085,7 +1085,7 @@ export default function NotificationsPage() {
) : null; ) : null;
})()} })()}
{briefSummary && ( {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> </div>
{showDispatch && ( {showDispatch && (