fix(reader): keep New Chat button visible above Android nav bar and force theme contrast (#4287)

The floating 'New Chat' button in the chat history sidebar suffered from
two issues on mobile:

1. On Android (e.g. Pixel 9 with the gesture pill) the button rendered
   underneath the system navigation indicator because its position used
   plain bottom-4 with no safe-area inset.
2. With bg-base-300 / text-base-content the pill could collapse to a
   nearly invisible solid black shape under some themes / contexts where
   text-base-content was inherited as a near-background color, hiding
   the icon and label entirely.

Fixes:
- Offset the wrapper by env(safe-area-inset-bottom) + 1rem so the button
  sits above the Android gesture pill and iOS home indicator.
- Switch the button to bg-primary / text-primary-content with shadow-md
  to guarantee strong contrast across all themes.
- Add pointer-events-none on the positioning wrapper and pointer-events-auto
  on the button itself so the floating layer never blocks list interaction.
This commit is contained in:
loveheaven
2026-05-25 21:57:55 +08:00
committed by GitHub
parent 336a719e08
commit ca17131f2a
@@ -225,16 +225,26 @@ const ChatHistoryView: React.FC<ChatHistoryViewProps> = ({ bookKey }) => {
)}
</div>
{/* Floating New Chat button at bottom right */}
<div className='absolute bottom-4 right-4'>
{/* Floating New Chat button at bottom right.
Use safe-area-inset-bottom so it doesn't get hidden behind the
Android gesture pill / iOS home indicator on mobile.
Use btn-primary colors to guarantee a visible contrast across
both light and dark themes (previously bg-base-300 / text-base-content
could collapse to a near-invisible solid black pill on some themes). */}
<div
className='pointer-events-none absolute right-4'
style={{
bottom: 'calc(env(safe-area-inset-bottom, 0px) + 1rem)',
}}
>
<button
onClick={handleNewConversation}
className={clsx(
'flex items-center gap-2 rounded-full px-4 py-2',
'bg-base-300 text-base-content',
'hover:bg-base-content/10',
'border-base-content/10 border',
'shadow-sm',
'pointer-events-auto flex items-center gap-2 rounded-full px-4 py-2',
'bg-primary text-primary-content',
'hover:bg-primary/90',
'border-primary/20 border',
'shadow-md',
'transition-all duration-200 ease-out',
'active:scale-[0.97]',
)}