fix(scrollbar): consistent scrollbar styling across Firefox and Chromium browsers (Windows)

[reniko]

That one was a little harder. My detail knowledge about CSS is a little limited so that one is much more done with Claude. Fell free to merge, adjust, send back or recect this PR.

Problem

Scrollbars were visually inconsistent across browsers:

• Chrome/Edge: no styled scrollbar on most scrollable containers — the OS-standard scrollbar was shown instead of the app-styled one.
• Firefox: scrollbar-width: auto !important in globals.css overrode hide-scrollbar's scrollbar-width: none, causing scrollbars to appear where they were explicitly hidden.
• KanbanCardDetail modal: both scroll panes were not scrollable in Firefox/Edge after a previous change introduced a wrapper div around children.

Root cause

Chrome 121+ changed behaviour: if scrollbar-width is set on an element, Chrome ignores all ::-webkit-scrollbar pseudo-element rules and uses the standard API instead, falling back to the native OS scrollbar on Windows.

The existing globals.css set scrollbar-width: auto !important without a browser guard, which broke the webkit-styled scrollbars in Chromium. The same effect was triggered by tailwind-scrollbar plugin classes (scrollbar-thin, scrollbar-thumb-* etc.) — these also set scrollbar-width on the element.

For KanbanCardDetail: Modal.tsx wraps children in a bare <div className=""> for size="default", which broke the flex height chain needed by the two-pane layout.

Changes

globals.css

• Moved scrollbar-width: thin + scrollbar-color inside @supports (-moz-appearance: none) (Firefox-only guard), so Firefox gets styled scrollbars without triggering Chrome's standard-API path.
• Rewrote the ::-webkit-scrollbar block to cover .overflow-y-auto, .overflow-x-auto, .overflow-auto, and .scrollbar-thin consistently — 6 px width, primary/0.3 thumb, transparent track, no scrollbar buttons.
• Removed the old scrollbar-width: auto !important rule that was breaking hide-scrollbar in Firefox.

KanbanCardDetail.tsx

• Switched to size="fullscreen" on <Modal> — this wraps children in flex-1 overflow-auto instead of a bare div, restoring the flex chain.
• Inner container uses min-h-full (not flex-1) since the fullscreen wrapper is not itself a flex container.
• Both scroll panes use overflow-y-auto without the lg: responsive prefix — the globals.css webkit rules target .overflow-y-auto exactly; the responsive variant .lg\:overflow-y-auto is a different class name and would not match.

ChecklistHome.tsx / NotesHome.tsx

• Removed hide-scrollbar from main containers. With the corrected global scrollbar styling, hidden scrollbars on these containers caused visual inconsistency with the rest of the app where scrollbars are now consistently visible and styled.

SidebarWrapper.tsx / Kanban.tsx

• Removed tailwind-scrollbar plugin classes (scrollbar-thin, scrollbar-thumb-*, scrollbar-track-*, scrollbar-*-rounded-md). These set scrollbar-width on the element, which triggers Chrome 121+'s standard-API path and causes the webkit rules in globals.css to be ignored. The global styles already cover .overflow-y-auto and .overflow-auto, so the plugin classes are redundant.

Minor visual change: KanbanCardDetail modal header

Using size="fullscreen" changes the modal header from p-6 padding + mb-6 separator to p-3 border-b — a tighter, more compact look. This is a side effect of the existing fullscreen variant in Modal.tsx and is intentional in this PR; happy to address the original header style separately if preferred.

Tested

• Chrome / Edge (Chromium): scrollbars visible, styled, no layout regressions in Sidebar, Kanban board, KanbanCardDetail (both panes), ChecklistHome, NotesHome.
• Firefox: scrollbars styled and thin via @supports guard; hide-scrollbar works again where used.