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

@@ -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
 

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(<DiscordBanner />);
+    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(<DiscordBanner />);
+    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();
+  });
+});

src/features/discordBanner/DiscordBanner.tsx

@@ -19,7 +19,17 @@ export default function DiscordBanner() {
   return (
     <div className='discord-banner' role='region' aria-label={t('discordBanner.ariaLabel')}>
       <div className='discord-banner-left'>
-        <svg className='discord-banner-icon' viewBox='0 0 24 24' fill='currentColor' aria-hidden='true'>
+        {/* Explicit width/height, not just a viewBox: an SVG with neither has no
+            intrinsic size, and Chromium (WebView2) then falls back to the 300x150
+            default replaced-element size. */}
+        <svg
+          className='discord-banner-icon'
+          width='18'
+          height='18'
+          viewBox='0 0 24 24'
+          fill='currentColor'
+          aria-hidden='true'
+        >
           <path d='M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z' />
         </svg>
         <span className='discord-banner-text'>{t('discordBanner.message')}</span>

src/styles/layout/discord-banner.css

@@ -21,6 +21,12 @@
   min-width: 0;
 }
 
+.discord-banner-icon {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+}
+
 .discord-banner-text {
   white-space: nowrap;
   overflow: hidden;