Skip to content

ROU-12349: removing fixed height set in the html - #1189

Open
rugoncalves wants to merge 6 commits into
devfrom
ROU-12349
Open

ROU-12349: removing fixed height set in the html#1189
rugoncalves wants to merge 6 commits into
devfrom
ROU-12349

Conversation

@rugoncalves

Copy link
Copy Markdown
Contributor

This PR is for changing a behavior of OutSystems UI forces a pixel size that breaks the app on iOS.

What was happening

  • On native mobile, JS computed window.innerHeight on orientation-change and forced that static pixel value into the --viewport-height CSS custom property on document.body.
  • Because an inline style always wins over a SCSS fallback, this static snapshot overrode any CSS-level vh/dvh fallback, so the layout never tracked the real visible viewport.
  • As a result, iOS layouts using --viewport-height (.ios-bounce .main, and the dropdown ServerSide balloon's max-height) clipped or overflowed whenever the visible viewport changed (URL bar show/hide, keyboard open, safe-area settling, split view).
  • A second, undocumented consumer of --viewport-height was also found in _dropdown-serverside.scss with no fallback at all, meaning it would break on every phone (Android and iOS) once the JS stopped setting the variable.

What was done

  • Removed _isPhoneOrTablet() and its call site from LayoutPrivateBodyCssVars.ts - no JS code path forces a static pixel value into --viewport-height anymore.
  • _ios-bounce.scss: layered max-height: var(--viewport-height, 100vh) followed by max-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 layered 100vh/100dvh fallback to the balloon's max-height calc (previously had no fallback at all).
  • _layout.scss: split html out of the shared height: 100% reset and gave it its own layered height: 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 (and GlobalEnum.CSSVariables.ViewportHeight) is kept as a documented override hook for any future/consuming CSS, even though nothing sets it from JS anymore.
  • Dark mode, high-contrast, and non-web-app header/footer sizing logic in LayoutPrivateBodyCssVars.ts are unchanged.

Test Steps

  1. On an iOS device/simulator running the native mobile ios-bounce layout, trigger a visible-viewport change (show/hide the Safari URL bar, open the keyboard, or rotate and let the safe area settle).
  2. Confirm .main no longer clips or overflows content, and scrolling/content areas resize smoothly with the real viewport.
  3. Open a ServerSide Dropdown on a phone (Android and iOS) with no search in put and confirm the balloon's max-height still constrains it correctly.
  4. Toggle dark mode and high-contrast mode, and confirm header/footer sizing for non-web-app scenarios is unaffected.
  5. Run npm run build and npm run lint for both --target O11 and --tar get ODC - both succeed with no errors/warnings.

Checklist

  • tested locally
  • documented the code
  • clean all warnings and errors of eslint
  • requires changes in OutSystems (if so, provide a module with changes)
  • requires new sample page in OutSystems (if so, provide a module with changes)

@rugoncalves
rugoncalves requested a review from a team as a code owner July 31, 2026 13:00
Copilot AI review requested due to automatic review settings July 31, 2026 13:00

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 vhdvh 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-height to window.innerHeight + 'px' for phone/tablet.
  • Updated iOS bounce layout and ServerSide Dropdown balloon to use layered var(--viewport-height, 100vh) then var(--viewport-height, 100dvh) to track dynamic viewport where supported.
  • Adjusted the global layout reset so html is viewport-sized via layered 100vh/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.

Comment on lines +1 to +3
# Architecture Decision Records (ADRs)

This directory contains Architecture Decision Records (ADRs) for this project.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ignored. All repos have the same convention.

@sonarqubecloud

Copy link
Copy Markdown

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants