Skip to content

fix: preserve content-sized datetime modals - #366

Merged
rdlabo merged 4 commits into
mainfrom
fix/datetime-overlay-sizing
Nov 10, 2026
Merged

rdlabo merged 4 commits into
mainfrom
fix/datetime-overlay-sizing

Conversation

@rdlabo

@rdlabo rdlabo commented Nov 10, 2026 •

Copy link
Copy Markdown
Contributor

Datetime Button modals inherit the theme's desktop modal dimensions, leaving a large empty area around the picker. Exclude Ionic's ion-datetime-button-overlay from the desktop and foldable modal sizing rules so Ionic's existing fit-content sizing remains effective, including custom picker widths. Keep selector specificity unchanged so consumer CSS can still override normal modal sizes.

This changes modal sizing only. Normal, card and sheet modals keep their existing layout; datetime buttons and popover behavior are unchanged. Related to #361.

Validation:

  • 8 image regressions passed in the existing screenshot suite, covering desktop, phone, folded layout and custom picker width in light/dark mode.
  • 13 existing Modal tests passed, including consumer CSS sizing overrides.
  • Baselines were generated and compared on Linux/amd64 with Playwright 1.58.2. Restoring the original CSS makes the desktop image regression fail.
  • Theme build, formatting and diff checks passed.
  • GitHub CI regenerated the baselines through /update-screenshots and reported no changes; both E2E shards passed.

Before / After

Same demo page: Ionic 9.0.0, Chromium on Linux/amd64, 1200 × 800 viewport. The picker remains 320 × 320; the modal changes from 580 × 660 to the same 320 × 320.

Before After
Oversized datetime modal before the fix Content-sized datetime modal after the fix

@github-actions

github-actions Bot commented Nov 10, 2026 •

Copy link
Copy Markdown
Contributor

Playwright test results

passed  565 passed

Details

stats  565 tests across 29 suites
duration  3 minutes, 51 seconds
commit  025fb65
info  This result covers Ionic 9. To update the screenshots, comment with /update-screenshots.

@github-actions

github-actions Bot commented Nov 10, 2026 •

Copy link
Copy Markdown
Contributor

📊 Ionic 9 Playwright Test Report

View the detailed Ionic 9 report after GitHub Pages deployment completes: https://webview-native-ui.github.io/ionic-theme-ios27/pr-366/

View the results in the workflow run.

@rdlabo

rdlabo commented Nov 10, 2026

Copy link
Copy Markdown
Contributor Author

/update-screenshots

@github-actions

Copy link
Copy Markdown
Contributor

ℹ️ No screenshot changes detected.

The current screenshots are already up to date.

@rdlabo
rdlabo merged commit 55488bc into main Nov 10, 2026
12 checks passed
@github-actions

Copy link
Copy Markdown
Contributor

npm beta published

CI passed for the merge commit 55488bcd3b80. Install the immutable version with:

npm install @rdlabo/ionic-theme-ios27@2.1.1-beta.pr366.sha55488bcd3b80

@rdlabo rdlabo mentioned this pull request Nov 10, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant