Fix layout. Fix reset of modal on close - #57
Conversation
Greptile SummaryThe PR revises the Toronto and Brampton shared-pledge pages to use vertically separated content bands on mobile and overlay them at larger breakpoints. It also makes the pledge dialog controlled so closing it clears stale loading and error state.
Confidence Score: 5/5The PR appears safe to merge because no blocking failure remains established. No blocking failure remains.
|
| Filename | Overview |
|---|---|
| src/app/toronto/vote/2026/pledge/[slug]/SharedPledgeClient.tsx | Reworks the shared-pledge page into responsive mobile bands while retaining the desktop overlay layout. |
| src/app/brampton/vote/2026/pledge/[slug]/SharedPledgeClient.tsx | Applies the same responsive shared-pledge layout changes using Brampton election configuration. |
| src/components/elections/PledgeButton.tsx | Controls dialog visibility and clears stale loading and error state when it closes. |
Reviews (2): Last reviewed commit: "Merge remote-tracking branch 'origin/mai..." | Re-trigger Greptile
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
| @@ -40,31 +40,33 @@ export default function SharedPledgeClient({ name }: { name: string }) { | |||
|
|
|||
| return ( | |||
| <div className="theme-election bg-bg text-dark"> | |||
| <div className="relative h-[calc(100dvh-20px)] min-h-[480px] border-2 border-dark bg-bg overflow-clip"> | |||
| {/* On small screens the copy would sit on top of the stamp, so the three | |||
There was a problem hiding this comment.
When a long pledge name and the footer controls wrap on a narrow mobile viewport, the non-shrinking header and footer plus the stamp's 220px minimum height exceed this fixed-height container; overflow-clip then hides the bottom content without an internal scrolling path, making navigation or explanatory text inaccessible. The same layout is used by the Brampton shared pledge page.
Prompt To Fix With AI
This is a comment left during a code review.
Path: src/app/toronto/elections/2026/pledge/[slug]/SharedPledgeClient.tsx
Line: 43
Comment:
**Clipped stacked mobile layout**
When a long pledge name and the footer controls wrap on a narrow mobile viewport, the non-shrinking header and footer plus the stamp's 220px minimum height exceed this fixed-height container; `overflow-clip` then hides the bottom content without an internal scrolling path, making navigation or explanatory text inaccessible. The same layout is used by the Brampton shared pledge page.
---
For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.
…-modal-reset-mobile-pledge-page # Conflicts: # src/app/toronto/vote/2026/pledge/[slug]/SharedPledgeClient.tsx
1 participant
No description provided.