From f5ddb28d05dd63fa32b7909ce2dbd1d1a30b8e03 Mon Sep 17 00:00:00 2001
From: Psychotoxical <171614930+Psychotoxical@users.noreply.github.com>
Date: Mon, 13 Jul 2026 22:53:59 +0200
Subject: [PATCH] fix(discord-banner): give the icon an explicit size so it
does not blow up on Windows (#1289)
* fix(discord-banner): give the icon an explicit size so it does not blow up on Windows
The icon carried a viewBox but no width/height, and the .discord-banner-icon
class it uses had no CSS rule at all -- so the SVG had no intrinsic size. WebKit
happened to render it small; Chromium (WebView2, i.e. Windows) fell back to the
300x150 default replaced-element size, so the icon swallowed the bar and pushed
the message out of the row.
Size it explicitly on the element (correct even before the stylesheet applies)
and add the missing rule with flex-shrink so it cannot be squeezed either.
* docs(changelog): add entry for PR #1289
* docs(changelog): place the #1289 entry in PR order
---
CHANGELOG.md | 6 +++
.../discordBanner/DiscordBanner.test.tsx | 40 +++++++++++++++++++
src/features/discordBanner/DiscordBanner.tsx | 12 +++++-
src/styles/layout/discord-banner.css | 6 +++
4 files changed, 63 insertions(+), 1 deletion(-)
create mode 100644 src/features/discordBanner/DiscordBanner.test.tsx
diff --git a/CHANGELOG.md b/CHANGELOG.md
index fa3326b3..03b0048d 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -321,6 +321,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
* Connecting a scrobble service could fail with only "Network error — check your connection or URL", which covers everything from a DNS failure to a blocked host, an interrupted TLS handshake or a rejected request. The underlying error is now shown alongside it, so a failing connect can be told apart from a reachability problem on your machine or network.
+### Windows — oversized Discord banner icon
+
+**By [@Psychotoxical](https://github.com/Psychotoxical), PR [#1289](https://github.com/Psychotoxical/psysonic/pull/1289)**
+
+* The Discord community banner rendered its icon at an enormous size on Windows, pushing the message out of the bar. The icon now has a fixed size on every platform.
+
## [1.49.0] - 2026-06-29
diff --git a/src/features/discordBanner/DiscordBanner.test.tsx b/src/features/discordBanner/DiscordBanner.test.tsx
new file mode 100644
index 00000000..da0b5625
--- /dev/null
+++ b/src/features/discordBanner/DiscordBanner.test.tsx
@@ -0,0 +1,40 @@
+// The banner icon shipped with a `viewBox` but no width/height and no CSS rule
+// for its class, so it had no intrinsic size at all. WebKitGTK happened to
+// render it small; Chromium (WebView2, i.e. Windows) fell back to the 300x150
+// default replaced-element size and the icon swallowed the bar. Pin the explicit
+// dimensions — CSS alone cannot be asserted here, and the attributes are what
+// make the icon correct even before the stylesheet applies.
+
+import { describe, expect, it, beforeEach, afterEach } from 'vitest';
+import { render } from '@testing-library/react';
+import DiscordBanner from './DiscordBanner';
+import { useAuthStore } from '@/store/authStore';
+import { resetAuthStore } from '@/test/helpers/storeReset';
+
+const THRESHOLD_MS = 20 * 60 * 60 * 1000;
+
+describe('DiscordBanner', () => {
+ beforeEach(() => {
+ resetAuthStore();
+ useAuthStore.setState({ discordBannerAccumulatedUsageMs: THRESHOLD_MS });
+ });
+ afterEach(resetAuthStore);
+
+ it('sizes its icon explicitly instead of leaving it intrinsic', () => {
+ const { container } = render();
+ const icon = container.querySelector('.discord-banner-icon');
+
+ expect(icon).not.toBeNull();
+ expect(icon?.getAttribute('width')).toBe('18');
+ expect(icon?.getAttribute('height')).toBe('18');
+ });
+
+ it('keeps the icon inside the banner row next to the message and join button', () => {
+ const { container } = render();
+ const left = container.querySelector('.discord-banner-left');
+
+ expect(left?.querySelector('.discord-banner-icon')).not.toBeNull();
+ expect(left?.querySelector('.discord-banner-text')).not.toBeNull();
+ expect(left?.querySelector('.discord-banner-join')).not.toBeNull();
+ });
+});
diff --git a/src/features/discordBanner/DiscordBanner.tsx b/src/features/discordBanner/DiscordBanner.tsx
index 431736e0..88bf262b 100644
--- a/src/features/discordBanner/DiscordBanner.tsx
+++ b/src/features/discordBanner/DiscordBanner.tsx
@@ -19,7 +19,17 @@ export default function DiscordBanner() {
return (