Skip to content

fix(modal): respect component-scoped sizing overrides - #367

Open
rdlabo wants to merge 1 commit into
mainfrom
fix/custom-datetime-overlay-sizing
Open

rdlabo wants to merge 1 commit into
mainfrom
fix/custom-datetime-overlay-sizing

Conversation

@rdlabo

@rdlabo rdlabo commented Nov 10, 2026 •

Copy link
Copy Markdown
Contributor

A custom datetime Modal with component-scoped ion-modal { --width: auto; --height: auto; } still received the theme's fixed desktop dimensions, leaving a large empty frame around the picker. The example supplied in #361 uses this path rather than ion-datetime-button.

Lower the specificity of dimension defaults so explicit component CSS can override them. Preserve the existing positioning, decoration and sheet-offset precedence. No extra picker class is required.

Before After
Before: fixed desktop frame around a compact picker After: Modal follows the component sizing

Both screenshots use the same fixture and 1200 × 800 viewport in Linux/amd64 Playwright 1.58.2; only the theme CSS changes.

Validation

  • CI: all 571 E2E tests passed; the screenshot-update workflow reported no changes.

  • Linux: 27 tests passed, including 14 datetime screenshots and 13 existing Modal tests. The original eight datetime baselines are unchanged.

  • Existing floating-sheet tests also cover an 80px offset and bottom alignment.

  • Ionic 8.8.19: six sizing checks passed across desktop, folded and phone layouts, with component CSS loaded before or after the theme.

  • Build and lint passed; supervisor and independent acceptance reviews completed without outstanding changes.

Related to #361.

@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.

@github-actions

Copy link
Copy Markdown
Contributor

Playwright test results

passed  571 passed

Details

stats  571 tests across 29 suites
duration  4 minutes, 32 seconds
commit  6c01892
info  This result covers Ionic 9. To update the screenshots, comment with /update-screenshots.

@github-actions

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-367/

View the results in the workflow run.

This branch has not been deployed

No deployments
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