From a1cb228d002f597c588fdb1f65cfed188ef6f4c2 Mon Sep 17 00:00:00 2001 From: Huang Xin Date: Thu, 28 May 2026 00:53:27 +0800 Subject: [PATCH] fix(library): wrap select-mode action bar on small screens (#4329) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Long translations (e.g. German "Gruppieren", "Löschen") pushed the 6-button action bar past the right edge on typical phones since the grid fallback only triggered below 350px. Switch to a 3x2 grid below sm: and clamp the container to the viewport width. Co-authored-by: Claude Opus 4.7 (1M context) --- .../src/app/library/components/SelectModeActions.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/apps/readest-app/src/app/library/components/SelectModeActions.tsx b/apps/readest-app/src/app/library/components/SelectModeActions.tsx index 94e787a1..700728ac 100644 --- a/apps/readest-app/src/app/library/components/SelectModeActions.tsx +++ b/apps/readest-app/src/app/library/components/SelectModeActions.tsx @@ -51,9 +51,9 @@ const SelectModeActions: React.FC = ({ className={clsx( 'text-base-content text-xs shadow-lg', 'not-eink:bg-base-300 eink:bg-base-100 eink:border eink:border-base-content', - 'mx-auto w-fit rounded-lg p-4', - 'flex items-center justify-center space-x-6', - 'max-[350px]:grid max-[350px]:grid-cols-3 max-[350px]:gap-x-10 max-[350px]:gap-y-2 max-[350px]:space-x-0', + 'mx-auto w-fit max-w-[calc(100vw-1rem)] rounded-lg p-4', + 'flex items-center justify-center gap-x-6', + 'max-sm:grid max-sm:grid-cols-3 max-sm:gap-x-6 max-sm:gap-y-3', )} >