From aa07b219c9ece77a8bf11d6dc0f36e12658c7c61 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 10 Apr 2022 21:31:58 +0300
Subject: [PATCH] fix horizontal scroll, make hovered column render stuff on
 top of other ones (popups, tooltips etc)

---
 src/App.scss | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/App.scss b/src/App.scss
index 01359f2c..d8396562 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -7,6 +7,7 @@
 
 html {
   font-size: 14px;
+  overflow-x: clip;
 }
 
 body {
@@ -15,10 +16,10 @@ body {
   margin: 0;
   color: $fallback--text;
   color: var(--text, $fallback--text);
-  overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overscroll-behavior-y: none;
+  overflow-x: clip;
 
   &.hidden {
     display: none;
@@ -174,6 +175,7 @@ nav {
   flex-wrap: wrap;
   justify-content: center;
   min-height: 100vh;
+  overflow-x: clip;
 
   .column {
     --___columnMargin: var(--columnGap);
@@ -188,6 +190,10 @@ nav {
     row-gap: var(--___columnMargin);
     align-content: start;
 
+    &:hover {
+      z-index: 2;
+    }
+
     &.-scrollable {
       --___paddingIncrease: calc(var(--columnGap) / 2);