feat: Settings uses the width of a wide screen: groups sit in two columns, each narrow enough that a row's control stays near its name (M503 #5595)

The content was capped at max-w-3xl, so a wide window showed one narrow
strip and a lot of empty space. SettingsColumns lays a page's groups out as
one column on a phone or narrow window and two side by side from xl up;
the page cap moves to 100rem so the columns don't stretch on a very wide
screen.

- Account: Android app, Profile and Password, with Signed-in devices beside.
- Playback: "Between tracks" (crossfade) beside "Volume leveling".
- Connections: ListenBrainz beside Subsonic apps.
- Appearance, Notifications, About: one column's width.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

web/src/lib/components/settings/SettingsColumns.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  // A settings page's groups laid out for the width it has (#5595 follow-up):
+  // one column on a phone or a narrow window, two side by side on a wide
+  // screen, so a wide window shows more at once instead of one narrow strip
+  // with empty space beside it. Each column stays narrow enough that a row's
+  // control sits near its name. `main` holds the groups read first; `side`
+  // the ones beside them (signed-in devices beside the profile, say). A
+  // page with only `main` keeps its groups to one column's width.
+
+  let { main, side }: { main: Snippet; side?: Snippet } = $props();
+</script>
+
+<div class="grid items-start gap-6 xl:grid-cols-2">
+  <div class="min-w-0 space-y-6">
+    {@render main()}
+  </div>
+  {#if side}
+    <div class="min-w-0 space-y-6">
+      {@render side()}
+    </div>
+  {/if}
+</div>

web/src/lib/components/settings/SettingsColumns.test.ts

@@ -0,0 +1,21 @@
+import { describe, expect, test } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
+import SettingsColumns from './SettingsColumns.svelte';
+
+const snip = (id: string) => createRawSnippet(() => ({ render: () => `<section data-testid="${id}"></section>` }));
+
+describe('SettingsColumns', () => {
+  test('main and side are two columns that sit side by side on a wide screen', () => {
+    render(SettingsColumns, { main: snip('main'), side: snip('side') });
+    const grid = screen.getByTestId('main').parentElement!.parentElement!;
+    expect(grid.className).toMatch(/xl:grid-cols-2/);
+    expect(grid.children).toHaveLength(2);
+    expect(screen.getByTestId('side').parentElement!.parentElement).toBe(grid);
+  });
+
+  test('with only main, the groups keep to one column', () => {
+    render(SettingsColumns, { main: snip('only') });
+    expect(screen.getByTestId('only').parentElement!.parentElement!.children).toHaveLength(1);
+  });
+});