From 19b31528dada0cda14ddfd43a3390ae434f8a42f Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Sun, 18 Jan 2026 19:16:41 +0100
Subject: [PATCH] Reduce manga page button sizes on small screens

Partially closes #1049
---
 src/features/manga/components/TrackMangaButton.tsx     | 3 ++-
 src/features/manga/components/details/MangaDetails.tsx | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/features/manga/components/TrackMangaButton.tsx b/src/features/manga/components/TrackMangaButton.tsx
index 23a2aa43..a43e415f 100644
--- a/src/features/manga/components/TrackMangaButton.tsx
+++ b/src/features/manga/components/TrackMangaButton.tsx
@@ -22,6 +22,7 @@ import { GetTrackersSettingsQuery, MangaType } from '@/lib/graphql/generated/gra
 import { GET_TRACKERS_SETTINGS } from '@/lib/graphql/tracker/TrackerQuery.ts';
 import { MangaTrackRecordInfo } from '@/features/manga/Manga.types.ts';
 import { AppRoutes } from '@/base/AppRoute.constants.ts';
+import { MediaQuery } from '@/base/utils/MediaQuery.tsx';
 
 export const TrackMangaButton = ({ manga }: { manga: MangaTrackRecordInfo & Pick<MangaType, 'title'> }) => {
     const { t } = useLingui();
@@ -54,7 +55,7 @@ export const TrackMangaButton = ({ manga }: { manga: MangaTrackRecordInfo & Pick
                 <>
                     <CustomButton
                         {...bindTrigger(popupState)}
-                        size="medium"
+                        size={MediaQuery.useIsMobileWidth() ? 'small' : 'medium'}
                         disabled={trackerList.loading || !!trackerList.error}
                         onClick={() => handleClick(popupState.open)}
                         variant={trackersInUse.length ? 'contained' : 'outlined'}
diff --git a/src/features/manga/components/details/MangaDetails.tsx b/src/features/manga/components/details/MangaDetails.tsx
index 4ac58de6..4d18c777 100644
--- a/src/features/manga/components/details/MangaDetails.tsx
+++ b/src/features/manga/components/details/MangaDetails.tsx
@@ -54,6 +54,7 @@ import { SearchLink } from '@/features/manga/components/details/SearchLink.tsx';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { IconBrowser } from '@/assets/icons/IconBrowser.tsx';
 import { IconWebView } from '@/assets/icons/IconWebView.tsx';
+import { MediaQuery } from '@/base/utils/MediaQuery.tsx';
 
 const DetailsWrapper = styled('div')(({ theme }) => ({
     display: 'flex',
@@ -274,7 +275,7 @@ export const MangaDetails = ({
                 </ThumbnailMetadataWrapper>
                 <MangaButtonsContainer>
                     <CustomButton
-                        size="medium"
+                        size={MediaQuery.useIsMobileWidth() ? 'small' : 'medium'}
                         onClick={updateLibraryState}
                         variant={manga.inLibrary ? 'contained' : 'outlined'}
                     >