minor cleanups to base styles

- only set 100% height on root element
- only apply scrollbar globally if browsers supports scrollbar-width
- formatting

diff --git a/src/css/base.css b/src/css/base.css
index caaf1d6..d0fdaae 100644 (file)
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -1,8 +1,3 @@
-html,
-body {
-  height: 100%;
-}
-
 *,
 *::before,
 *::after {
@@ -12,6 +7,7 @@ body {
 html {
   box-sizing: border-box;
   font-size: var(--body-font-size);
+  height: 100%;
 }
 
 @media screen and (min-width: 1024px) {
@@ -80,14 +76,16 @@ table {
   word-wrap: normal; /* table widths aren't computed as expected when word-wrap is enabled */
 }
 
-body * {
-  scrollbar-width: thin;
-  scrollbar-color: var(--scrollbar-thumb-color) transparent;
+@supports (scrollbar-width: thin) {
+  body * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-thumb-color) transparent;
+  }
 }
 
 body ::-webkit-scrollbar {
-  width: 0.25rem;
   height: 0.25rem;
+  width: 0.25rem;
 }
 
 body ::-webkit-scrollbar-thumb {

diff --git a/src/css/main.css b/src/css/main.css
index ed17fb9..e89461a 100644 (file)
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -11,8 +11,7 @@
 @media screen and (min-width: 1024px) {
   main {
     flex: auto;
-    /* min-width: 0 required for flexbox to constrain overflowing elements */
-    min-width: 0;
+    min-width: 0; /* min-width: 0 required for flexbox to constrain overflowing elements */
   }
 
   main > .content {