fix: fix horizontal viewport to prevent horizontal scrolling

loganprit · Oct 30, 2024 · 235701b · 235701b
1 parent 37bd35a
commit 235701b
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/assets/sass/base/_page.scss b/assets/sass/base/_page.scss
@@ -51,7 +51,9 @@ html, body {
 
 #wrapper {
   height: 100vh;
+  width: 100vw;
   overflow-y: auto;
+  overflow-x: hidden;
   scrollbar-width: thin;
   scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
 

diff --git a/assets/sass/layout/_header.scss b/assets/sass/layout/_header.scss
@@ -74,6 +74,11 @@
 			border-top-width: _size(border-width);
 			border-bottom-width: _size(border-width);
 			max-width: 100%;
+			overflow-y: auto;
+			overflow-x: hidden;
+			scrollbar-gutter: stable;
+			max-height: 80vh;
+			scroll-behavior: smooth;
 
 			// Add scrollbar styles
 			overflow-y: auto;

diff --git a/assets/sass/layout/_main.scss b/assets/sass/layout/_main.scss
@@ -27,10 +27,10 @@
 			position: relative;
 			width: 40rem;
 			max-width: 100%;
+			overflow-x: hidden;
 			background-color: transparentize(_palette(bg), 0.15);
 			border-radius: _size(border-radius);
-			opacity: 0;
-
+
 			&.active {
 				@include vendor('transform', 'translateY(0)');
 				opacity: 1;