From fbf30f9c73e1d0fa68cdfb803989149729c59680 Mon Sep 17 00:00:00 2001 From: chihlasm Date: Mon, 23 Mar 2026 21:25:01 +0000 Subject: [PATCH] =?UTF-8?q?fix(qa):=20ISSUE-001=20=E2=80=94=20feedback=20p?= =?UTF-8?q?anel=20bleeds=20on=20mobile=20due=20to=20Tailwind=20v4=20transl?= =?UTF-8?q?ate?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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) --- frontend/src/components/common/FeedbackWidget.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/common/FeedbackWidget.tsx b/frontend/src/components/common/FeedbackWidget.tsx index 735cc4aa..fbb0e592 100644 --- a/frontend/src/components/common/FeedbackWidget.tsx +++ b/frontend/src/components/common/FeedbackWidget.tsx @@ -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} >