ui: fix scrollbar styling

ItsPi3141 · Jun 27, 2024 · 69f9aaf · 69f9aaf
1 parent 50e542d
commit 69f9aaf
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 1 deletion.
diff --git a/app/globals.css b/app/globals.css
@@ -54,6 +54,7 @@
 }
 
 /* DISCORD STYLE SCROLLBAR */
+/* Chromium */
 .discord-scrollbar::-webkit-scrollbar,
 body::-webkit-scrollbar {
 	width: 20px;
@@ -72,9 +73,21 @@ body::-webkit-scrollbar-track {
 body::-webkit-scrollbar-thumb {
 	background: #1a1b1e;
 	border-radius: 99px;
+	min-height: 30px;
 	border: solid 6.5px transparent;
 	background-clip: content-box !important;
 }
+/* Firefox */
+@-moz-document url-prefix() {
+	body,
+	.discord-scrollbar {
+		scrollbar-track-color: #2b2d31;
+		scrollbar-face-color: #3d3f45;
+		scrollbar-color: #3d3f45 #2b2d31;
+		scrollbar-gutter: stable;
+		padding-right: 16px;
+	}
+}
 
 /* LOADING SPINNER */
 .loading-container {

diff --git a/app/page.jsx b/app/page.jsx
@@ -180,7 +180,7 @@ export default function Home() {
 									{decorationsData.map((category, index) => {
 										return (
 											<div key={index}>
-												<div className="relative justify-center items-center grid grid-cols-1 grid-rows-1 bg-black mb-4 rounded-2xl w-full h-28 overflow-hidden">
+												<div className="relative justify-center items-center grid grid-cols-1 grid-rows-1 bg-black mb-4 rounded-2xl h-28 overflow-hidden">
 													{(() => {
 														if (typeof category.banner.image !== "string") {
 															return (