From fb9c9221823373474bcd8324e662a0f50db9a044 Mon Sep 17 00:00:00 2001
From: Test User <test@example.com>
Date: Fri, 24 Apr 2026 11:35:13 +0000
Subject: [PATCH] fix(GRO-766): fix portal mobile overflow at 390px viewport
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- CustomerPortal.tsx: change main from overflow-x-hidden to overflow-hidden
  to properly clip child overflow in both axes
- BillingPayments.tsx: add overflow-x-auto to tab button row so long
  button labels scroll instead of causing page-level overflow
- PetProfiles.tsx: already has overflow-x-auto on tab row — no change needed

Discovered in UAT by Shedward (DEF-2 and DEF-3 on GRO-754).

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 apps/web/src/portal/CustomerPortal.tsx           | 2 +-
 apps/web/src/portal/sections/BillingPayments.tsx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/portal/CustomerPortal.tsx b/apps/web/src/portal/CustomerPortal.tsx
index a542cc0..80be6cc 100644
--- a/apps/web/src/portal/CustomerPortal.tsx
+++ b/apps/web/src/portal/CustomerPortal.tsx
@@ -326,7 +326,7 @@ export function CustomerPortal() {
         )}
 
         {/* Main Content */}
-        <main className="flex-1 min-h-screen overflow-x-hidden">
+        <main className="flex-1 min-h-screen overflow-hidden">
           <div className="hidden md:flex items-center justify-between px-8 py-4 border-b border-stone-200 bg-white">
             <div>
               <h1 className="text-lg font-semibold text-stone-800">
diff --git a/apps/web/src/portal/sections/BillingPayments.tsx b/apps/web/src/portal/sections/BillingPayments.tsx
index 27709d1..b5c8a86 100644
--- a/apps/web/src/portal/sections/BillingPayments.tsx
+++ b/apps/web/src/portal/sections/BillingPayments.tsx
@@ -130,7 +130,7 @@ function BillingPaymentsInner({ sessionId, readOnly }: BillingPaymentsProps) {
         </div>
       )}
 
-      <div className="flex gap-2 flex-wrap">
+      <div className="flex gap-2 flex-wrap overflow-x-auto">
         {([
           { id: "invoices" as const, label: "Invoices", icon: DollarSign },
           { id: "payment" as const, label: "Payment Methods", icon: CreditCard },