Commit cf65f086 authored by Steven's avatar Steven

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.
parent 74b63b27
...@@ -42,10 +42,8 @@ const MemoDetailSidebar = ({ memo, className, parentPage }: Props) => { ...@@ -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() { ...@@ -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) => { ...@@ -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) => { ...@@ -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 ...@@ -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}
> >
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment