forked from akai/readest
Huang Xin
ff4c03919b
Confirm Deletion (and the three other Alert callsites — clear annotations, delete files, book-detail delete) used to try to keep the icon/title/message and the Cancel/Confirm buttons in a single row. At narrow widths the row would flex-wrap and produce a cramped two-column shape with stacked buttons next to wrapped text — the case shown in the original PR thread's third screenshot. Rework the layout to always stack: * outer container is now `flex flex-col gap-3` instead of toggling between flex-row at sm+ and flex-col below. * top block: icon + title/message, items-start (icon nudged with `mt-0.5` so it baselines with the title). * bottom block: `flex items-center justify-end gap-2` — Cancel + Confirm always right-aligned on their own row. * Drop the daisyUI `alert` class. Its `display: grid` + `justify-items: center` was collapsing the actions row to content width and pulling it toward centre, which defeated `justify-end` the first time around. The styles I actually wanted (`bg-base-300 rounded-lg p-4 shadow-2xl`) were already explicit. * Replace the chain of viewport-relative max-widths with the more conventional `max-w-md sm:max-w-lg md:max-w-xl` cap so the capsule doesn't grow without bound on big monitors. * Drop the `text-center` flip — text stays left-aligned at every width, which matches the rest of the app. Color theme unchanged: blue `stroke-info` icon, `bg-base-300` surface, `btn-neutral` Cancel, `btn-warning` Confirm, `btn-sm` sizing. `useKeyDownActions` keyboard binding and `role='alert'` preserved. No callsite changes — the four consumers keep the same props. Verified visually at 1400 / 900 / 520 / 500 px viewports via `pnpm dev-web`; `pnpm test` (4389 passed) and `pnpm lint` (tsgo + biome) clean. Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>