fix: tweak header and drawer padding when viewing on a device with cu… · pattern-lab/patternlab-node@98e9baf · GitHub

This repository was archived by the owner on May 13, 2026. It is now read-only.

pattern-lab / patternlab-node Public archive

• Notifications You must be signed in to change notification settings
• Fork 396
• Star 2.1k

• Code
• Discussions
• Actions
• Projects
• Wiki
• Security and quality
• Insights

Additional navigation options

Commit 98e9baf

Browse filesBrowse the repository at this point in the historyBrowse files

sghoweri

committed

fix: tweak header and drawer padding when viewing on a device with curved edges

1 parent 347e2fe commit 98e9baf
Copy full SHA for 98e9baf

2 files changed

+11-4Lines changed: 11 additions & 4 deletions

File tree

Expand file treeCollapse file tree

Open diff view settings

Filter options

• packages/uikit-workshop/src/scripts/lit-components
  • pl-drawer
    • pl-drawer.scss
  • pl-header
    • pl-header.scss

Expand file treeCollapse file tree

Open diff view settings

Collapse file

‎packages/uikit-workshop/src/scripts/lit-components/pl-drawer/pl-drawer.scss‎

Copy file name to clipboardExpand all lines: packages/uikit-workshop/src/scripts/lit-components/pl-drawer/pl-drawer.scss

+5Lines changed: 5 additions & 0 deletions

Original file line number	Diff line number	Diff line change
@@ -37,6 +37,11 @@ pl-drawer {
37	37	overflow: hidden;
38	38	max-width: 100vw;
39	39
	40	+ @supports(padding: max(0px)) {
	41	+ padding-left: calc(env(safe-area-inset-left) / 2);
	42	+ padding-right: calc(env(safe-area-inset-right) / 2);
	43	+ }
	44	+
40	45	.pl-c-body--theme-sidebar & {
41	46	@media all and (min-width: $pl-bp-med) {
42	47	max-width: calc(100vw - #{$pl-sidebar-width});

Collapse file

‎packages/uikit-workshop/src/scripts/lit-components/pl-header/pl-header.scss‎

Copy file name to clipboardExpand all lines: packages/uikit-workshop/src/scripts/lit-components/pl-header/pl-header.scss

+6-4Lines changed: 6 additions & 4 deletions

Original file line number	Diff line number	Diff line change
@@ -21,12 +21,18 @@ pl-header {
21	21	border-right: 1px solid;
22	22	border-right-color: $pl-color-gray-20;
23	23	border-right-color: var(--theme-border, $pl-color-gray-20);
	24	+ padding-left: calc(env(safe-area-inset-left) / 2);
	25	+ padding-right: calc(env(safe-area-inset-right) / 2);
24	26
25	27	.pl-c-body--theme-light & {
26	28	color: $pl-color-black;
27	29	background-color: $pl-color-white;
28	30	}
29	31
	32	+ .pl-c-body--theme-sidebar & {
	33	+ padding-right: 0;
	34	+ }
	35	+
30	36	@media all and (min-width: $pl-bp-med) {
31	37	.pl-c-body--theme-sidebar & {
32	38	position: fixed;
@@ -61,10 +67,6 @@ pl-header {
61	67	min-height: 30px; // magic number -- needed for initial skeleton screen styles used in the critical CSS
62	68	background-color: inherit;
63	69
64		- @supports(padding: max(0px)) {
65		- padding-left: env(safe-area-inset-left);
66		- padding-right: env(safe-area-inset-right);
67		- }
68	70
69	71	@media all and (min-width: $pl-bp-med) {
70	72	.pl-c-body--theme-sidebar & {

0 commit comments

Comments

0 (0)