Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-05-06 05:07:36 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Tweak styles (correct height, not-blocky scrollbar)

Browse Source
This commit is contained in:
Kalle 2026-01-05 20:14:56 +02:00
parent a44be81ad3
commit f4f2be6f7a
2 changed files with 13 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
app/components/SideNav.module.css
View File

@ -4,32 +4,24 @@
position: sticky;
left: 0;
top: var(--sticky-top);
display: flex;
flex-direction: column;
gap: var(--s-2);
overflow-y: auto;
max-height: calc(100vh - var(--layout-nav-height) - var(--s-5));
height: fit-content;
min-width: var(--side-nav-width);
max-width: var(--side-nav-width);
padding: var(--s-4) var(--s-2-5);
border: 1.5px solid var(--color-border);
border-radius: var(--rounded);
margin: var(--s-2-5);
overflow: hidden;
}
&::-webkit-scrollbar,
&::-webkit-scrollbar-track {
background-color: transparent;
height: 18px;
width: 18px;
}
&::-webkit-scrollbar-thumb {
background-color: var(--color-text-accent-transparent);
border: 6px solid transparent;
border-radius: 99999px;
background-clip: content-box;
}
.sideNavInner {
display: flex;
flex-direction: column;
gap: var(--s-2);
padding: var(--s-1-5);
padding-block-end: var(--s-2);
overflow-y: auto;
max-height: calc(100vh - var(--sticky-top) - var(--s-3-5));
border-radius: calc(var(--rounded) - var(--s-1-5));
}
.sideNavLink {

4
app/components/SideNav.tsx
View File

@ -10,8 +10,8 @@ export function SideNav({
className?: string;
}) {
return (
<nav className={clsx(styles.sideNav, "scrollbar", className)}>
{children}
<nav className={clsx(styles.sideNav, className)}>
<div className={clsx(styles.sideNavInner, "scrollbar")}>{children}</div>
</nav>
);
}