docs: dedicated Arch Linux host+client guide

Every other distro has a full Host Setup page; Arch only had table rows. Add
docs/arch.md (signed pacman binary repo: key import + repo + install, GPU
prereqs, service/linger, web console, client, PKGBUILD appendix), slot it into
the nav after fedora-kde, and point the install/client tables at it. Update the
client-install rows from 'from the PKGBUILD' to the binary repo now that it exists.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

clients/decky/src/index.tsx

@@ -80,7 +80,7 @@ const QamPanel: FC = () => {
       {/* Pinned games — the "jump straight into Playnite" rows. Pin games from a host's
           picker (fullscreen page → host row → games button). */}
       {pins.pins.length > 0 && (
-        <PanelSection title="Games">
+        <PanelSection title="Pinned Games">
           {pins.pins.map((pin) => {
             const { online } = resolvePinHost(pin, hosts);
             return (

clients/decky/src/library.tsx

@@ -3,13 +3,14 @@
 // can take seconds, hence the explicit spinner copy) and pins titles as one-tap rows in
 // the QAM's Games section; its header also launches the GTK client's on-screen gamepad
 // library (`--browse`).
-import { DialogButton, Field, Focusable, ModalRoot, Spinner, showModal } from "@decky/ui";
-import { CSSProperties, FC, useEffect, useState } from "react";
+import { DialogButton, Field, ModalRoot, Spinner, showModal } from "@decky/ui";
+import { FC, useEffect, useState } from "react";
 import { FaThLarge, FaTv } from "react-icons/fa";
 import { GameEntry, Host, library, LibraryResult, PinnedGame } from "./backend";
 import { PinsApi, resolvePinHost, startBrowse, startStream } from "./hooks";
 import { isSafeLaunchId } from "./steam";
 import { PairModal } from "./pair";
+import { RowActions, actionButton } from "./ui";
 
 /** Human store tag (mirrors the GTK client's `store_label`). */
 export function storeLabel(store: string): string {
@@ -58,12 +59,6 @@ export function streamPin(pin: PinnedGame, live: Host[], pins: PinsApi): void {
   void startStream(host, { launchId: pin.game_id }, pin.title);
 }
 
-const pickButton: CSSProperties = {
-  width: "fit-content",
-  minWidth: "5em",
-  flexShrink: 0,
-};
-
 // Copy per backend error code (LibraryResult.error); `detail` covers the generic case.
 function errorCopy(res: LibraryResult): string {
   switch (res.error) {
@@ -143,16 +138,18 @@ export const GamePickerModal: FC<{
         description="Browse this host's games with the controller, full screen"
         childrenContainerWidth="max"
       >
-        <DialogButton
-          style={pickButton}
-          onClick={() => {
-            closeModal?.();
-            void startBrowse(host);
-          }}
-        >
-          <FaTv style={{ marginRight: "0.4em" }} />
-          Open
-        </DialogButton>
+        <RowActions>
+          <DialogButton
+            style={actionButton}
+            onClick={() => {
+              closeModal?.();
+              void startBrowse(host);
+            }}
+          >
+            <FaTv style={{ marginRight: "0.4em" }} />
+            Open
+          </DialogButton>
+        </RowActions>
       </Field>
 
       {clientUpdatePending && (
@@ -177,10 +174,10 @@ export const GamePickerModal: FC<{
 
       {result !== null && !result.ok && (
         <Field label="Couldn't fetch the library" description={errorCopy(result)} childrenContainerWidth="max">
-          <Focusable style={{ display: "flex", gap: "0.5em", justifyContent: "flex-end" }}>
+          <RowActions>
             {result.error === "not-paired" && (
               <DialogButton
-                style={pickButton}
+                style={actionButton}
                 onClick={() =>
                   showModal(<PairModal host={host} onPaired={() => setAttempt((n) => n + 1)} />)
                 }
@@ -188,10 +185,10 @@ export const GamePickerModal: FC<{
                 Pair
               </DialogButton>
             )}
-            <DialogButton style={pickButton} onClick={() => setAttempt((n) => n + 1)}>
+            <DialogButton style={actionButton} onClick={() => setAttempt((n) => n + 1)}>
               Retry
             </DialogButton>
-          </Focusable>
+          </RowActions>
         </Field>
       )}
 
@@ -217,10 +214,12 @@ export const GamePickerModal: FC<{
                 }
                 childrenContainerWidth="max"
               >
-                <DialogButton style={pickButton} disabled={!safe} onClick={() => togglePin(g)}>
-                  <FaThLarge style={{ marginRight: "0.4em" }} />
-                  {pinned ? "Unpin" : "Pin"}
-                </DialogButton>
+                <RowActions>
+                  <DialogButton style={actionButton} disabled={!safe} onClick={() => togglePin(g)}>
+                    <FaThLarge style={{ marginRight: "0.4em" }} />
+                    {pinned ? "Unpin" : "Pin"}
+                  </DialogButton>
+                </RowActions>
               </Field>
             );
           })}

clients/decky/src/page.tsx

@@ -10,6 +10,7 @@ import {
   showModal,
   staticClasses,
 } from "@decky/ui";
+import { RowActions, actionButton, iconButton } from "./ui";
 import { toaster } from "@decky/api";
 import { CSSProperties, FC, useState } from "react";
 import {
@@ -58,27 +59,6 @@ const tabScroll: CSSProperties = {
   boxSizing: "border-box",
 };
 
-// DialogButton stretches to 100% width in the gamepad UI — on a fullscreen row that means a
-// screen-wide button. Size action buttons to their content instead (right-aligned by the
-// Field's children container).
-const actionButton: CSSProperties = {
-  width: "fit-content",
-  minWidth: "6em",
-  flexShrink: 0,
-};
-// Square icon-only button (details ⓘ, header back arrow) — needs an explicit height too, or
-// the zero padding collapses it to the icon's line height.
-const iconButton: CSSProperties = {
-  width: "40px",
-  minWidth: "40px",
-  height: "40px",
-  padding: 0,
-  flexShrink: 0,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-};
-
 // ----------------------------------------------------------------------------------------
 // Host details — everything the mDNS advert told us, incl. the fingerprint to cross-check
 // against the host's own log / web console before trusting it.
@@ -144,7 +124,7 @@ const HostRow: FC<{ host: Host; onPaired: () => void; onGames: () => void }> = (
       }`}
       childrenContainerWidth="max"
     >
-      <Focusable style={{ display: "flex", gap: "0.5em", justifyContent: "flex-end" }}>
+      <RowActions>
         <DialogButton
           style={iconButton}
           onClick={() => showModal(<HostDetailsModal host={host} />)}
@@ -153,13 +133,13 @@ const HostRow: FC<{ host: Host; onPaired: () => void; onGames: () => void }> = (
         </DialogButton>
         {/* Labeled, not icon-only: this is the entry to the game picker AND the on-screen
             library browser, and controller nav has no hover tooltip to explain a bare icon. */}
-        <DialogButton style={{ ...actionButton, minWidth: "6em" }} onClick={onGames}>
+        <DialogButton style={actionButton} onClick={onGames}>
           <FaThLarge style={{ marginRight: "0.4em" }} />
           Games
         </DialogButton>
         {needsPair && (
           <DialogButton
-            style={{ ...actionButton, minWidth: "5em" }}
+            style={actionButton}
             onClick={() => showModal(<PairModal host={host} onPaired={onPaired} />)}
           >
             Pair
@@ -178,7 +158,7 @@ const HostRow: FC<{ host: Host; onPaired: () => void; onGames: () => void }> = (
           <FaPlay style={{ marginRight: "0.4em" }} />
           Stream
         </DialogButton>
-      </Focusable>
+      </RowActions>
     </Field>
   );
 };
@@ -201,14 +181,16 @@ const HostsTab: FC<{
       childrenContainerWidth="max"
       bottomSeparator={hosts.length ? "standard" : "none"}
     >
-      <DialogButton style={{ ...actionButton, minWidth: "8em" }} disabled={scanning} onClick={refresh}>
-        {scanning ? (
-          <Spinner style={{ height: "1em", marginRight: "0.5em" }} />
-        ) : (
-          <FaSyncAlt style={{ marginRight: "0.5em" }} />
-        )}
-        {scanning ? "Scanning…" : "Refresh"}
-      </DialogButton>
+      <RowActions>
+        <DialogButton style={actionButton} disabled={scanning} onClick={refresh}>
+          {scanning ? (
+            <Spinner style={{ height: "1em", marginRight: "0.5em" }} />
+          ) : (
+            <FaSyncAlt style={{ marginRight: "0.5em" }} />
+          )}
+          {scanning ? "Scanning…" : "Refresh"}
+        </DialogButton>
+      </RowActions>
     </Field>
 
     {hosts.length === 0 && !scanning && (
@@ -251,18 +233,18 @@ const HostsTab: FC<{
               }${pin.paired ? "" : " · pairing required"}`}
               childrenContainerWidth="max"
             >
-              <Focusable style={{ display: "flex", gap: "0.5em", justifyContent: "flex-end" }}>
+              <RowActions>
                 <DialogButton style={actionButton} onClick={() => streamPin(pin, hosts, pins)}>
                   <FaPlay style={{ marginRight: "0.4em" }} />
                   Play
                 </DialogButton>
                 <DialogButton
-                  style={{ ...actionButton, minWidth: "5em" }}
+                  style={actionButton}
                   onClick={() => pins.removePin(pin.host_fp, pin.game_id)}
                 >
                   Remove
                 </DialogButton>
-              </Focusable>
+              </RowActions>
             </Field>
           );
         })}
@@ -306,13 +288,15 @@ const AboutTab: FC<{
       }
       childrenContainerWidth="max"
     >
-      <DialogButton
-        style={{ ...actionButton, minWidth: "11em" }}
-        disabled={checking}
-        onClick={() => void checkForUpdatesNow(check)}
-      >
-        {checking ? <Spinner style={{ height: "1em" }} /> : "Check for updates"}
-      </DialogButton>
+      <RowActions>
+        <DialogButton
+          style={actionButton}
+          disabled={checking}
+          onClick={() => void checkForUpdatesNow(check)}
+        >
+          {checking ? <Spinner style={{ height: "1em" }} /> : "Check for updates"}
+        </DialogButton>
+      </RowActions>
     </Field>
     {hasUpdate(update) && (
       <Field
@@ -326,13 +310,12 @@ const AboutTab: FC<{
         description="Installing can take a couple of minutes; Decky reloads the plugin when done"
         childrenContainerWidth="max"
       >
-        <DialogButton
-          style={{ ...actionButton, minWidth: "9em" }}
-          onClick={() => applyUpdate(update!, check)}
-        >
-          <FaDownload style={{ marginRight: "0.4em" }} />
-          Update
-        </DialogButton>
+        <RowActions>
+          <DialogButton style={actionButton} onClick={() => applyUpdate(update!, check)}>
+            <FaDownload style={{ marginRight: "0.4em" }} />
+            Update
+          </DialogButton>
+        </RowActions>
       </Field>
     )}
     <Field
@@ -340,13 +323,15 @@ const AboutTab: FC<{
       description="Hosts, pairing, controllers, and troubleshooting — docs.punktfunk.unom.io"
       childrenContainerWidth="max"
     >
-      <DialogButton
-        style={{ ...actionButton, minWidth: "8em" }}
-        onClick={() => Navigation.NavigateToExternalWeb(DOCS_URL)}
-      >
-        <FaExternalLinkAlt style={{ marginRight: "0.4em" }} />
-        Open
-      </DialogButton>
+      <RowActions>
+        <DialogButton
+          style={actionButton}
+          onClick={() => Navigation.NavigateToExternalWeb(DOCS_URL)}
+        >
+          <FaExternalLinkAlt style={{ marginRight: "0.4em" }} />
+          Open
+        </DialogButton>
+      </RowActions>
     </Field>
     <Field
       focusable={false}
@@ -358,9 +343,11 @@ const AboutTab: FC<{
       description="Force-stop the stream client if a session wedges"
       childrenContainerWidth="max"
     >
-      <DialogButton style={{ ...actionButton, minWidth: "8em" }} onClick={() => void forceStopStream()}>
-        Force-stop
-      </DialogButton>
+      <RowActions>
+        <DialogButton style={actionButton} onClick={() => void forceStopStream()}>
+          Force-stop
+        </DialogButton>
+      </RowActions>
     </Field>
   </div>
 );
@@ -399,16 +386,21 @@ const PunktfunkPage: FC = () => {
         </div>
       </Focusable>
 
-      {/* overflow:hidden is load-bearing: Valve's Tabs slides the incoming panel in from the
-          right on L1/R1, and with autoFocusContents it scrollIntoViews a control inside that
-          still-offscreen panel. Without a clip here the scroll pans #GamepadUI itself — the whole
-          Steam UI (top bar included) slides left until you click a tab. Valve's own Tabs always
-          live in a clipped flex box; match that. */}
+      {/* Two things fight each other on an L1/R1 tab switch:
+          1. Valve's Tabs slides the incoming panel in from the right with a CSS transform.
+          2. `autoFocusContents` then focuses a control inside that still-offscreen panel, which
+             fires scrollIntoView. Because the panel is offset by a *transform* (not by scroll
+             position), scrollIntoView can't satisfy it by scrolling any one ancestor, so it walks
+             up and pans the whole page — the "screen jumps right, then animates back" glitch.
+          Dropping autoFocusContents removes the scrollIntoView entirely, so nothing fights the
+          slide. L1/R1 still cycles tabs (that handler lives on the Tabs focus scope, active while
+          focus is anywhere inside — including the tab strip); after a switch, focus stays on the
+          strip and Down enters the content, which is how Steam's own tabbed pages behave.
+          The overflow:hidden clip stays as defense-in-depth against any stray horizontal pan. */}
       <div style={{ flex: 1, minHeight: 0, overflow: "hidden" }}>
         <Tabs
           activeTab={tab}
           onShowTab={(id: string) => setTab(id)}
-          autoFocusContents
           tabs={[
             {
               id: "hosts",

clients/decky/src/settings.tsx

@@ -2,8 +2,20 @@
 // the flatpak client's JSON (main.py set_settings), which the client reads on launch. The
 // accepted gamepad/compositor names mirror punktfunk-core's `*Pref::from_name`.
 import { Dropdown, Field, SliderField, Spinner, ToggleField } from "@decky/ui";
-import { FC, useEffect, useState } from "react";
+import { CSSProperties, FC, useEffect, useState } from "react";
 import { getSettings, setSettings, StreamSettings } from "./backend";
+import { RowActions } from "./ui";
+
+// Decky's Dropdown has no width prop — it fills whatever container it's in, and a
+// `childrenContainerWidth="max"` Field is the whole row. Wrapping it in this fit-content shell
+// (inside the right-aligned RowActions) shrinks the control to its selected label, with a floor
+// so short values like "60 Hz" don't collapse to a nub and a ceiling so nothing runs edge to
+// edge. Matches the right-aligned, content-sized buttons everywhere else.
+const selectShell: CSSProperties = {
+  width: "fit-content",
+  minWidth: "10em",
+  maxWidth: "24em",
+};
 
 const RESOLUTIONS: [number, number, string][] = [
   [0, 0, "Native display"],
@@ -61,21 +73,29 @@ export const SettingsSection: FC = () => {
         description="The host creates a virtual output at exactly this size"
         childrenContainerWidth="max"
       >
-        <Dropdown
-          rgOptions={RESOLUTIONS.map(([, , label], i) => ({ data: i, label }))}
-          selectedOption={resIdx}
-          onChange={(o) => {
-            const [w, h] = RESOLUTIONS[o.data as number];
-            patch({ width: w, height: h });
-          }}
-        />
+        <RowActions>
+          <div style={selectShell}>
+            <Dropdown
+              rgOptions={RESOLUTIONS.map(([, , label], i) => ({ data: i, label }))}
+              selectedOption={resIdx}
+              onChange={(o) => {
+                const [w, h] = RESOLUTIONS[o.data as number];
+                patch({ width: w, height: h });
+              }}
+            />
+          </div>
+        </RowActions>
       </Field>
       <Field label="Refresh rate" childrenContainerWidth="max">
-        <Dropdown
-          rgOptions={REFRESH.map((r) => ({ data: r, label: r === 0 ? "Native" : `${r} Hz` }))}
-          selectedOption={s.refresh_hz}
-          onChange={(o) => patch({ refresh_hz: o.data as number })}
-        />
+        <RowActions>
+          <div style={selectShell}>
+            <Dropdown
+              rgOptions={REFRESH.map((r) => ({ data: r, label: r === 0 ? "Native" : `${r} Hz` }))}
+              selectedOption={s.refresh_hz}
+              onChange={(o) => patch({ refresh_hz: o.data as number })}
+            />
+          </div>
+        </RowActions>
       </Field>
       <SliderField
         label="Bitrate"
@@ -93,11 +113,15 @@ export const SettingsSection: FC = () => {
         description="Which virtual controller the host creates for your inputs"
         childrenContainerWidth="max"
       >
-        <Dropdown
-          rgOptions={GAMEPADS.map((g) => ({ data: g, label: GAMEPAD_LABELS[g] ?? g }))}
-          selectedOption={s.gamepad}
-          onChange={(o) => patch({ gamepad: o.data as string })}
-        />
+        <RowActions>
+          <div style={selectShell}>
+            <Dropdown
+              rgOptions={GAMEPADS.map((g) => ({ data: g, label: GAMEPAD_LABELS[g] ?? g }))}
+              selectedOption={s.gamepad}
+              onChange={(o) => patch({ gamepad: o.data as string })}
+            />
+          </div>
+        </RowActions>
       </Field>
       {(s.gamepad === "steamdeck" || s.gamepad === "auto") && (
         <Field
@@ -110,11 +134,15 @@ export const SettingsSection: FC = () => {
         description="Which compositor backend the host uses for the virtual display — Automatic suits almost every host"
         childrenContainerWidth="max"
       >
-        <Dropdown
-          rgOptions={COMPOSITORS.map((c) => ({ data: c, label: COMPOSITOR_LABELS[c] ?? c }))}
-          selectedOption={s.compositor}
-          onChange={(o) => patch({ compositor: o.data as string })}
-        />
+        <RowActions>
+          <div style={selectShell}>
+            <Dropdown
+              rgOptions={COMPOSITORS.map((c) => ({ data: c, label: COMPOSITOR_LABELS[c] ?? c }))}
+              selectedOption={s.compositor}
+              onChange={(o) => patch({ compositor: o.data as string })}
+            />
+          </div>
+        </RowActions>
       </Field>
       <ToggleField
         label="Stream microphone"

clients/decky/src/ui.tsx

@@ -0,0 +1,46 @@
+// Shared UI primitives for the fullscreen page + modals. The one rule that keeps every row
+// looking consistent: a Field's action(s) always sit right-aligned, with real space between
+// them and the label text — never hugging it.
+//
+// Decky lays a Field out as `[ label .......... children ]`. When the children container is
+// grown (`childrenContainerWidth="max"`, which we want so multi-button clusters have room), a
+// bare `fit-content` button LEFT-aligns inside that grown container and ends up pressed against
+// the label with the space wasted to its right. Wrapping the action(s) in `RowActions` pushes
+// them to the right edge and evenly spaces multiples — the same treatment every row now gets.
+import { Focusable } from "@decky/ui";
+import { CSSProperties, FC, ReactNode } from "react";
+
+export const RowActions: FC<{ children: ReactNode }> = ({ children }) => (
+  <Focusable
+    style={{
+      display: "flex",
+      gap: "0.5em",
+      justifyContent: "flex-end",
+      alignItems: "center",
+    }}
+  >
+    {children}
+  </Focusable>
+);
+
+// A single action button sized to its content (not the gamepad-UI default of 100% width), with
+// a floor so short labels ("Pair", "Remove") don't render as tiny nubs and every row's button
+// reads at the same weight.
+export const actionButton: CSSProperties = {
+  width: "fit-content",
+  minWidth: "7em",
+  flexShrink: 0,
+};
+
+// Square icon-only button (details ⓘ, header back arrow). Needs an explicit height or the zero
+// padding collapses it to the icon's line height.
+export const iconButton: CSSProperties = {
+  width: "40px",
+  minWidth: "40px",
+  height: "40px",
+  padding: 0,
+  flexShrink: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+};