Show scrollbar for tags

evadecker · Nov 22, 2024 · e98874c · e98874c
1 parent 1ca56bb
commit e98874c
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git a/src/lib/styles/base.css b/src/lib/styles/base.css
@@ -6,6 +6,7 @@ html {
 body.dark {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  color-scheme: dark;
 }
 
 body {
@@ -22,6 +23,7 @@ body {
   text-rendering: optimizelegibility;
   font-synthesis: none;
   font-feature-settings: var(--font-stable);
+  color-scheme: light;
 }
 
 ::selection {

diff --git a/src/lib/styles/theme.css b/src/lib/styles/theme.css
@@ -141,4 +141,6 @@
   --shadow-album-inset-s: inset 0 -1px 1px rgba(0, 0, 0, 0.05),
     inset 0 -0.5px 0.5px rgba(0, 0, 0, 0.15);
   --shadow-album-inset-l: inset 0 -2px 2px rgba(0, 0, 0, 0.05), inset 0 -1px 1px rgba(0, 0, 0, 0.15);
+
+  color-scheme: light dark;
 }
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -269,19 +269,16 @@
     display: flex;
     align-items: flex-start;
     gap: var(--space-2xs);
-    overflow-x: scroll;
+    overflow-x: auto;
     margin-inline: calc(var(--space-m) * -1);
     padding-inline: var(--space-m);
+    padding-block-end: var(--space-m);
+    margin-block-end: calc(var(--space-m) * -1);
+    scrollbar-width: thin;
     @supports (padding: max(0px)) {
       padding-inline: max(var(--space-m), env(safe-area-inset-right));
       margin-inline: calc(max(var(--space-m), env(safe-area-inset-right)) * -1);
     }
-    // Hide scrollbars on Chrome, Safari
-    &::-webkit-scrollbar {
-      display: none;
-    }
-    -ms-overflow-style: none; // Edge
-    scrollbar-width: none; // Firefox
   }
 
   .tag-group {