i hate customizing scroll bars

member-counter · Dec 18, 2024 · 92eb733 · 92eb733
1 parent 6c5b366
commit 92eb733
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 21 deletions.
diff --git a/apps/website/src/app/dashboard/layout.tsx b/apps/website/src/app/dashboard/layout.tsx
@@ -57,7 +57,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
           isPending={!userGuildsQuery.isFetched}
           className={cn(
             overflowClass,
-            "mb-0 bg-black pb-3 pt-[68px] transition-all duration-100",
+            "mb-0 overflow-x-hidden bg-black pb-3 pt-[68px] transition-all duration-100",
             {
               "ml-[-72px] mr-[8px] sm:ml-[0] sm:mr-[0]": !isMenuOpen,
             },

diff --git a/...shboard/servers/[guildId]/TemplateEditor/DataSource/Format/DataSourceFormatDigitInput.tsx b/...shboard/servers/[guildId]/TemplateEditor/DataSource/Format/DataSourceFormatDigitInput.tsx
@@ -35,7 +35,7 @@ function DataSourceFormatDigitInputInner({
         placeholder={digitNumber.toString()}
         aria-label={`Custom digit ${digitNumber}`}
         tabIndex={0}
-        className="no-scrollbar flex-grow overflow-y-hidden overflow-x-scroll [&>*]:whitespace-pre"
+        className="no-scrollbar flex-grow overflow-hidden [&>*]:whitespace-pre"
       />
       <EmojiPicker className="relative right-[-10px] top-[-5px] h-[33px] rounded-[4px] px-[9px] text-muted-foreground hover:bg-transparent" />
     </InputWrapper>

diff --git a/apps/website/src/app/dashboard/servers/[guildId]/TemplateEditor/TemplateEditor.tsx b/apps/website/src/app/dashboard/servers/[guildId]/TemplateEditor/TemplateEditor.tsx
@@ -102,7 +102,7 @@ function TemplateEditorInputLayout({
           aria-labelledby={id}
           tabIndex={0}
           className={cn({
-            "no-scrollbar flex-grow overflow-y-hidden overflow-x-scroll px-[1px] [&>*]:whitespace-pre":
+            "no-scrollbar flex-grow overflow-hidden px-[1px] [&>*]:whitespace-pre":
               target === "channelName",
             "break-all": target === "channelTopic",
           })}

diff --git a/apps/website/src/globals.css b/apps/website/src/globals.css
@@ -68,26 +68,28 @@ img.emoji {
   vertical-align: -0.1em;
 }
 
-::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
-}
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  ::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
 
-::-webkit-scrollbar-thumb {
-  background: #959595;
-  border-radius: 10px;
-  border: 4px solid transparent;
-  background-clip: padding-box;
-}
+  ::-webkit-scrollbar-thumb {
+    background: #959595;
+    border-radius: 10px;
+    border: 4px solid transparent;
+    background-clip: padding-box;
+  }
 
-::-webkit-scrollbar-thumb:hover {
-  border: 3px solid transparent;
-}
+  ::-webkit-scrollbar-thumb:hover {
+    border: 3px solid transparent;
+  }
 
-::-webkit-scrollbar-track {
-  background: transparent;
-}
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
 
-*::-webkit-scrollbar-thumb:active {
-  background-color: #626262;
+  *::-webkit-scrollbar-thumb:active {
+    background-color: #626262;
+  }
 }