ROU-12349: removing fixed height set in the html - #1189
Conversation
There was a problem hiding this comment.
Pull request overview
This PR removes the native-mobile JavaScript behavior that was forcing a static pixel --viewport-height onto document.body and replaces it with CSS-first dynamic viewport handling (layered vh → dvh fallbacks), preventing iOS visible-viewport changes (URL bar/keyboard/safe-area settling) from causing layout clipping/overflow. It also documents the architectural rationale via internal ADRs.
Changes:
- Removed the JS path that set
--viewport-heighttowindow.innerHeight + 'px'for phone/tablet. - Updated iOS bounce layout and ServerSide Dropdown balloon to use layered
var(--viewport-height, 100vh)thenvar(--viewport-height, 100dvh)to track dynamic viewport where supported. - Adjusted the global layout reset so
htmlis viewport-sized via layered100vh/100dvh, and added internal ADR documentation files.
Reviewed changes
Copilot reviewed 7 out of 7 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| src/scss/02-layout/_layout.scss | Split html out of the height reset and set layered 100vh/100dvh to align the height inheritance chain with the visible viewport. |
| src/scss/02-layout/_ios-bounce.scss | Layered max-height fallbacks so .main tracks dynamic viewport units when available. |
| src/scripts/OutSystems/OSUI/Utils/LayoutPrivateBodyCssVars.ts | Removed the phone/tablet code path that was forcing --viewport-height inline with a static px value. |
| src/scripts/OSFramework/OSUI/Pattern/Dropdown/ServerSide/scss/_dropdown-serverside.scss | Added layered fallbacks for --viewport-height in balloon max-height calc to prevent regressions once JS no longer sets it. |
| docs-internal/Readme.md | Added internal documentation describing ADR purpose/process and an ADR log. |
| docs-internal/ADR-0001-ios-dynamic-viewport-height.md | Added ADR documenting the decision to replace JS-forced viewport height with CSS dynamic viewport units and related scope choices. |
| docs-internal/ADR-0000-Title-of-ADR.md | Added ADR template for future architectural decision records. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| # Architecture Decision Records (ADRs) | ||
|
|
||
| This directory contains Architecture Decision Records (ADRs) for this project. |
There was a problem hiding this comment.
Ignored. All repos have the same convention.
|



This PR is for changing a behavior of OutSystems UI forces a pixel size that breaks the app on iOS.
What was happening
window.innerHeighton orientation-change and forced that static pixel value into the--viewport-heightCSS custom property ondocument.body.vh/dvhfallback, so the layout never tracked the real visible viewport.--viewport-height(.ios-bounce .main, and the dropdown ServerSide balloon'smax-height) clipped or overflowed whenever the visible viewport changed (URL bar show/hide, keyboard open, safe-area settling, split view).--viewport-heightwas also found in_dropdown-serverside.scsswith no fallback at all, meaning it would break on every phone (Android and iOS) once the JS stopped setting the variable.What was done
_isPhoneOrTablet()and its call site fromLayoutPrivateBodyCssVars.ts- no JS code path forces a static pixel value into--viewport-heightanymore._ios-bounce.scss: layeredmax-height: var(--viewport-height, 100vh)followed bymax-height: var(--viewport-height, 100dvh)on.main, so browsers with dynamic viewport unit support get a fallback-free live viewport height._dropdown-serverside.scss: added the same layered100vh/100dvhfallback to the balloon'smax-heightcalc (previously had no fallback at all)._layout.scss: splithtmlout of the sharedheight: 100%reset and gave it its own layeredheight: 100vh; height: 100dvh;, so the rest of the chain (body,#reactContainer,#transitionContainer,.screen-container) inherits from the real visible viewport instead of a percentage-of-percentage chain.--viewport-height(andGlobalEnum.CSSVariables.ViewportHeight) is kept as a documented override hook for any future/consuming CSS, even though nothing sets it from JS anymore.LayoutPrivateBodyCssVars.tsare unchanged.Test Steps
ios-bouncelayout, trigger a visible-viewport change (show/hide the Safari URL bar, open the keyboard, or rotate and let the safe area settle)..mainno longer clips or overflows content, and scrolling/content areas resize smoothly with the real viewport.max-heightstill constrains it correctly.npm run buildandnpm run lintfor both--target O11and--tar get ODC- both succeed with no errors/warnings.Checklist