From d0889d52505e207b917fe0b3491d596a5c91fcb9 Mon Sep 17 00:00:00 2001
From: nntrivi2001 <vinnt@smartgift.vn>
Date: Tue, 3 Nov 2026 13:05:49 +0700
Subject: [PATCH] fix(pet): the pet window no longer scrolls sideways

The status chips' row needs ~340 px; the window was 320 and its body's
overflow-y:auto made x scrollable too, so a horizontal scrollbar showed
and Clear alerts was cut. 22rem wide (capped to the viewport), x hidden.
---
 client/src/components/Sagi/PetPanel.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Sagi/PetPanel.tsx b/client/src/components/Sagi/PetPanel.tsx
index d0527640..3e2f0f49 100644
--- a/client/src/components/Sagi/PetPanel.tsx
+++ b/client/src/components/Sagi/PetPanel.tsx
@@ -32,7 +32,7 @@ export function PetPanel({
   const { t } = useTranslation("settings");
   return (
     <div
-      className="pet-chat flex max-h-[calc(100vh-6rem)] w-80 flex-col overflow-hidden rounded-3xl border border-border-light shadow-2xl animate-slide-up"
+      className="pet-chat flex max-h-[calc(100vh-6rem)] w-[22rem] max-w-[calc(100vw-2rem)] flex-col overflow-hidden rounded-3xl border border-border-light shadow-2xl animate-slide-up"
       role="dialog"
       aria-label={t("sagi.panel.label", { name })}
     >
@@ -54,7 +54,9 @@ export function PetPanel({
           <X size={16} />
         </button>
       </div>
-      <div className="overflow-y-auto">{info}</div>
+      {/* Vertical only: an auto overflow-y makes x scrollable too, and the
+          status chips' row then showed a horizontal scrollbar. */}
+      <div className="min-w-0 overflow-y-auto overflow-x-hidden">{info}</div>
     </div>
   );
 }