From dac79d8bf9df737319157babca64305cad7ea100 Mon Sep 17 00:00:00 2001 From: TurtleWolfe Date: Fri, 31 Jul 2026 19:48:02 +0000 Subject: [PATCH] =?UTF-8?q?wip(#430):=20wrap=20the=20two=20admin=20tables?= =?UTF-8?q?=20in=20a=20padded=20sh-well=20=E2=80=94=20NOT=20YET=20VERIFIED?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The deferred half of #430. Both scrollers were a bare `
` at AdminPaymentPanel.tsx:216 and AdminMessagingOverview.tsx:173 — the line numbers in the ticket were accurate, unlike #373's, which drifted four times. `sh-well` paints an inset shadow BELOW its children, so it needs a padded parent: putting it on the `overflow-x-auto` div itself would clip the shadow inside the scroller and hide it under the table. So the scroller is WRAPPED by `sh-well rounded-lg p-2` rather than annotated. WHAT IS NOT VERIFIED, AND WHY THIS IS NOT PUSHED. I could not confirm the wells actually PAINT. Both routes are auth-gated and the E2E storage state at tests/e2e/fixtures/storage-state-auth.json is stale — with it loaded, /admin/payments redirects to the home page, so the components never render and a `.sh-well` query returns 0. That matters more than usual here: these two items were DEFERRED from #430 precisely because a sh-well with the wrong parent is a visual no-op, and "a class being present proves nothing about whether it renders" has been true four times in this session. Type-check clean and 35 component tests passing do not answer the question that was actually asked. Hit my own documented trap on the way: a `{/* comment */}` placed between `{cond ? (` and its element is two root nodes and a syntax error. The comment now sits above the ternary. Refs #430 — needs an authenticated visual check before this ships. --- .../AdminMessagingOverview.tsx | 59 +++++++----- .../AdminPaymentPanel/AdminPaymentPanel.tsx | 91 ++++++++++--------- 2 files changed, 81 insertions(+), 69 deletions(-) diff --git a/src/components/organisms/AdminMessagingOverview/AdminMessagingOverview.tsx b/src/components/organisms/AdminMessagingOverview/AdminMessagingOverview.tsx index 53031e15..f7dce3e4 100644 --- a/src/components/organisms/AdminMessagingOverview/AdminMessagingOverview.tsx +++ b/src/components/organisms/AdminMessagingOverview/AdminMessagingOverview.tsx @@ -169,33 +169,42 @@ export function AdminMessagingOverview({ />

Top Senders

+ {/* See AdminPaymentPanel: the well needs a padded parent around the + scroller, not on it (#430). The comment lives ABOVE the ternary — + a `{comment}` between `? (` and its element is two root nodes and a + syntax error, which is exactly what it was a moment ago. */} {(trends.top_senders ?? []).length > 0 ? ( -
- - - - - - - - - {(trends.top_senders ?? []).map((s) => ( - - - +
+
+
UserMessages
-
- {s.display_name ?? s.username ?? 'N/A'} -
- {s.username && s.display_name && ( -
- @{s.username} -
- )} - 		{s.messages}
+ + + + - ))} - -
UserMessages
+ + + {(trends.top_senders ?? []).map((s) => ( + + +
+ {s.display_name ?? s.username ?? 'N/A'} +
+ {s.username && s.display_name && ( +
+ @{s.username} +
+ )} + + {s.messages} + + ))} + + +
) : (

-

- - - - - - - - - - - - - {(trends.provider_breakdown ?? []).map((p) => { - const flagged = failureShare(p) > FAILURE_FLAG_THRESHOLD; - return ( - - - - - - - - - ); - })} - {(trends.provider_breakdown ?? []).length === 0 && ( + {/* The scroller is WRAPPED, not replaced (#430). `sh-well` paints an + inset shadow BELOW its children, so it needs a padded parent — put it + on the `overflow-x-auto` div itself and the shadow is clipped by the + scroller and hidden under the table. */} +
+
+
ProviderSucceededFailedRefundedRevenueHealth
{p.provider}{p.succeeded}{p.failed}{p.refunded}{formatCents(p.revenue_cents)} - {flagged ? ( - - Elevated failures - - ) : ( - OK - )} -
+ - + + + + + + - )} - -
- No activity in this range - ProviderSucceededFailedRefundedRevenueHealth
+ + + {(trends.provider_breakdown ?? []).map((p) => { + const flagged = failureShare(p) > FAILURE_FLAG_THRESHOLD; + return ( + + {p.provider} + {p.succeeded} + {p.failed} + {p.refunded} + {formatCents(p.revenue_cents)} + + {flagged ? ( + + Elevated failures + + ) : ( + OK + )} + + + ); + })} + {(trends.provider_breakdown ?? []).length === 0 && ( + + + No activity in this range + + + )} + + +
)}