refactor: remove hide-scrollbar utility

Removed the hide-scrollbar CSS class and all its usages throughout the
codebase. Hiding scrollbars can hurt UX by making it unclear when
content is scrollable.

Changes:
- Removed hide-scrollbar CSS definition from index.css
- Removed hide-scrollbar class from Navigation component (2 instances)
- Removed hide-scrollbar class from MemoDetailSidebar (2 instances)
- Removed hide-scrollbar class from TagsSection
- Removed hide-scrollbar class from ShortcutsSection

Components now use standard browser scrollbar behavior, which provides
better visual feedback to users about scrollable content. Modern
browsers already handle scrollbar appearance elegantly.
pull/5590/head
Steven 4 months ago
parent 74b63b278c
commit cf65f0867b

@ -42,10 +42,8 @@ const MemoDetailSidebar = ({ memo, className, parentPage }: Props) => {
}; };
return ( return (
<aside <aside className={cn("relative w-full h-auto max-h-screen overflow-auto flex flex-col justify-start items-start", className)}>
className={cn("relative w-full h-auto max-h-screen overflow-auto hide-scrollbar flex flex-col justify-start items-start", className)} <div className="flex flex-col justify-start items-start w-full gap-4 h-auto shrink-0 flex-nowrap">
>
<div className="flex flex-col justify-start items-start w-full gap-4 h-auto shrink-0 flex-nowrap hide-scrollbar">
{hasReferenceRelations && ( {hasReferenceRelations && (
<div className="relative w-full h-36 border border-border rounded-lg bg-muted overflow-hidden"> <div className="relative w-full h-36 border border-border rounded-lg bg-muted overflow-hidden">
<MemoRelationForceGraph className="w-full h-full" memo={memo} parentPage={parentPage} /> <MemoRelationForceGraph className="w-full h-full" memo={memo} parentPage={parentPage} />

@ -61,7 +61,7 @@ function ShortcutsSection() {
}; };
return ( return (
<div className="w-full flex flex-col justify-start items-start mt-3 px-1 h-auto shrink-0 flex-nowrap hide-scrollbar"> <div className="w-full flex flex-col justify-start items-start mt-3 px-1 h-auto shrink-0 flex-nowrap">
<div className="flex flex-row justify-between items-center w-full gap-1 mb-1 text-sm leading-6 text-muted-foreground select-none"> <div className="flex flex-row justify-between items-center w-full gap-1 mb-1 text-sm leading-6 text-muted-foreground select-none">
<span>{t("common.shortcuts")}</span> <span>{t("common.shortcuts")}</span>
<TooltipProvider> <TooltipProvider>

@ -37,7 +37,7 @@ const TagsSection = (props: Props) => {
}; };
return ( return (
<div className="w-full flex flex-col justify-start items-start mt-3 px-1 h-auto shrink-0 flex-nowrap hide-scrollbar"> <div className="w-full flex flex-col justify-start items-start mt-3 px-1 h-auto shrink-0 flex-nowrap">
<div className="flex flex-row justify-between items-center w-full gap-1 mb-1 text-sm leading-6 text-muted-foreground select-none"> <div className="flex flex-row justify-between items-center w-full gap-1 mb-1 text-sm leading-6 text-muted-foreground select-none">
<span>{t("common.tags")}</span> <span>{t("common.tags")}</span>
{tags.length > 0 && ( {tags.length > 0 && (

@ -74,8 +74,8 @@ const Navigation = (props: Props) => {
: [exploreNavLink, signInNavLink]; : [exploreNavLink, signInNavLink];
return ( return (
<header className={cn("w-full h-full overflow-auto flex flex-col justify-between items-start gap-4 hide-scrollbar", className)}> <header className={cn("w-full h-full overflow-auto flex flex-col justify-between items-start gap-4", className)}>
<div className="w-full px-1 py-1 flex flex-col justify-start items-start space-y-2 overflow-auto overflow-x-hidden hide-scrollbar shrink"> <div className="w-full px-1 py-1 flex flex-col justify-start items-start space-y-2 overflow-auto overflow-x-hidden shrink">
<NavLink className="mb-3 cursor-default" to={currentUser ? Routes.ROOT : Routes.EXPLORE}> <NavLink className="mb-3 cursor-default" to={currentUser ? Routes.ROOT : Routes.EXPLORE}>
<MemosLogo collapsed={collapsed} /> <MemosLogo collapsed={collapsed} />
</NavLink> </NavLink>

@ -50,7 +50,7 @@ export const MonthNavigator = memo(({ visibleMonth, onMonthChange, activityStats
</button> </button>
</DialogTrigger> </DialogTrigger>
<DialogContent <DialogContent
className="p-0 border border-border/20 bg-background md:max-w-6xl w-[min(100vw-24px,1200px)] max-h-[85vh] overflow-auto rounded-xl shadow-xl" className="p-0 border border-border/20 bg-background md:max-w-6xl w-[min(100vw-24px,1200px)] max-h-[85vh] overflow-y-auto rounded-xl shadow-xl"
size="2xl" size="2xl"
showCloseButton={false} showCloseButton={false}
> >

Loading…
Cancel
Save