fix horizontal scroll, make hovered column render stuff on top of other

ones (popups, tooltips etc)

1 files changed, 7 insertions, 1 deletions

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);