Fix add initiative form being cut off

[4tala]

Problem

The 'Add Initiative' form was being cut in half/not fully visible.

Solution

• Removed hardcoded iframe dimensions (width=300, height=520) that were overriding CSS
• Increased form container max-width from 400px to 640px
• Increased form container height from 600px/80vh to 85vh/800px max
• Added title attribute to iframe for accessibility

Testing

• ✅ Lint passes
• ✅ Build passes

[netlify]

✅ Deploy Preview for linksforisrael ready!

Name	Link
🔨 Latest commit	f1a0f40
🔍 Latest deploy log	https://app.netlify.com/projects/linksforisrael/deploys/6988af473b6c960008b0eb99
😎 Deploy Preview	https://deploy-preview-735--linksforisrael.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[qodo-code-review]

Review Summary by Qodo

Fix Add Initiative form visibility and responsive sizing

🐞 Bug fix ✨ Enhancement

Walkthroughs

Description

• Removed hardcoded iframe dimensions to allow CSS-based responsive sizing
• Increased form container max-width from 400px to 640px for better visibility
• Adjusted form container height from 600px/80vh to 85vh/800px for optimal display
• Added accessibility title attribute to iframe element

Diagram

flowchart LR
  A["Hardcoded iframe<br/>dimensions 300x520"] -->|Remove| B["CSS-controlled<br/>sizing"]
  C["Form container<br/>400px max-width"] -->|Increase to| D["640px max-width"]
  E["Form container<br/>600px/80vh height"] -->|Adjust to| F["85vh/800px height"]
  G["iframe element"] -->|Add title| H["Accessibility<br/>attribute"]
  B --> I["Responsive<br/>form display"]
  D --> I
  F --> I

Loading

File Changes

1. app/components/AddSite/AddSite.module.scss ✨ Enhancement +3/-3

Increase form container dimensions for visibility

• Updated .formContainer max-width from 400px to 640px
• Changed height from 600px to 85vh for better vertical space utilization
• Modified max-height from 80vh to 800px for consistent sizing constraints

app/components/AddSite/AddSite.module.scss

---

2. app/components/AddSite/AddSite.tsx 🐞 Bug fix +1/-5

Remove hardcoded iframe dimensions and add accessibility

• Removed hardcoded width="300" and height="520" attributes from iframe
• Removed frameBorder, marginHeight, and marginWidth attributes
• Added title="Add Initiative Form" attribute for accessibility

app/components/AddSite/AddSite.tsx

---

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (1) 📘 Rule violations (0) 📎 Requirement gaps (0)

1. 85vh modal height risk 🐞 Bug ⛯ Reliability

Description

• The modal container height was changed to height: 85vh with overflow: hidden, which can lead
  to content being partially clipped on mobile browsers where vh doesn’t match the *visible*
  viewport (dynamic URL/status bars, safe-area insets).
• This is more likely to show up in mobile landscape or when browser UI expands/collapses, because
  the overlay is fixed and centered, leaving little tolerance if vh overestimates available space.

Code

app/components/AddSite/AddSite.module.scss[R103-108]

+	max-width: 640px;
+	height: 85vh;
+	max-height: 800px;
background: white;
overflow: hidden;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

Evidence

The container is a fixed, centered overlay and the .formContainer is explicitly sized and clips
overflow; if vh overestimates the visible viewport on some mobile browsers, the modal can extend
past the visible area while still hiding overflow.

app/components/AddSite/AddSite.module.scss[84-119]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The modal uses `height: 85vh` and `overflow: hidden`. On some mobile browsers, `vh` can be based on a viewport that includes browser UI, which can cause the modal to extend beyond the visible area while clipping overflow.
### Issue Context
This modal is rendered inside a fixed full-screen overlay and centered via flexbox. The container is a column flex layout and clips overflow.
### Fix Focus Areas
- app/components/AddSite/AddSite.module.scss[100-108]
### Suggested change (example)
- Prefer `dvh` (dynamic viewport height) with a fallback:
- `height: min(85dvh, 800px);`
- keep a fallback `height: 85vh;` before it for older browsers
- Optionally account for safe areas:
- `max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 32px);`
- Consider `overflow: auto` on the container (or a wrapper) if you want to guarantee access to content when viewport is constrained.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

ⓘ The new review experience is currently in Beta. Learn more