fix(webui): stabilize profile artwork

webui/src/app.css

@@ -696,6 +696,40 @@
   }
 }
 
+@media (min-width: 761px) and (max-width: 1000px) {
+  .app-shell {
+    grid-template-columns: 5rem minmax(0, 1fr);
+  }
+
+  .sidebar {
+    padding: 1rem 0.65rem;
+  }
+
+  .brand {
+    justify-content: center;
+  }
+
+  .brand > span:last-child,
+  .profile > div:nth-child(2) {
+    display: none;
+  }
+
+  .sidebar nav a {
+    justify-content: center;
+    padding: 0;
+    font-size: 0;
+  }
+
+  .sidebar nav a span {
+    font-size: 1rem;
+  }
+
+  .profile {
+    grid-template-columns: 1fr;
+    justify-items: center;
+  }
+}
+
 @media (max-width: 760px) {
   .app-shell {
     grid-template-columns: 1fr;
@@ -704,20 +738,36 @@
 
   .sidebar {
     position: fixed;
+    display: grid;
     z-index: 10;
     top: auto;
     right: 0;
     bottom: 0;
     left: 0;
     height: auto;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
     border-top: 1px solid var(--color-edge);
     border-right: 0;
     padding: 0.55rem max(0.55rem, env(safe-area-inset-right))
       max(0.55rem, env(safe-area-inset-bottom)) max(0.55rem, env(safe-area-inset-left));
   }
 
-  .brand,
+  .brand {
+    display: none;
+  }
+
   .profile {
+    display: grid;
+    grid-template-columns: auto;
+    gap: 0;
+    margin: 0 0 0 0.35rem;
+    border: 0;
+    padding: 0;
+  }
+
+  .profile > div:nth-child(2),
+  .profile > button {
     display: none;
   }
 

webui/src/routes/[...path]/+page.svelte

@@ -114,6 +114,7 @@
     error = "";
     try {
       session = await auth.login(username, password, rememberMe);
+      avatarFailed = false;
       password = "";
       liveUpdates.connect();
     } catch (cause) {

webui/tests/parity.e2e.ts

@@ -37,7 +37,10 @@ const schema = {
 const responses: Record<string, unknown> = {
   "/api/admin/auth/me": {
     authenticated: true, backend: "Jellyfin",
-    user: { id: "user", name: "Tester", isAdministrator: true },
+    user: {
+      id: "user", name: "Tester", isAdministrator: true,
+      avatarUrl: "/api/admin/auth/me/avatar?user=user",
+    },
   },
   "/api/admin/ui/schema": schema,
   "/api/admin/status": { version: "test", backendType: "Jellyfin" },
@@ -482,3 +485,26 @@ test("Playlist details use a responsive dialog and track rows open mapping revie
   await expect(page).toHaveURL(/#\/library\/mappings\?search=Test%20song&review=snapshot$/);
   await expect(page.getByRole("dialog", { name: "Test song" })).toBeVisible();
 });
+
+test("Profile artwork is stable in full, slim, and mobile navigation", async ({ page }) => {
+  await mockApi(page);
+  await page.route("**/api/admin/auth/me/avatar?user=user", (route) => route.fulfill({
+    status: 200,
+    contentType: "image/gif",
+    body: Buffer.from("R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==", "base64"),
+  }));
+
+  for (const width of [1280, 850, 390]) {
+    await page.setViewportSize({ width, height: 844 });
+    await page.goto("#/");
+    const avatar = page.locator(".profile .avatar");
+    await expect(avatar).toBeVisible();
+    await expect(avatar.locator("img")).toBeVisible();
+    await expect.poll(async () => (await avatar.boundingBox())?.width ?? 0).toBe(40);
+  }
+
+  await page.route("**/api/admin/auth/me/avatar?user=user", (route) => route.fulfill({ status: 404 }));
+  await page.reload();
+  await expect(page.locator(".profile .avatar span")).toHaveText("T");
+  await expect.poll(async () => (await page.locator(".profile .avatar").boundingBox())?.width ?? 0).toBe(40);
+});