diff --git a/packages/core/src/components/basic-navigation/basic-navigation.scss b/packages/core/src/components/basic-navigation/basic-navigation.scss index 915ffca3c6f..f39240bcfea 100644 --- a/packages/core/src/components/basic-navigation/basic-navigation.scss +++ b/packages/core/src/components/basic-navigation/basic-navigation.scss @@ -22,7 +22,7 @@ .content { display: flex; height: calc(100% - 2.75rem); - width: calc(100% - 4rem); + width: calc(100% - 3.25rem); position: relative; margin-left: 3.25rem; overflow: auto; diff --git a/packages/core/src/components/my-component/my-component.scss b/packages/core/src/components/my-component/my-component.scss index 936f147c1c1..aed331baba7 100644 --- a/packages/core/src/components/my-component/my-component.scss +++ b/packages/core/src/components/my-component/my-component.scss @@ -14,5 +14,5 @@ position: relative; width: 100vw; height: 100vh; - padding: 1rem 0rem 0rem 1rem; + padding: 0rem 0rem 0rem 0rem; } diff --git a/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts b/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts index fa25ef13456..470b5230d84 100644 --- a/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts +++ b/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts @@ -16,6 +16,11 @@ regressionTest.describe('basic navigation', () => { expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); }); + regressionTest('content width', async ({ page }) => { + await page.goto('basic-navigation/content-width'); + expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); + }); + regressionTest('expanded', async ({ page }) => { await page.goto('basic-navigation/basic'); await page.locator('ix-menu ix-burger-menu').click(); diff --git a/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-content-width-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-content-width-1-chromium---theme-classic-dark-linux.png new file mode 100644 index 00000000000..47020db5d2a Binary files /dev/null and b/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-content-width-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-content-width-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-content-width-1-chromium---theme-classic-light-linux.png new file mode 100644 index 00000000000..8d23166625c Binary files /dev/null and b/packages/core/src/tests/basic-navigation/basic-navigation.e2e.ts-snapshots/basic-navigation-content-width-1-chromium---theme-classic-light-linux.png differ diff --git a/packages/core/src/tests/basic-navigation/content-width/index.html b/packages/core/src/tests/basic-navigation/content-width/index.html new file mode 100644 index 00000000000..5f2ee002d32 --- /dev/null +++ b/packages/core/src/tests/basic-navigation/content-width/index.html @@ -0,0 +1,60 @@ + + + + + + + Stencil Component Starter + + + + + + + + + + + + + + + Item 1 + Item 2 + +
Example content
+ + + + diff --git a/packages/core/src/tests/map-navigation/content-width/index.html b/packages/core/src/tests/map-navigation/content-width/index.html new file mode 100644 index 00000000000..7ff1ea7801e --- /dev/null +++ b/packages/core/src/tests/map-navigation/content-width/index.html @@ -0,0 +1,65 @@ + + + + + + + Stencil Component Starter + + + + + + + + + + + + + + + Item 1 + Item 2 + Item 3 + +
Sidebar content
+
Sidebar content
+ + + + diff --git a/packages/core/src/tests/map-navigation/map-navigation.e2e.ts b/packages/core/src/tests/map-navigation/map-navigation.e2e.ts index f8894299ef2..b59034495f1 100644 --- a/packages/core/src/tests/map-navigation/map-navigation.e2e.ts +++ b/packages/core/src/tests/map-navigation/map-navigation.e2e.ts @@ -15,4 +15,9 @@ regressionTest.describe('map-navigation', () => { await page.goto('map-navigation/basic'); expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); }); + + regressionTest('content-width', async ({ page }) => { + await page.goto('map-navigation/content-width'); + expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(); + }); }); diff --git a/packages/core/src/tests/map-navigation/map-navigation.e2e.ts-snapshots/map-navigation-content-width-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/map-navigation/map-navigation.e2e.ts-snapshots/map-navigation-content-width-1-chromium---theme-classic-dark-linux.png new file mode 100644 index 00000000000..be8b81fff20 Binary files /dev/null and b/packages/core/src/tests/map-navigation/map-navigation.e2e.ts-snapshots/map-navigation-content-width-1-chromium---theme-classic-dark-linux.png differ diff --git a/packages/core/src/tests/map-navigation/map-navigation.e2e.ts-snapshots/map-navigation-content-width-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/map-navigation/map-navigation.e2e.ts-snapshots/map-navigation-content-width-1-chromium---theme-classic-light-linux.png new file mode 100644 index 00000000000..2b57b0a8f1e Binary files /dev/null and b/packages/core/src/tests/map-navigation/map-navigation.e2e.ts-snapshots/map-navigation-content-width-1-chromium---theme-classic-light-linux.png differ