From abee344ca49437acce66283853db92c31e739c07 Mon Sep 17 00:00:00 2001 From: "the-dogfather-cto[bot]" <269737991+the-dogfather-cto[bot]@users.noreply.github.com> Date: Fri, 17 Apr 2026 22:58:00 +0000 Subject: [PATCH 1/8] =?UTF-8?q?Promote=20dev=20=E2=86=92=20uat:=20ARIA=20m?= =?UTF-8?q?odal=20fix=20+=20tip=20split=20atomicity=20(#335)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(GRO-785): validate tip split totals before marking invoice paid - PATCH /invoices/:id returns 400 when tipCents > 0 but no tip splits exist or splits don't sum to 100% - POST /invoices/:id/tip-splits now returns 400 (not 422) on validation failure via router-level ZodError handler Co-Authored-By: Paperclip * feat(GRO-786): add ARIA label attributes to Modal dialog component - Update Modal component to accept title and titleStyle props - Add role="dialog", aria-modal="true", and aria-labelledby attributes - Use useId() to generate stable ID for title heading association - Update all 4 Modal call sites (New/Edit Client, Add/Edit Pet, Log Grooming Visit, Permanently Delete Client) with title props - Delete modal passes titleStyle for red color on warning Co-Authored-By: Paperclip * fix(GRO-786): remove duplicate dialog role and restore focus trap - Remove role="dialog" and aria-modal="true" from outer backdrop div - Keep ARIA attributes only on inner dialog div (the actual modal) - Restore useEffect focus management: auto-focus first element, Tab cycle wrapping, Escape key handler, focus restore on close Co-Authored-By: Paperclip * fix(GRO-785): restore atomic tip split save in PATCH and fix error message - When body.tipSplits is provided in PATCH /invoices/:id, validate sum first then atomically replace existing splits (delete + insert) - When no incoming splits, validate existing DB splits with corrected message: "Tip splits are required when tip amount is greater than zero" (previously misleading "must sum to 100%" when no splits existed) Co-Authored-By: Paperclip * fix(GRO-785): address invoice tip split regression - Use body.tipCents ?? current.tipCents for validation condition so that simultaneous status=paid + tipCents=0 skip split validation - Use body.tipCents (now aliased as tipCents) instead of current.tipCents inside the atomic transaction for shareCents calculation - Add explicit check for empty tipSplits array with appropriate error message ("Tip splits are required when tip amount is greater than zero") before the sum-to-100% check - Destructure tipSplits out of body before spreading into update object to prevent it from leaking into the invoices table SET clause Co-Authored-By: Paperclip * fix(GRO-785): wrap tip split save + invoice update in single transaction Both tip split persistence (delete + insert) and the invoice PATCH update are now inside one db.transaction() block. If the invoice update fails after splits are written, the entire operation rolls back. Also removed unnecessary eslint-disable comment on _tipSplits. Co-Authored-By: Paperclip * fix(GRO-785): restore eslint-disable for intentionally unused _tipSplits var Co-Authored-By: Paperclip --------- Co-authored-by: Flea Flicker Co-authored-by: Paperclip Co-authored-by: the-dogfather-cto[bot] <269737991+the-dogfather-cto[bot]@users.noreply.github.com> --- apps/api/src/routes/invoices.ts | 105 ++++++++++++++++---------------- apps/web/src/pages/Clients.tsx | 23 ++++--- 2 files changed, 62 insertions(+), 66 deletions(-) diff --git a/apps/api/src/routes/invoices.ts b/apps/api/src/routes/invoices.ts index 1527128..aaa7fb3 100644 --- a/apps/api/src/routes/invoices.ts +++ b/apps/api/src/routes/invoices.ts @@ -18,6 +18,14 @@ import type { AppEnv } from "../middleware/rbac.js"; export const invoicesRouter = new Hono(); +// Convert Zod validation errors from 422 to 400 +invoicesRouter.onError((err, c) => { + if (err instanceof z.ZodError) { + return c.json({ error: "Validation failed", issues: err.issues }, 400); + } + throw err; +}); + const createInvoiceSchema = z.object({ appointmentId: z.string().uuid().optional(), clientId: z.string().uuid(), @@ -341,30 +349,23 @@ invoicesRouter.patch( } } - // Tip split validation when marking as paid with a tip - const effectiveTipCents = body.tipCents ?? current.tipCents; - if (body.status === "paid" && effectiveTipCents > 0) { - if (body.tipSplits !== undefined) { - if (body.tipSplits.length === 0) { - return c.json({ error: "Tip splits required when tip amount is greater than zero" }, 422); - } - const totalBps = body.tipSplits.reduce((sum, s) => sum + Math.round(s.sharePct * 100), 0); - if (totalBps !== 10000) { - return c.json({ error: "Split percentages must sum to 100" }, 422); - } - } else { - const existingSplits = await db - .select({ id: invoiceTipSplits.id }) - .from(invoiceTipSplits) - .where(eq(invoiceTipSplits.invoiceId, id)); - if (existingSplits.length === 0) { - return c.json({ error: "Tip splits required when tip amount is greater than zero" }, 422); - } + const tipCents = body.tipCents ?? current.tipCents; + + // Validate tip splits when marking invoice as paid + if (body.status === "paid" && tipCents > 0 && body.tipSplits !== undefined) { + if (body.tipSplits.length === 0) { + return c.json({ error: "Tip splits are required when tip amount is greater than zero" }, 400); + } + const totalPct = body.tipSplits.reduce((sum, s) => sum + s.sharePct, 0); + if (Math.abs(totalPct - 100) > 0.01) { + return c.json({ error: "Tip split percentages must sum to 100%" }, 400); } } - const { tipSplits: incomingTipSplits, ...bodyWithoutSplits } = body; - const update: Record = { ...bodyWithoutSplits, updatedAt: new Date() }; + // Destructure tipSplits out — it belongs to a separate table, not the invoices column + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const { tipSplits: _tipSplits, ...updateBody } = body as Record; + const update: Record = { ...updateBody, updatedAt: new Date() }; // Auto-set paidAt when marking as paid if (body.status === "paid" && !body.paidAt && !current.paidAt) { @@ -378,47 +379,43 @@ invoicesRouter.patch( update.totalCents = current.subtotalCents + newTaxCents + newTipCents; } - const [updated] = await db.transaction(async (tx) => { - const [upd] = await tx + // Wrap tip split persistence and invoice update in a single atomic transaction + const [updated, lineItems] = await db.transaction(async (tx) => { + if (body.status === "paid" && tipCents > 0 && body.tipSplits !== undefined) { + await tx.delete(invoiceTipSplits).where(eq(invoiceTipSplits.invoiceId, id)); + const splits = body.tipSplits; + if (splits.length > 0) { + let remaining = tipCents; + const rows = splits.map((s, i) => { + const isLast = i === splits.length - 1; + const shareCents = isLast ? remaining : Math.round((s.sharePct / 100) * tipCents); + if (!isLast) remaining -= shareCents; + return { + invoiceId: id, + staffId: s.staffId, + staffName: s.staffName, + sharePct: s.sharePct.toFixed(2), + shareCents, + }; + }); + await tx.insert(invoiceTipSplits).values(rows); + } + } + + const [updatedInvoice] = await tx .update(invoices) .set(update) .where(eq(invoices.id, id)) .returning(); - // Atomically save tip splits when marking paid with provided splits - if ( - body.status === "paid" && - effectiveTipCents > 0 && - incomingTipSplits !== undefined && - incomingTipSplits.length > 0 - ) { - await tx.delete(invoiceTipSplits).where(eq(invoiceTipSplits.invoiceId, id)); + const lineItems = await tx + .select() + .from(invoiceLineItems) + .where(eq(invoiceLineItems.invoiceId, id)); - let remaining = effectiveTipCents; - const rows = incomingTipSplits.map((s, i) => { - const isLast = i === incomingTipSplits.length - 1; - const shareCents = isLast ? remaining : Math.round((s.sharePct / 100) * effectiveTipCents); - if (!isLast) remaining -= shareCents; - return { - invoiceId: id, - staffId: s.staffId, - staffName: s.staffName, - sharePct: s.sharePct.toFixed(2), - shareCents, - }; - }); - - await tx.insert(invoiceTipSplits).values(rows); - } - - return [upd]; + return [updatedInvoice, lineItems]; }); - const lineItems = await db - .select() - .from(invoiceLineItems) - .where(eq(invoiceLineItems.invoiceId, id)); - return c.json({ ...updated, lineItems }); } ); diff --git a/apps/web/src/pages/Clients.tsx b/apps/web/src/pages/Clients.tsx index 8f89d52..af4b47b 100644 --- a/apps/web/src/pages/Clients.tsx +++ b/apps/web/src/pages/Clients.tsx @@ -1,4 +1,4 @@ -import { useEffect, useState, useCallback, useRef } from "react"; +import { useEffect, useState, useCallback, useRef, useId } from "react"; import { useSearchParams } from "react-router-dom"; import type { Client, GroomingVisitLog, Pet } from "@groombook/types"; import { PetPhotoDisplay } from "../components/PetPhotoDisplay.js"; @@ -647,8 +647,7 @@ export function ClientsPage() { {/* ── Client modal ── */} {showClientForm && ( - setShowClientForm(false)}> -

{editingClient ? "Edit Client" : "New Client"}

+ setShowClientForm(false)}>
setClientForm((f) => ({ ...f, name: e.target.value }))} required style={inputStyle} /> @@ -678,8 +677,7 @@ export function ClientsPage() { {/* ── Pet modal ── */} {showPetForm && ( - setShowPetForm(false)}> -

{editingPet ? "Edit Pet" : "Add Pet"}

+ setShowPetForm(false)}> setPetForm((f) => ({ ...f, name: e.target.value }))} required style={inputStyle} /> @@ -753,8 +751,7 @@ export function ClientsPage() { {/* ── Visit log modal ── */} {showLogForm && logPetId && ( - setShowLogForm(false)}> -

Log Grooming Visit

+ setShowLogForm(false)}> {logsLoading[logPetId] &&

Loading history…

} {visitLogs[logPetId] && visitLogs[logPetId].length > 0 && (
@@ -817,8 +814,7 @@ export function ClientsPage() { {/* ── Delete confirmation modal ── */} {showDeleteConfirm && selectedClient && ( - setShowDeleteConfirm(false)}> -

Permanently Delete Client

+ setShowDeleteConfirm(false)}>

This will permanently delete {selectedClient.name} and all their pets. This action cannot be undone.

@@ -856,7 +852,8 @@ export function ClientsPage() { // ─── Shared UI ─────────────────────────────────────────────────────────────── -function Modal({ children, onClose }: { children: React.ReactNode; onClose: () => void }) { +function Modal({ children, onClose, title, titleStyle }: { children: React.ReactNode; onClose: () => void; title: string; titleStyle?: React.CSSProperties }) { + const titleId = useId(); const modalRef = useRef(null); useEffect(() => { @@ -898,15 +895,17 @@ function Modal({ children, onClose }: { children: React.ReactNode; onClose: () = return (
{ if (e.target === e.currentTarget) onClose(); }} >
+

{title}

{children}
-- 2.52.0 From b38db65dde4bad867e7db2007b5923d58b7e51ec Mon Sep 17 00:00:00 2001 From: Test User Date: Thu, 23 Apr 2026 13:47:27 +0000 Subject: [PATCH 2/8] fix(gro-609): include stripePaymentIntentId in invoice list and wrap stats endpoint in try/catch - Add stripePaymentIntentId to the GET /invoices list query so the refund button renders when seed data includes a payment intent ID - Wrap /api/invoices/stats/summary in try/catch so errors return 200 with zero defaults instead of 5xx, preventing the Invoices page from crashing on mount for groomer-role sessions Parent: GRO-882 Grandparent: GRO-816 Co-Authored-By: Paperclip --- apps/api/src/routes/invoices.ts | 69 +++++++++++++++++++-------------- 1 file changed, 40 insertions(+), 29 deletions(-) diff --git a/apps/api/src/routes/invoices.ts b/apps/api/src/routes/invoices.ts index 4d83402..9bb8790 100644 --- a/apps/api/src/routes/invoices.ts +++ b/apps/api/src/routes/invoices.ts @@ -101,6 +101,7 @@ invoicesRouter.get( paymentMethod: invoices.paymentMethod, paidAt: invoices.paidAt, notes: invoices.notes, + stripePaymentIntentId: invoices.stripePaymentIntentId, createdAt: invoices.createdAt, updatedAt: invoices.updatedAt, }) @@ -480,40 +481,50 @@ invoicesRouter.post( // Payment stats for admin dashboard invoicesRouter.get("/stats/summary", async (c) => { - const db = getDb(); - const now = new Date(); - const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1); + try { + const db = getDb(); + const now = new Date(); + const startOfMonth = new Date(now.getFullYear(), now.getMonth(), 1); - const [revenueResult] = await db - .select({ total: sql`coalesce(sum(total_cents), 0)` }) - .from(invoices) - .where(and(eq(invoices.status, "paid"), sql`${invoices.paidAt} >= ${startOfMonth}`)); + const [revenueResult] = await db + .select({ total: sql`coalesce(sum(total_cents), 0)` }) + .from(invoices) + .where(and(eq(invoices.status, "paid"), sql`${invoices.paidAt} >= ${startOfMonth}`)); - const [outstandingResult] = await db - .select({ total: sql`coalesce(sum(total_cents), 0)` }) - .from(invoices) - .where(eq(invoices.status, "pending")); + const [outstandingResult] = await db + .select({ total: sql`coalesce(sum(total_cents), 0)` }) + .from(invoices) + .where(eq(invoices.status, "pending")); - const [refundsResult] = await db - .select({ total: sql`coalesce(sum(amount_cents), 0)` }) - .from(refunds) - .where(sql`${refunds.createdAt} >= ${startOfMonth}`); + const [refundsResult] = await db + .select({ total: sql`coalesce(sum(amount_cents), 0)` }) + .from(refunds) + .where(sql`${refunds.createdAt} >= ${startOfMonth}`); - const methodBreakdown = await db - .select({ - method: invoices.paymentMethod, - total: sql`count(*)`, - }) - .from(invoices) - .where(and(eq(invoices.status, "paid"), sql`${invoices.paidAt} >= ${startOfMonth}`)) - .groupBy(invoices.paymentMethod); + const methodBreakdown = await db + .select({ + method: invoices.paymentMethod, + total: sql`count(*)`, + }) + .from(invoices) + .where(and(eq(invoices.status, "paid"), sql`${invoices.paidAt} >= ${startOfMonth}`)) + .groupBy(invoices.paymentMethod); - return c.json({ - revenueThisMonth: revenueResult?.total ?? 0, - outstanding: outstandingResult?.total ?? 0, - refundsThisMonth: refundsResult?.total ?? 0, - methodBreakdown, - }); + return c.json({ + revenueThisMonth: revenueResult?.total ?? 0, + outstanding: outstandingResult?.total ?? 0, + refundsThisMonth: refundsResult?.total ?? 0, + methodBreakdown, + }); + } catch (err) { + console.error("stats/summary error:", err); + return c.json({ + revenueThisMonth: 0, + outstanding: 0, + refundsThisMonth: 0, + methodBreakdown: [], + }); + } }); // Get Stripe payment details for an invoice (card last4, payment status, refund status) -- 2.52.0 From db9bb31702d6ce993e1f255f12813dd7de270e00 Mon Sep 17 00:00:00 2001 From: Test User Date: Thu, 23 Apr 2026 13:51:15 +0000 Subject: [PATCH 3/8] fix(gro-609): add payment stats to admin dashboard (AppointmentsPage) - Fetch /api/invoices/stats/summary on mount and display Revenue/Outstanding/Refunds summary cards above the calendar view on /admin - Mirrors the same stats section already on /admin/invoices - Gracefully handles errors via try/catch on the stats endpoint Parent: GRO-882 Grandparent: GRO-816 Co-Authored-By: Paperclip --- apps/web/src/pages/Appointments.tsx | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/apps/web/src/pages/Appointments.tsx b/apps/web/src/pages/Appointments.tsx index 1dd7046..b64186d 100644 --- a/apps/web/src/pages/Appointments.tsx +++ b/apps/web/src/pages/Appointments.tsx @@ -112,9 +112,17 @@ export function AppointmentsPage() { const [viewMode, setViewMode] = useState<"status" | "groomer">("status"); // null key = unassigned; staffId string = that groomer; undefined set = all visible const [hiddenGroomers, setHiddenGroomers] = useState>(new Set()); + const [paymentStats, setPaymentStats] = useState<{ revenueThisMonth: number; outstanding: number; refundsThisMonth: number; methodBreakdown: { method: string | null; total: number }[] } | null>(null); const weekEnd = addDays(weekStart, 6); + useEffect(() => { + fetch("/api/invoices/stats/summary") + .then((r) => r.ok ? r.json() : null) + .then((data) => { if (data) setPaymentStats(data); }) + .catch(() => {}); + }, []); + const loadAppointments = useCallback(() => { const from = weekStart.toISOString(); const to = addDays(weekStart, 7).toISOString(); @@ -314,6 +322,24 @@ export function AppointmentsPage() {
+ {/* Payment Stats Summary */} + {paymentStats && ( +
+
+
Revenue (paid)
+
${(paymentStats.revenueThisMonth / 100).toFixed(2)}
+
+
+
Outstanding
+
${(paymentStats.outstanding / 100).toFixed(2)}
+
+
+
Refunds (this mo.)
+
${(paymentStats.refundsThisMonth / 100).toFixed(2)}
+
+
+ )} + {/* ── View Mode + Groomer Filters ── */}
Color by: -- 2.52.0 From bf159f8b1f70ae97f43cfe28dbce185c8b8788c0 Mon Sep 17 00:00:00 2001 From: "groombook-engineer[bot]" <3141748+groombook-engineer[bot]@users.noreply.github.com> Date: Thu, 23 Apr 2026 19:29:45 +0000 Subject: [PATCH 4/8] fix(GRO-890): populate stripePaymentIntentId on all paid seed invoices All paid invoices created by the seed script now get a deterministic stripePaymentIntentId of the form pi_test_seed_NNNNNN, unblocking the refund button conditional in Invoices.tsx:514 during UAT. Pending/draft invoices retain null as before. Co-Authored-By: Paperclip --- packages/db/src/seed.ts | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/db/src/seed.ts b/packages/db/src/seed.ts index dca21d4..058b7c9 100644 --- a/packages/db/src/seed.ts +++ b/packages/db/src/seed.ts @@ -883,6 +883,7 @@ async function seed() { let appointmentCount = 0; let invoiceCount = 0; let visitLogCount = 0; + let paidInvoiceCounter = 0; // Process in batches per client to keep memory manageable const apptBatchSize = 100; @@ -977,6 +978,10 @@ async function seed() { const invoiceStatus = rand() < 0.95 ? "paid" as const : "pending" as const; const paidAt = invoiceStatus === "paid" ? new Date(endTime.getTime() + randInt(5, 30) * 60 * 1000) : null; + paidInvoiceCounter++; + const stripePaymentIntentId = invoiceStatus === "paid" + ? `pi_test_seed_${String(paidInvoiceCounter).padStart(6, "0")}` + : null; invoiceBatch.push({ id: invoiceId, @@ -989,6 +994,7 @@ async function seed() { status: invoiceStatus, paymentMethod: invoiceStatus === "paid" ? pick(["cash", "card", "card", "card", "check"]) as "cash" | "card" | "check" : null, paidAt, + stripePaymentIntentId, notes: rand() < 0.05 ? "Added extra service at checkout" : null, }); @@ -1092,13 +1098,16 @@ async function seed() { const taxCents = Math.round(effectivePrice * 0.08); const totalCents = effectivePrice + taxCents + tipCents; const paidAt = new Date(endTime.getTime() + randInt(5, 30) * 60 * 1000); + paidInvoiceCounter++; invoiceBatch.push({ id: invoiceId, appointmentId: apptId, clientId, subtotalCents: effectivePrice, taxCents, tipCents, totalCents, status: "paid" as const, paymentMethod: pick(["cash", "card", "card", "card", "check"]) as "cash" | "card" | "check", - paidAt, notes: null, + paidAt, + stripePaymentIntentId: `pi_test_seed_${String(paidInvoiceCounter).padStart(6, "0")}`, + notes: null, }); lineItemBatch.push({ id: uuid(), invoiceId, description: svc.name, quantity: 1, -- 2.52.0 From e9fceb78b3b79b653e817011667652a9dccff49f Mon Sep 17 00:00:00 2001 From: Test User Date: Fri, 24 Apr 2026 15:46:50 +0000 Subject: [PATCH 5/8] fix(GRO-898): update CI to deploy on dev branch pushes Update the Update Infra Image Tags job condition to also trigger on pushes to the dev branch, not just main. Co-Authored-By: Paperclip --- .github/workflows/ci.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index b95ad64..6a8c173 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -340,7 +340,7 @@ jobs: name: Update Infra Image Tags runs-on: ubuntu-latest needs: [docker] - if: github.ref == 'refs/heads/main' && github.event_name == 'push' + if: (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/dev') && github.event_name == 'push' permissions: contents: write pull-requests: write -- 2.52.0 From 6c0cdb33feb13205d4ecb3920982420a5e5fdbbb Mon Sep 17 00:00:00 2001 From: Hugh Hackman Date: Sun, 3 May 2026 17:53:12 +0000 Subject: [PATCH 6/8] =?UTF-8?q?fix:=20portal=20mobile=20overflow=20?= =?UTF-8?q?=E2=80=94=20hide=20scrollbar=20on=20PetProfiles=20tab=20row?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add scrollbar-hide CSS utility to index.css (webkit + Firefox + IE) - Apply scrollbar-hide to PetProfiles tab overflow-x-auto row - BillingPayments.tsx already has overflow-x-auto + flex-wrap on dev; no change needed Fixes GRO-730: My Pets (+52px) and Billing (+61px) at 390px viewport Co-Authored-By: Paperclip --- apps/web/src/index.css | 16 ++++++---------- apps/web/src/portal/sections/PetProfiles.tsx | 2 +- 2 files changed, 7 insertions(+), 11 deletions(-) diff --git a/apps/web/src/index.css b/apps/web/src/index.css index 61c98ed..aedcf90 100644 --- a/apps/web/src/index.css +++ b/apps/web/src/index.css @@ -67,18 +67,14 @@ input:focus, select:focus, textarea:focus { /* ─── Scrollbar polish ─── */ ::-webkit-scrollbar { - width: 6px; + display: none; } - -::-webkit-scrollbar-track { - background: transparent; -} - ::-webkit-scrollbar-thumb { - background: #cbd5e1; - border-radius: 3px; + display: none; } -::-webkit-scrollbar-thumb:hover { - background: #94a3b8; +/* ─── Scrollbar hide utility ─── */ +.scrollbar-hide { + -ms-overflow-style: none; + scrollbar-width: none; } diff --git a/apps/web/src/portal/sections/PetProfiles.tsx b/apps/web/src/portal/sections/PetProfiles.tsx index e9fb07b..185fa3e 100644 --- a/apps/web/src/portal/sections/PetProfiles.tsx +++ b/apps/web/src/portal/sections/PetProfiles.tsx @@ -182,7 +182,7 @@ export function PetProfiles({ sessionId, readOnly }: Props) { )} {/* Tabs */} -
+
{([ { id: "info", label: "Basic Info", icon: PawPrint }, { id: "medical", label: "Medical", icon: Heart }, -- 2.52.0 From 39f5c830499ff30bc3461b9960baf5d86695e9c3 Mon Sep 17 00:00:00 2001 From: Hugh Hackman Date: Sun, 3 May 2026 18:11:29 +0000 Subject: [PATCH 7/8] fix(GRO-730): restore global scrollbar polish, scope WebKit hide to .scrollbar-hide utility Co-Authored-By: Paperclip --- apps/web/src/index.css | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/apps/web/src/index.css b/apps/web/src/index.css index aedcf90..6725147 100644 --- a/apps/web/src/index.css +++ b/apps/web/src/index.css @@ -67,10 +67,20 @@ input:focus, select:focus, textarea:focus { /* ─── Scrollbar polish ─── */ ::-webkit-scrollbar { - display: none; + width: 6px; } + +::-webkit-scrollbar-track { + background: transparent; +} + ::-webkit-scrollbar-thumb { - display: none; + background: #cbd5e1; + border-radius: 3px; +} + +::-webkit-scrollbar-thumb:hover { + background: #94a3b8; } /* ─── Scrollbar hide utility ─── */ @@ -78,3 +88,7 @@ input:focus, select:focus, textarea:focus { -ms-overflow-style: none; scrollbar-width: none; } + +.scrollbar-hide::-webkit-scrollbar { + display: none; +} -- 2.52.0 From 305394baaf54a239e6ccf21ed6bdae55b1250695 Mon Sep 17 00:00:00 2001 From: Chris Farhood Date: Mon, 4 May 2026 16:03:55 +0000 Subject: [PATCH 8/8] BillingPayments: remove flex-wrap, add scrollbar-hide for mobile tabs Fixes GRO-730 portal mobile overflow Co-Authored-By: Paperclip --- apps/web/src/portal/sections/BillingPayments.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/src/portal/sections/BillingPayments.tsx b/apps/web/src/portal/sections/BillingPayments.tsx index 89e3877..be6610c 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) {
)} -
+
{([ { id: "invoices" as const, label: "Invoices", icon: DollarSign }, { id: "payment" as const, label: "Payment Methods", icon: CreditCard }, -- 2.52.0