g/ember-market-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust chat UI padding for safe area insets

Browse Source 
Updated padding calculations in ChatDetail to account for device safe area insets, improving layout on devices with notches or rounded corners. This affects both the chat scroll container and the input area at the bottom.
This commit is contained in:
NotII
2025-10-28 11:07:07 +00:00
parent 130ecac208
commit fcba1a853d
1 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/dashboard/ChatDetail.tsx
View File

@@ -633,8 +633,9 @@ export default function ChatDetail({ chatId }: { chatId: string }) {
<div
ref={scrollContainerRef}
className={cn(
"flex-1 overflow-y-auto space-y-2 pb-[80px]",
isTouchDevice ? "p-3" : "p-2"
isTouchDevice
? "flex-1 overflow-y-auto space-y-2 p-3 pb-[calc(112px+env(safe-area-inset-bottom))]"
: "flex-1 overflow-y-auto space-y-2 p-2 pb-[calc(88px+env(safe-area-inset-bottom))]"
)}
role="log"
aria-label="Chat messages"
@@ -768,7 +769,8 @@ export default function ChatDetail({ chatId }: { chatId: string }) {
<div className={cn(
"absolute bottom-0 left-0 right-0 border-t border-border bg-background",
isTouchDevice ? "p-3" : "p-4"
isTouchDevice ? "p-3" : "p-4",
"pb-[env(safe-area-inset-bottom)]"
)}>
<form onSubmit={handleSendMessage} className="flex space-x-2">
<Input