perf(root): use grid instead of flex

clshortfuse · Aug 9, 2023 · ad60541 · ad60541
1 parent 02efab1
commit ad60541
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/components/Root.js b/components/Root.js
@@ -14,7 +14,10 @@ export default CustomElement
   `
   .css`
     :host {
-      display: flex;
+      display: grid;
+      grid-auto-flow: column;
+      grid-template-rows: 1fr;
+      grid-template-columns: auto 1fr auto;
       overflow-x: clip;
 
       font: var(--mdw-typescale__body-large__font);
@@ -24,7 +27,7 @@ export default CustomElement
     #center {
       display: block;
 
-      flex: 1;
+      grid-column: 2;
     }
 
   `

diff --git a/components/SideSheet.js b/components/SideSheet.js
@@ -255,6 +255,7 @@ export default CustomElement
       min-block-size: 100vh;
       min-block-size: 100dvh;
       max-block-size: 100%;
+      grid-column: 1;
 
       visibility: hidden;
 
@@ -283,6 +284,10 @@ export default CustomElement
       z-index: 24;
     }
 
+    :host(:where[inline-end]) {
+      grid-column: 3;
+    }
+
     :host(:where([inline-end][modal])) {
       inset-inline: auto 0;