ChoChoX/suwayomi-material-you-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Set scrollbar height

Browse Source
This commit is contained in:
schroda
2024-09-06 23:32:42 +02:00
parent f0701ff03a
commit 99c7614b7b
2 changed files with 5 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/chapter/ChapterList.tsx
View File

@@ -45,11 +45,11 @@ import { Mangas } from '@/lib/data/Mangas';
import { useNavBarContext } from '@/components/context/NavbarContext.tsx'; import { useNavBarContext } from '@/components/context/NavbarContext.tsx';
import { useResizeObserver } from '@/util/useResizeObserver.tsx'; import { useResizeObserver } from '@/util/useResizeObserver.tsx';
import { MediaQuery } from '@/lib/ui/MediaQuery.tsx'; import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
import { SCROLLBAR_WIDTH } from '@/theme.ts'; import { SCROLLBAR_SIZE } from '@/theme.ts';
const ChapterListHeader = styled(Stack)(({ theme }) => ({ const ChapterListHeader = styled(Stack)(({ theme }) => ({
padding: theme.spacing(1), padding: theme.spacing(1),
paddingRight: `calc(${SCROLLBAR_WIDTH}px + ${theme.spacing(1)})`, paddingRight: `calc(${SCROLLBAR_SIZE}px + ${theme.spacing(1)})`,
paddingBottom: 0, paddingBottom: 0,
[theme.breakpoints.down('md')]: { [theme.breakpoints.down('md')]: {
paddingRight: theme.spacing(1), paddingRight: theme.spacing(1),

5
src/theme.ts
View File

@@ -19,7 +19,7 @@ import { ThemeMode } from '@/components/context/ThemeModeContext.tsx';
import { MediaQuery } from '@/lib/ui/MediaQuery.tsx'; import { MediaQuery } from '@/lib/ui/MediaQuery.tsx';
import { AppTheme } from '@/lib/ui/AppThemes.ts'; import { AppTheme } from '@/lib/ui/AppThemes.ts';
export const SCROLLBAR_WIDTH = 14; export const SCROLLBAR_SIZE = 14;
export const createTheme = ( export const createTheme = (
themeMode: ThemeMode, themeMode: ThemeMode,
@@ -82,7 +82,8 @@ export const createTheme = (
MuiCssBaseline: { MuiCssBaseline: {
styleOverrides: ` styleOverrides: `
*::-webkit-scrollbar { *::-webkit-scrollbar {
width: ${SCROLLBAR_WIDTH}px; width: ${SCROLLBAR_SIZE}px;
height: ${SCROLLBAR_SIZE}px;
} }
*::-webkit-scrollbar-thumb { *::-webkit-scrollbar-thumb {
border: 4px solid rgba(0, 0, 0, 0); border: 4px solid rgba(0, 0, 0, 0);