fix(qa): ISSUE-001 — feedback panel bleeds on mobile due to Tailwind v4 translate
Tailwind v4's translate-x-full uses the CSS `translate` property instead of `transform: translateX()`. This caused the feedback panel to remain visually visible on the right edge of the viewport. Switch to inline transform style for reliable cross-browser behavior. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -130,12 +130,13 @@ export function FeedbackWidget() {
|
||||
ref={panelRef}
|
||||
className={cn(
|
||||
'fixed right-0 top-0 bottom-0 z-50 w-[280px] flex flex-col',
|
||||
'transition-transform duration-200 ease-out',
|
||||
open ? 'translate-x-0' : 'translate-x-full'
|
||||
'duration-200 ease-out',
|
||||
)}
|
||||
style={{
|
||||
background: 'var(--color-bg-card)',
|
||||
borderLeft: '1px solid var(--color-border-default)',
|
||||
transform: open ? 'translateX(0)' : 'translateX(100%)',
|
||||
transition: 'transform 200ms ease-out',
|
||||
}}
|
||||
aria-hidden={!open}
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user