Fix reader desktop nav bar page/chapter select rtl styling

This commit is contained in:
schroda
2026-07-10 23:42:49 +02:00
parent ba9c69b693
commit 54616caf7a
2 changed files with 6 additions and 2 deletions

View File

@@ -26,6 +26,7 @@ import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
import type { ReaderStateChapters } from '@/features/reader/Reader.types.ts';
import { withPropsFrom } from '@/base/hoc/withPropsFrom.tsx';
import type { ChapterIdInfo } from '@/features/chapter/Chapter.types.ts';
import { useTheme } from '@mui/material/styles';
const BaseReaderNavBarDesktopChapterNavigation = ({
currentChapterId,
@@ -43,6 +44,7 @@ const BaseReaderNavBarDesktopChapterNavigation = ({
readerThemeDirection: ReturnType<typeof ReaderService.useGetThemeDirection>;
}) => {
const { t } = useLingui();
const theme = useTheme();
const popupState = usePopupState({ variant: 'popover', popupId: 'reader-nav-bar-desktop-chapter-list' });
@@ -60,7 +62,7 @@ const BaseReaderNavBarDesktopChapterNavigation = ({
}}
disabled={getOptionForDirection(!previousChapter, !nextChapter, readerThemeDirection)}
/>
<FormControl sx={{ flexBasis: '70%', flexGrow: 0, flexShrink: 0 }}>
<FormControl sx={{ flexBasis: '70%', flexGrow: 0, flexShrink: 0 }} dir={theme.direction}>
<InputLabel id="reader-nav-bar-desktop-chapter-select">{t`Chapter`}</InputLabel>
<Select
{...bindTrigger(popupState)}

View File

@@ -19,9 +19,11 @@ import { ReaderNavBarDesktopNextPreviousButton } from '@/features/reader/overlay
import { READING_DIRECTION_TO_THEME_DIRECTION } from '@/features/reader/settings/ReaderSettings.constants.tsx';
import { useReaderPagesStore, useReaderSettingsStore } from '@/features/reader/stores/ReaderStore.ts';
import { ReaderControls } from '@/features/reader/services/ReaderControls.ts';
import { useTheme } from '@mui/material/styles';
const BaseReaderNavBarDesktopPageNavigation = () => {
const { t } = useLingui();
const theme = useTheme();
const getOptionForDirection = useGetOptionForDirection();
const { currentPageIndex, pages } = useReaderPagesStore('currentPageIndex', 'pages');
const readingDirection = useReaderSettingsStore((state) => state.readingDirection.value);
@@ -41,7 +43,7 @@ const BaseReaderNavBarDesktopPageNavigation = () => {
)}
onClick={() => ReaderControls.openPage('previous', undefined, false)}
/>
<FormControl sx={{ flexBasis: '70%', flexGrow: 0, flexShrink: 0 }}>
<FormControl sx={{ flexBasis: '70%', flexGrow: 0, flexShrink: 0 }} dir={theme.direction}>
<InputLabel id="reader-nav-bar-desktop-page-select">{t`Page`}</InputLabel>
<Select
labelId="reader-nav-bar-desktop-page-select"