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:
@@ -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]',
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user