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/routes/settings/about/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import SettingsColumns from '#lib/components/settings/SettingsColumns.svelte';
   import { pageTitle } from '#lib/branding.js';
   import { user } from '#lib/auth/user.svelte.js';
   import ServerVersion from '#lib/components/ServerVersion.svelte';
@@ -8,13 +9,17 @@
 
 <svelte:head><title>{pageTitle('Settings · About')}</title></svelte:head>
 
-<SettingsGroup title="About">
-  <SettingRow label="Server version">
-    <ServerVersion />
-  </SettingRow>
-  {#if user.value}
-    <SettingRow label="Signed in as">
-      <span class="text-sm text-text-secondary">{user.value.username}</span>
-    </SettingRow>
-  {/if}
-</SettingsGroup>
+<SettingsColumns>
+  {#snippet main()}
+    <SettingsGroup title="About">
+      <SettingRow label="Server version">
+        <ServerVersion />
+      </SettingRow>
+      {#if user.value}
+        <SettingRow label="Signed in as">
+          <span class="text-sm text-text-secondary">{user.value.username}</span>
+        </SettingRow>
+      {/if}
+    </SettingsGroup>
+  {/snippet}
+</SettingsColumns>