diff --git a/galata/test/jupyterlab/zoom.test.ts b/galata/test/jupyterlab/zoom.test.ts deleted file mode 100644 index 374963a53d3f..000000000000 --- a/galata/test/jupyterlab/zoom.test.ts +++ /dev/null @@ -1,46 +0,0 @@ -// Copyright (c) Jupyter Development Team. -// Distributed under the terms of the Modified BSD License. - -import { expect, test } from '@jupyterlab/galata'; -//Chose dimensions prioritizing WCAG for low vision support. -//Viewport of 320x256 CSS pixels is equilavent to an initial starting viewport of 1280x1024 CSS pixels at 400% zoom. -//Ensures accessibility for varying visual acuity. -//Constraints include balancing device requirements and maintaining responsiveness. -test.use({ viewport: { width: 1280, height: 720 } }); - -test.describe('Low Vision / Zoom Support', () => { - test.beforeEach(async ({ page }) => { - // Close the left sidebar before these tests because we are unable to support - // showing both the sidebar and the main area for small screen / high zoom. - // Close the left sidebar before these tests because we are currently and - // probably never will be able fully fit both the sidebar and the main area - // side-by-side together on small screens / high zoom. - await page.sidebar.close('left'); - }); - - test('Menubar, small viewport', async ({ page }) => { - expect(await page.locator('#jp-top-panel').screenshot()).toMatchSnapshot( - 'menu-bar-small-viewport.png' - ); - }); - - test('Left tab bar, small viewport', async ({ page }) => { - const tabbar = await page.sidebar.getTabBar(); - expect(await tabbar.screenshot()).toMatchSnapshot( - 'left-tab-bar-small-viewport.png' - ); - }); - - test('Right tab bar, small viewport', async ({ page }) => { - const tabbar = await page.sidebar.getTabBar('right'); - expect(await tabbar.screenshot()).toMatchSnapshot( - 'right-tab-bar-small-viewport.png' - ); - }); - - test('Status bar, small viewport', async ({ page }) => { - expect( - await page.locator('#jp-main-statusbar').screenshot() - ).toMatchSnapshot('status-bar-small-viewport.png'); - }); -}); diff --git a/packages/application/style/menus.css b/packages/application/style/menus.css index dd8824d43732..74d6beb80b03 100644 --- a/packages/application/style/menus.css +++ b/packages/application/style/menus.css @@ -31,11 +31,16 @@ } .lm-MenuBar-item { + /* TODO: remove ignore directives when fixed: https://github.com/csstree/csstree/issues/164 */ /* stylelint-disable-next-line csstree/validator */ - /* calc() is used for adaptive menuBar padding, it fixes UI cutoff at 100% zoom, with -2px border */ - /* TODO: remove ignore directive when fixed: https://github.com/csstree/csstree/issues/164 */ - /* stylelint-disable-next-line csstree/validator */ - padding: 0 min(calc(1.2vw - 2px), 8px); /* Using min() and vw allows the left and right padding to shrink when the screen is small or when the user increases browser zoom level, which should allow for the "Help" menu to be shown at 400% zoom */ + padding: 0 /* stylelint-disable-next-line csstree/validator */ + min( + calc(1.2vw - 2px), + 8px + /* pull horizontal padding down from 8px as viewport width (vw) drops below 833px */ + /* calc() is used for adaptive menuBar padding, it fixes UI cutoff at 100% zoom, with -2px border */ + /* Using min() and vw allows the left and right padding to shrink when the screen is small or when the user increases browser zoom level, which should allow for the "Help" menu to be shown at 400% zoom */ + ); border-left: var(--jp-border-width) solid transparent; border-right: var(--jp-border-width) solid transparent; border-top: var(--jp-border-width) solid transparent; diff --git a/packages/application/style/sidepanel.css b/packages/application/style/sidepanel.css index c9cc8c700358..26940bc1a5f5 100644 --- a/packages/application/style/sidepanel.css +++ b/packages/application/style/sidepanel.css @@ -47,7 +47,12 @@ .jp-SideBar .lm-TabBar-tab { /* TODO: remove ignore directive when fixed: https://github.com/csstree/csstree/issues/164 */ /* stylelint-disable-next-line csstree/validator */ - padding: min(5vh, 16px) 0; /* Using min() and vh allows the top and bottom padding to shrink when the screen is small or when the user increases browser zoom level, making room to show more content in the sidebar */ + padding: min( + 5vh, + 16px + /* pull vertical padding down from 16px as viewport height drops below 320px */ + ) + 0; border: none; overflow: visible; flex-direction: column; diff --git a/packages/filebrowser/style/base.css b/packages/filebrowser/style/base.css index 34f7b57fd68d..fb28145ca799 100644 --- a/packages/filebrowser/style/base.css +++ b/packages/filebrowser/style/base.css @@ -23,22 +23,23 @@ } .jp-FileBrowser-toolbar.jp-Toolbar { - /* flex-wrap: wrap; */ - - /* TODO: remove ignore directive when fixed: https://github.com/csstree/csstree/issues/164 */ - /* stylelint-disable-next-line csstree/validator */ - - /* row-gap: min( - 1.7vh, - 12px - ); Using min() and vh allows the row-gap to shrink when the screen is small or when the user zooms in, which should allow at least 2 files or folders to be seen within the file browser at 400% zoom */ - + flex-wrap: wrap; border-bottom: none; height: auto; - /* stylelint-disable-next-line csstree/validator */ + /* TODO: remove ignore directive when fixed: https://github.com/csstree/csstree/issues/164 */ /* stylelint-disable-next-line csstree/validator */ - margin: min(5vh, 8px) min(1.5vw, 12px) 0; /* Using min() and vw/vh allows the margins to shrink when the screen is small or when the user zooms in, which should allow at least 2 files or folders to be seen within the file browser at 400% zoom */ + margin: min( + 5vh, + 8px + /* pull top margin down from 8px as viewport height drops below 160px */ + ) + min( + 1.5vw, + 12px + /* pull horizontal margin down from 12px as viewport width drops below 800px */ + ) + 0; box-shadow: none; padding: 0; } @@ -58,12 +59,19 @@ /* TODO: remove ignore directive when fixed: https://github.com/csstree/csstree/issues/164 */ /* stylelint-disable-next-line csstree/validator */ - margin: min(1.2vh, 8px) min(1vw, 12px); /* Using min() and vw/vh allows the margins to shrink when the screen is small or when the user zooms in, which should allow at least two files or folders to be seen within the file browser at 400% zoom */ + margin: min( + 1.2vh, + 8px + /* start pulling vertical margin down from 8px once viewport height drops below ~666px */ + ) + min( + 1vw, + 12px + /* start pulling horizontal margin down from 12px once viewport width drops below 1200px */ + ); /* Using min() and vw/vh allows the margins to shrink when the screen is small or when the user zooms in, which should allow at least two files or folders to be seen within the file browser at 400% zoom */ } .jp-BreadCrumbs-item { - /* stylelint-disable-next-line csstree/validator */ - margin: min(3vh, 8px) min(2vw, 12px); padding: 0 2px; border-radius: var(--jp-border-radius); cursor: pointer; @@ -145,10 +153,23 @@ } .jp-DirListing-headerItem { - /* stylelint-disable-next-line csstree/validator */ /* TODO: remove ignore directive when fixed: https://github.com/csstree/csstree/issues/164 */ /* stylelint-disable-next-line csstree/validator */ - padding: min(1vh, 4px) min(6vw, 12px) min(1vh, 2px); /* Using min() and vw/vh allows the padding to shrink when the screen is small or when the user zooms in, which should allow at least two files or folders to be seen within the file browser at 400% zoom */ + padding: min( + 1vh, + 4px + /* pull top padding down from 4px as viewport height drops below 400px */ + ) + min( + 6vw, + 12px + /* pull horizontal padding down from 12px as viewport width drops below 200px */ + ) + min( + 1vh, + 2px + /* pull bottom padding down from 2px as viewport height drops below 200px */ + ); font-weight: 500; } @@ -228,7 +249,17 @@ /* TODO: remove ignore directive when fixed: https://github.com/csstree/csstree/issues/164 */ /* stylelint-disable-next-line csstree/validator */ - padding: min(1vh, 4px) min(1vw, 12px); /* Using min() and vw/vh allows the padding to shrink when the screen is small or when the user zooms in, which should allow at least two files or folders to be seen within the file browser at 400% zoom */ + padding: min( + 1vh, + 4px + /* pull vertical padding down from 4px as viewport height drops below 400px */ + ) + min( + 1vw, + 12px + /* pull horizontal padding down from 12px as viewport width drops below 1200px */ + ); /* Using min() and vw/vh allows the padding to shrink when the screen is small or when the user zooms in, which should allow at least two files or folders to be seen within the file browser at 400% zoom */ + -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;