fix(explore): remove stray vertical scrollbar, hide horizontal scrollbar
overflow-x-auto with overflow-y left at its default resolves to auto per the CSS overflow spec, so an irrelevant vertical scrollbar showed up alongside the horizontal one. Adds overflow-y-hidden, plus a real scrollbar-hide utility (@utility, Tailwind v4) for a cleaner look — StoryTray.tsx already referenced this class name without it ever being defined, so this fixes that dead reference too.
This commit is contained in:
1 parent
dfb01b2d49
commit
0f3b672532
2 files changed
+9
-1
No files matched your search
@@ -94,7 +94,7 @@ export default function ExplorePage() {
|
|||||||
<h1 className="text-xl font-semibold mb-4">{t("title")}</h1>
|
<h1 className="text-xl font-semibold mb-4">{t("title")}</h1>
|
||||||
|
|
||||||
<Tabs value={activeTab} onValueChange={handleTabChange} className="mb-4">
|
<Tabs value={activeTab} onValueChange={handleTabChange} className="mb-4">
|
||||||
<div className="overflow-x-auto">
|
<div className="overflow-x-auto overflow-y-hidden scrollbar-hide">
|
||||||
<TabsList className="w-max">
|
<TabsList className="w-max">
|
||||||
<TabsTrigger value="trending" className="gap-1">
|
<TabsTrigger value="trending" className="gap-1">
|
||||||
<TrendingUp className="h-3.5 w-3.5" />
|
<TrendingUp className="h-3.5 w-3.5" />
|
||||||
|
|||||||
@@ -4,6 +4,14 @@
|
|||||||
|
|
||||||
@custom-variant dark (&:is(.dark *));
|
@custom-variant dark (&:is(.dark *));
|
||||||
|
|
||||||
|
@utility scrollbar-hide {
|
||||||
|
scrollbar-width: none;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@theme inline {
|
@theme inline {
|
||||||
--color-background: var(--background);
|
--color-background: var(--background);
|
||||||
--color-foreground: var(--foreground);
|
--color-foreground: var(--foreground);
|
||||||
|
|||||||
Reference in new issue
Block a user