Fix navigation on WebKit

mcecode · mcecode · commit 957fe3bb9ce6 · 2023-07-07T00:13:07.000+08:00
The navigation was overflowing vertically and being hidden on larger
screen sizes because the grid container height was set to 100%. It
seems fluid units and grid do not mix well in WebKit.
diff --git a/src/styles/header.scss b/src/styles/header.scss
@@ -98,7 +98,7 @@
   @include m-medium {
     .header {
       grid-template-columns: 1fr 2fr 1fr;
-      height: 100%;
+      height: unset;
     }
     .menu {
       display: none;
@@ -119,7 +119,7 @@
       position: unset;
     }
     .header.open-nav {
-      height: 100%;
+      height: unset;
       padding-bottom: unset;
     }
     .nav-list.open-nav {

Original file line number	Diff line number	Diff line change
`@@ -98,7 +98,7 @@`
`98`	`98`	`@include m-medium {`
`99`	`99`	`.header {`
`100`	`100`	`grid-template-columns: 1fr 2fr 1fr;`
`101`		`- height: 100%;`
	`101`	`+ height: unset;`
`102`	`102`	`}`
`103`	`103`	`.menu {`
`104`	`104`	`display: none;`
`@@ -119,7 +119,7 @@`
`119`	`119`	`position: unset;`
`120`	`120`	`}`
`121`	`121`	`.header.open-nav {`
`122`		`- height: 100%;`
	`122`	`+ height: unset;`
`123`	`123`	`padding-bottom: unset;`
`124`	`124`	`}`
`125`	`125`	`.nav-list.open-nav {`