Fix split-pane side menu gap on smaller viewports

[Copilot]

On smaller viewports, ion-split-pane shrinks the menu to 28% width (Ionic default) while content padding remains fixed at 360px, creating a gap.

Changes

• Override --side-max-width with --ios26-menu-width on ion-split-pane to maintain consistent width
• Apply same override in demo for consistency

ion-split-pane.ios:not(.ios26-disabled) {
  --side-max-width: var(--ios26-menu-width);
}

Before

After

1024px viewport:

992px viewport:

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• www.google-analytics.com
  • Triggering command: /usr/local/bin/node node /home/REDACTED/work/ionic-theme-ios26/ionic-theme-ios26/demo/node_modules/.bin/ng build --configuration=production (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Side menu dynamic size causes increased gap</issue_title>
<issue_description>In smaller viewports, side menu goes thinner and this causes an increased gap between the page content and side menu.

I think the easiest way to fix this is overriding Ionic's default 28% max-width definition (via SCSS variable) explicitly, like:

ion-split-pane {
  --side-max-width: var(--ios26-menu-width);
}

</issue_description>

<agent_instructions>demoもサイドメニューの横幅を変えるようにして</agent_instructions>

Comments on the Issue (you are @copilot in this section)

@rdlabo Thanks! You’re absolutely right. I’ll integrate this into the implementation soon.

• Fixes Side menu dynamic size causes increased gap #89

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

[netlify]

✅ Deploy Preview for ionic-theme-ios26 ready!

Name	Link
🔨 Latest commit	e42c0bf
🔍 Latest deploy log	https://app.netlify.com/projects/ionic-theme-ios26/deploys/696738330575f90008f62839
😎 Deploy Preview	https://deploy-preview-90--ionic-theme-ios26.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

Playwright test results

 76 failed
 2 passed

Details

 78 tests across 1 suite
 8 minutes, 22 seconds
 7962ba0
 Please check the workflow run for details. And if you want to update the screenshots, please comment with /update-screenshots.

Failed tests

chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for button
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for toast:top
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for popover
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for toggle
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for alert:all
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for checkbox
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for modal:normal
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for select:alert
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for card
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for modal:sheet
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for accordion
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for date-and-time-pickers
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for select:popover
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for select:modal
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for progress-indicators:message
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for toast:bottom
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for toolbar
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for alert:remove-app
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for tabs
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for breadcrumbs
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for toast:anchor
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for radio
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for select:action-sheet
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for chip
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for toast:middle
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for searchbar
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for action-sheet:all
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for action-sheet:button-only
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for alert:button-only
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for inputs
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for range
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for progress-indicators:icon-only
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for floating-action-button
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for segment
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for item-list
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for reorder
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for action-sheet:no-cancel
chromium › screenshot.spec.ts › Screenshot Tests - All Routes › should match screenshot for alert:no-cancel
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for button
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for toast:top
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for popover
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for toggle
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for alert:all
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for checkbox
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for modal:normal
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for select:alert
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for card
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for modal:sheet
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for accordion
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for date-and-time-pickers
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for select:popover
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for select:modal
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for progress-indicators:message
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for toast:bottom
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for toolbar
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for alert:remove-app
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for tabs
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for breadcrumbs
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for toast:anchor
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for radio
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for select:action-sheet
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for chip
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for toast:middle
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for searchbar
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for action-sheet:all
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for action-sheet:button-only
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for alert:button-only
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for inputs
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for range
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for progress-indicators:icon-only
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for floating-action-button
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for segment
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for item-list
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for reorder
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for action-sheet:no-cancel
chromium › screenshot.spec.ts › Screenshot Tests - Dark Mode › should match dark mode screenshot for alert:no-cancel

[rdlabo]

/update-screenshots

[github-actions]

📊 Playwright Test Report

View the detailed test report: https://rdlabo-team.github.io/ionic-theme-ios26/pr-90/

[github-actions]

✅ Screenshots have been updated successfully!

The new screenshots have been committed to this PR.