apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-04-28 18:36:23 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

fix: improve accessibility and styling in sidebar components

Browse source
This commit is contained in:
Anish Sarkar 2026-03-17 12:42:25 +05:30
parent 591a39ee56
commit 440f5aec72
5 changed files with 25 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

13
surfsense_web/components/ui/animated-tabs.tsx
View file

@ -77,14 +77,14 @@ const XScrollable = forwardRef<
const dragging = useRef(false);
const startX = useRef(0);
const startScrollLeft = useRef(0);
const [scrollPos, setScrollPos] = useState<"start" | "middle" | "end">("start");
const [scrollPos, setScrollPos] = useState<"start" | "middle" | "end" | "none">("none");
const updateScrollPos = useCallback(() => {
const el = scrollRef.current;
if (!el) return;
const canScroll = el.scrollWidth > el.clientWidth + 1;
if (!canScroll) {
setScrollPos("start");
setScrollPos("none");
return;
}
const atStart = el.scrollLeft <= 2;
@ -130,9 +130,12 @@ const XScrollable = forwardRef<
updateScrollPos();
}, [updateScrollPos]);
const maskStart = scrollPos === "start" ? "black" : "transparent";
const maskEnd = scrollPos === "end" ? "black" : "transparent";
const maskImage = `linear-gradient(to right, ${maskStart}, black 24px, black calc(100% - 24px), ${maskEnd})`;
const needsMask = scrollPos !== "none";
const maskStart = scrollPos === "start" || scrollPos === "none" ? "black" : "transparent";
const maskEnd = scrollPos === "end" || scrollPos === "none" ? "black" : "transparent";
const maskImage = needsMask
? `linear-gradient(to right, ${maskStart}, black 24px, black calc(100% - 24px), ${maskEnd})`
: undefined;
return (
// biome-ignore lint/a11y/noStaticElementInteractions: drag-scroll container needs mouse events