From b4782aeedb4974dfdf33064bdb94b82e18f0c4f7 Mon Sep 17 00:00:00 2001
From: Frank Stellmacher <171614930+Psychotoxical@users.noreply.github.com>
Date: Mon, 18 May 2026 17:52:27 +0200
Subject: [PATCH] feat(ui): scale the whole window with Interface Scale (#781)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* experiment(zoom): allow setting webview zoom via core capability

* experiment(zoom): drive uiScale through Tauri's native webview zoom

Replace the CSS `zoom: uiScale` on `.main-content-zoom` (which only
scaled the main content column, leaving the sidebar, queue panel,
player bar and portaled overlays at 1.0) with a `setZoom` call on the
current webview. That scales everything inside the window the same way
Ctrl+/− does in a browser, including portals and the queue panel.

Effect runs whenever `uiScale` changes and once on mount, so the
persisted setting is reapplied on launch.

* docs: changelog + credits for interface scale (#781)
---
 CHANGELOG.md                        |  8 ++++++++
 src-tauri/capabilities/default.json |  1 +
 src/app/AppShell.tsx                | 10 +++++++++-
 src/config/settingsCredits.ts       |  1 +
 4 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2b39c83f..2c53d0db 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -34,6 +34,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 
 
+### Interface Scale — covers the whole window
+
+**By [@Psychotoxical](https://github.com/Psychotoxical), PR [#781](https://github.com/Psychotoxical/psysonic/pull/781)**
+
+* Settings → Appearance → Interface Scale now scales sidebar, queue, player bar, modals/portals and the fullscreen player alongside the main content — same behaviour as browser Ctrl+/−.
+
+
+
 ## [1.46.0] - 2026-05-18
 
 > **🙏 Special thanks to [@zz5zz](https://github.com/zz5zz)** for his tireless quirk-spotting and bug reports on the [Psysonic Discord](https://discord.gg/AMnDRErm4u) — several of the polish fixes in this release landed directly off the back of his messages.
diff --git a/src-tauri/capabilities/default.json b/src-tauri/capabilities/default.json
index d478fb91..77e78831 100644
--- a/src-tauri/capabilities/default.json
+++ b/src-tauri/capabilities/default.json
@@ -38,6 +38,7 @@
     "core:window:allow-create",
     "core:window:allow-set-size",
     "core:webview:allow-create-webview-window",
+    "core:webview:allow-set-webview-zoom",
     "process:allow-restart",
     "updater:default"
   ]
diff --git a/src/app/AppShell.tsx b/src/app/AppShell.tsx
index d23adf18..f2dc6cad 100644
--- a/src/app/AppShell.tsx
+++ b/src/app/AppShell.tsx
@@ -2,6 +2,7 @@ import React, { Suspense, useCallback, useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { ensurePlaybackServerActive } from '../utils/playback/playbackServer';
 import { invoke } from '@tauri-apps/api/core';
+import { getCurrentWebview } from '@tauri-apps/api/webview';
 import { PanelRight } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import Sidebar from '../components/Sidebar';
@@ -122,6 +123,13 @@ export function AppShell() {
     useEqStore.getState().syncToRust();
   }, []);
 
+  useEffect(() => {
+    getCurrentWebview().setZoom(uiScale).catch(() => {
+      /* setZoom may fail on platforms where the capability is unavailable;
+         fall back silently so the rest of the shell still renders. */
+    });
+  }, [uiScale]);
+
   useNowPlayingTrayTitle(currentTrack, isPlaying);
 
   // Post-update changelog is now surfaced via a dismissible banner in the
@@ -178,7 +186,7 @@ export function AppShell() {
         />
       )}
       <main className="main-content">
-        <div className="main-content-zoom" style={uiScale !== 1 ? { zoom: uiScale } : undefined}>
+        <div className="main-content-zoom">
         <header className="content-header">
           <LiveSearch />
           <div className="spacer" />
diff --git a/src/config/settingsCredits.ts b/src/config/settingsCredits.ts
index 9c24c8b3..d99c99fc 100644
--- a/src/config/settingsCredits.ts
+++ b/src/config/settingsCredits.ts
@@ -311,6 +311,7 @@ const CONTRIBUTOR_ENTRIES = [
       'Accessibility: OpenDyslexic font option in the Settings picker — bundled locally via @fontsource/opendyslexic, asymmetric glyph shapes for easier b/d, p/q tracking, Latin-only with translated subtitle in all 9 locales calling out the dyslexia-friendly intent and the Cyrillic/CJK fallback (PR #507)',
       'Settings: tri-state Clock Format (Auto / 24h / 12h) overriding the locale default for the queue ETA and the sleep-timer preview (PR #742)',
       'Servers: per-server library scan triggers (Quick / Full) and inline edit for existing profiles (PR #780)',
+      'Interface Scale: scales the entire window — sidebar, queue, player bar, modals and the fullscreen player follow the main content (PR #781)',
     ],
   },
 ] as const;