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:
2026-03-23 21:25:01 +00:00
parent 96418c1c03
commit fbf30f9c73

View File

@@ -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}
>