FWF-5683: [Bugfix] Fixed modal height changes in large modal

[vinaayakh-aot]

User description

📝 Pull Request Summary

Description:
Fix max height for large modals

Related Jira Ticket:
https://aottech.atlassian.net/browse/FWF-5683

Type of Change:

• ✨ Feature
• 🐞 Bug Fix
• ♻️ Refactor
• 🧹 Code Cleanup
• 🧪 Test Addition / Update
• 📦 Dependency Update
• 📘 Documentation Update
• 🚀 Deployment / Config / Security Updates

---

🧩 Microfrontends Affected

Please select all microfrontends or modules that are part of this change:

• forms-flow-admin
• forms-flow-components
• forms-flow-integration
• forms-flow-nav
• forms-flow-review
• forms-flow-service
• forms-flow-submissions
• forms-flow-theme
• scripts
• Others (please specify below)

---

🧠 Summary of Changes

Fixed large modal height issues

---

🧪 Testing Details

Testing Performed:

Screenshots (if applicable):

---

✅ Checklist

• Code builds successfully without lint or type errors
• Unit tests added or updated
• Integration or end-to-end tests validated
• UI verified
• Documentation updated (README / Confluence / UI Docs)
• No sensitive information (keys, passwords, secrets) committed
• I have updated the CHANGELOG with relevant details
• I have given a clear and meaningful PR title and description
• I have verified cross-repo dependencies (if any)
• I have confirmed backward compatibility with previous releases
• Verified changes across all selected microfrontends

---

---

PR Type

Bug fix, Enhancement

---

Description

• Set large modal body fixed height

• Replace max-height with height calculation

• Maintain scrollable modal content

• Minor formatting fix in SCSS block

---

Diagram Walkthrough

flowchart LR
  SCSS["_mixins.scss (modal styles)"]
  Behavior["Large modal body height behavior"]
  Scroll["Consistent scroll within modal body"]

  SCSS -- "max-height -> height" --> Behavior
  Behavior -- "content scrolls reliably" --> Scroll

Loading

File Walkthrough

	Relevant files
Bug fix	_mixins.scss Use fixed calculated height for modal body                              forms-flow-theme/scss/v8-scss/_mixins.scss Change .modal-body from max-height to height. Keep overflow-y auto for scrolling. Preserve padding, margins, and borders. Fix closing brace indentation. +2/-2

---

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[github-actions]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 1 🔵⚪⚪⚪⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Layout Regression Replacing max-height with a fixed height on .modal-body may cause content to overflow beyond the viewport or hide footer/header on smaller screens or when dynamic content grows. Validate behavior across varying modal content sizes and responsive breakpoints. .modal-body { padding: 1.5rem; overflow-y: auto; height: calc(#{$modal-height} - 120px); margin: 0 1.5rem; border-top: 1px solid var(--gray-x-light); border-bottom: 1px solid var(--gray-x-light); } Scroll Behavior With a fixed height and overflow-y: auto, ensure the modal body scrolls correctly without double scrollbars at page level and that footer remains accessible; verify on mobile and high-zoom scenarios. .modal-body { padding: 1.5rem; overflow-y: auto; height: calc(#{$modal-height} - 120px); margin: 0 1.5rem; border-top: 1px solid var(--gray-x-light); border-bottom: 1px solid var(--gray-x-light); }

[github-actions]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Preserve responsive modal sizing Replacing max-height with a fixed height can distort layout and cause overflow issues on small viewports. Restore flexible sizing by using max-height and providing a mobile override to prevent content from being cut off. This keeps the modal responsive while fixing the large modal case. forms-flow-theme/scss/v8-scss/_mixins.scss [174-181] .modal-body { padding: 1.5rem; overflow-y: auto; - height: calc(#{$modal-height} - 120px); + max-height: calc(#{$modal-height} - 120px); margin: 0 1.5rem; border-top: 1px solid var(--gray-x-light); border-bottom: 1px solid var(--gray-x-light); } +@media (max-height: 700px) { + .modal-body { + max-height: calc(100vh - 160px); + } +} + Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies a potentially breaking change from max-height to height and proposes reverting to responsive max-height with a sensible media query, improving usability on smaller viewports. It's contextually accurate to the new hunk, though impact is moderate rather than critical.	Medium