fix(client): stop squishing the GG logomark on the PWA login splash (#564)

## Regression
The PWA login screen logo renders **horizontally squished** — the two
interlocking GG circles are crushed together. Reported during QA: "it
was not like that before."

## Root cause
`public/icon.png` is the wide horizontal GG logomark — **819 × 464
(~1.77:1)**, not a square icon. The PWA design-transition pass
([`d289a9567`](d289a9567))
added `h-24 w-24 sm:h-28 sm:w-28` to the logo `<img>`, forcing the wide
image into a **square box**. Those explicit CSS height+width values
overrode Tailwind preflight's `img { height: auto }` — which had been
preserving the aspect ratio — so the mark got compressed into 96×96 (and
112×112 at `sm`). The asset itself hasn't changed since #87, so this was
purely the CSS regression.

## Fix
- **`Splash.tsx` + `LoadingSplash.tsx`**: constrain height only — `h-24
w-auto sm:h-28` — so width follows the aspect ratio. This matches the
already-correct `SiteHeader` logo (`h-8 w-auto`). Both login-flow
splashes now use the identical treatment, so the login → loading
transition no longer jumps the logo's size or shape.
- Corrected the intrinsic size hint from the misleading square
`width={240} height={240}` to the asset's real `width={819}
height={464}` — a square hint reintroduces the same distortion via the
mapped aspect-ratio before the image loads.

## Verification
- **Brave proof @ 390px** (PWA viewport): rendered ratio **1.765 ==
natural ratio 1.765** (aspect preserved, no distortion); logo renders
169×96. Screenshot shows the round interlocking-circle mark presenting
cleanly.
- Client `Login` tests green (29/29); `bun lint` clean.

Separate from the admin work — small, self-contained client fix off
`develop`.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Author: Oba-One

docs/docs/builders/packages/client-pwa-token-audit.generated.md

@@ -91,12 +91,12 @@ Approved contrast exceptions:
 | `packages/client/src/components/Layout/AppBar.tsx:106` | `bg-primary` | contrast-exception | <code>&lt;span className="absolute -top-1 -right-1.5 min-w-4 h-4 flex items-center justify-center rounded-full bg-primary text-primary-accent-foreground text-[10px] font-bold leading-none px-1"&gt;</code> |
 | `packages/client/src/components/Layout/AppBar.tsx:106` | `text-primary-accent-foreground` | contrast-exception | <code>&lt;span className="absolute -top-1 -right-1.5 min-w-4 h-4 flex items-center justify-center rounded-full bg-primary text-primary-accent-foreground text-[10px] font-bold leading-none px-1"&gt;</code> |
 | `packages/client/src/components/Layout/AppBar.tsx:111` | `text-primary` | state | <code>&lt;p className=&#123;cn("text-sm", isActive &amp;&amp; "text-primary")&#125;&gt;&#123;title&#125;&lt;/p&gt;</code> |
-| `packages/client/src/components/Layout/Splash.tsx:112` | `text-primary` | accent | <code>&lt;h3 className=&#123;cn("text-center font-bold text-primary", effectsTransition)&#125;&gt;</code> |
-| `packages/client/src/components/Layout/Splash.tsx:154` | `border-primary` | state | <code>className="w-full px-4 py-3 rounded-full border border-stroke-soft-200 bg-bg-white-0 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary-alpha-24 text-center text-text-strong-950 placeholder:text-text-soft-400"</code> |
-| `packages/client/src/components/Layout/Splash.tsx:154` | `ring-primary-alpha-24` | state | <code>className="w-full px-4 py-3 rounded-full border border-stroke-soft-200 bg-bg-white-0 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary-alpha-24 text-center text-text-strong-950 placeholder:text-text-soft-400"</code> |
-| `packages/client/src/components/Layout/Splash.tsx:210` | `border-primary-alpha-24` | state | <code>"h-10 w-10 animate-spin rounded-full border-4 border-primary-alpha-24",</code> |
-| `packages/client/src/components/Layout/Splash.tsx:318` | `text-primary` | accent | <code>? "text-foreground hover:text-primary opacity-100"</code> |
-| `packages/client/src/components/Layout/Splash.tsx:334` | `text-primary` | accent | <code>? "text-foreground hover:text-primary opacity-100"</code> |
+| `packages/client/src/components/Layout/Splash.tsx:117` | `text-primary` | accent | <code>&lt;h3 className=&#123;cn("text-center font-bold text-primary", effectsTransition)&#125;&gt;</code> |
+| `packages/client/src/components/Layout/Splash.tsx:159` | `border-primary` | state | <code>className="w-full px-4 py-3 rounded-full border border-stroke-soft-200 bg-bg-white-0 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary-alpha-24 text-center text-text-strong-950 placeholder:text-text-soft-400"</code> |
+| `packages/client/src/components/Layout/Splash.tsx:159` | `ring-primary-alpha-24` | state | <code>className="w-full px-4 py-3 rounded-full border border-stroke-soft-200 bg-bg-white-0 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary-alpha-24 text-center text-text-strong-950 placeholder:text-text-soft-400"</code> |
+| `packages/client/src/components/Layout/Splash.tsx:215` | `border-primary-alpha-24` | state | <code>"h-10 w-10 animate-spin rounded-full border-4 border-primary-alpha-24",</code> |
+| `packages/client/src/components/Layout/Splash.tsx:323` | `text-primary` | accent | <code>? "text-foreground hover:text-primary opacity-100"</code> |
+| `packages/client/src/components/Layout/Splash.tsx:339` | `text-primary` | accent | <code>? "text-foreground hover:text-primary opacity-100"</code> |
 | `packages/client/src/components/Navigation/TopNav.tsx:215` | `bg-primary-action` | action | <code>className="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-toast focus:px-4 focus:py-2 focus:bg-primary-action focus:text-primary-action-foreground focus:rounded-lg focus:text-sm focus:font-medium"</code> |
 | `packages/client/src/components/Navigation/TopNav.tsx:215` | `text-primary-action-foreground` | action | <code>className="sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-toast focus:px-4 focus:py-2 focus:bg-primary-action focus:text-primary-action-foreground focus:rounded-lg focus:text-sm focus:font-medium"</code> |
 | `packages/client/src/components/Public/atoms/EditorialAtoms.tsx:59` | `text-primary-dark` | accent | <code>return &lt;em className=&#123;cn("font-serif italic text-primary-dark", className)&#125;&gt;&#123;children&#125;&lt;/em&gt;;</code> |
@@ -212,8 +212,8 @@ Approved contrast exceptions:
 | `packages/client/src/views/Home/WalletDrawer/CookieJarTab.tsx:121` | `border-primary-base` | state | <code>className="w-full rounded-md border border-stroke-sub-300 bg-bg-white-0 px-3 py-2.5 text-sm text-text-strong-950 placeholder:text-text-soft-400 focus:border-primary-base focus:outline-none focus:ring-2 focus:ring-primary-base/20 resize-none"</code> |
 | `packages/client/src/views/Home/WalletDrawer/CookieJarTab.tsx:121` | `ring-primary-base` | state | <code>className="w-full rounded-md border border-stroke-sub-300 bg-bg-white-0 px-3 py-2.5 text-sm text-text-strong-950 placeholder:text-text-soft-400 focus:border-primary-base focus:outline-none focus:ring-2 focus:ring-primary-base/20 resize-none"</code> |
 | `packages/client/src/views/Home/WorkDashboard/WorkListTab.tsx:93` | `text-primary` | state | <code>className="inline-flex items-center gap-2 rounded-[var(--radius-md)] border border-stroke-soft-200 px-3 py-1.5 text-sm font-medium text-primary transition-colors duration-[var(--spring-effects-fast-duration)] ease-[var(--spring-effects-fast-easing)] hover:bg-bg-weak-50 disabled:opacity-50"</code> |
-| `packages/client/src/views/Login/components/LoadingSplash.tsx:44` | `text-primary` | state | <code>&lt;h3 className="text-center font-bold text-primary transition-colors duration-[var(--spring-effects-fast-duration)] ease-[var(--spring-effects-fast-easing)]"&gt;</code> |
-| `packages/client/src/views/Login/components/LoadingSplash.tsx:53` | `border-primary-alpha-24` | state | <code>"h-10 w-10 animate-spin rounded-full border-4 border-primary-alpha-24",</code> |
+| `packages/client/src/views/Login/components/LoadingSplash.tsx:46` | `text-primary` | state | <code>&lt;h3 className="text-center font-bold text-primary transition-colors duration-[var(--spring-effects-fast-duration)] ease-[var(--spring-effects-fast-easing)]"&gt;</code> |
+| `packages/client/src/views/Login/components/LoadingSplash.tsx:55` | `border-primary-alpha-24` | state | <code>"h-10 w-10 animate-spin rounded-full border-4 border-primary-alpha-24",</code> |
 | `packages/client/src/views/Profile/AccountInfo.tsx:80` | `text-primary` | accent | <code>&lt;div className="flex items-center justify-center text-center mx-auto text-primary"&gt;</code> |
 | `packages/client/src/views/Profile/AccountInfo.tsx:122` | `text-primary` | accent | <code>&lt;div className="flex items-center justify-center text-center mx-auto text-primary"&gt;</code> |
 | `packages/client/src/views/Profile/AppSettings.tsx:144` | `text-primary` | accent | <code>&lt;div className="flex items-center justify-center text-center mx-auto text-primary"&gt;</code> |

packages/client/src/components/Layout/Splash.tsx

@@ -96,10 +96,15 @@ export const Splash: React.FC<SplashProps> = ({
           <img
             src="/icon.png"
             alt={APP_NAME}
-            width={240}
-            height={240}
+            // The logomark is a wide horizontal GG (819×464). Constrain the
+            // height and let the width follow the aspect ratio — `w-24`/`w-28`
+            // forced it into a square box and crushed it (the intrinsic size
+            // hint must match the asset, not a 240×240 square, or the box
+            // squishes the same way).
+            width={819}
+            height={464}
             className={cn(
-              "h-24 w-24 sm:h-28 sm:w-28 transition-opacity duration-[var(--spring-effects-slow-duration)] ease-[var(--spring-effects-slow-easing)]",
+              "h-24 w-auto sm:h-28 transition-opacity duration-[var(--spring-effects-slow-duration)] ease-[var(--spring-effects-slow-easing)]",
               loadingState && "animate-pulse"
             )}
           />

packages/client/src/views/Login/components/LoadingSplash.tsx

@@ -34,9 +34,11 @@ export function LoadingSplash({ loadingState, message }: LoadingSplashProps) {
           <img
             src="/icon.png"
             alt={APP_NAME}
-            width={240}
-            height={240}
-            className="animate-pulse transition-opacity duration-[var(--spring-effects-slow-duration)] ease-[var(--spring-effects-slow-easing)]"
+            // Same wide GG logomark + treatment as Splash so the login →
+            // loading transition doesn't jump the logo's size or shape.
+            width={819}
+            height={464}
+            className="h-24 w-auto sm:h-28 animate-pulse transition-opacity duration-[var(--spring-effects-slow-duration)] ease-[var(--spring-effects-slow-easing)]"
           />
         </div>