ui(player): square vinyl stage, brighter tonearm, tilted sleeve

- Restore 1:1 aspect-ratio on .vinyl-stage; the previous 1:0.85
  override created an inconsistent crop on resize. Replace the
  tonearm sibling's aspect-ratio with explicit height:36% so its
  vertical span tracks the stage instead of its own width.
- Brighten the tonearm SVG: lighter pivot/arm gradient stops,
  thicker stroke widths, stronger cartridge highlight.
- Add a subtle -2deg tilt to the sleeve so it reads as physically
  resting on the disc rather than rectilinearly composed.

media_server/static/css/styles.css

@@ -4416,15 +4416,9 @@ header .brand-sub {
 }
 
 /* ─── Vinyl stage ──────────────────────────────────────────── */
-/* Aspect-ratio is intentionally wider than tall: the sleeve+disc
-   composition only fills the top ~82% of a square; a strict 1:1 stage
-   left an ~18% empty band below the disc and forced the grid row
-   taller than the masthead column, painting a large dead gap at the
-   bottom of the page. 1:0.85 trims that band while keeping the disc
-   (bottom anchor at top:19.4% + 63% = 82.4% of height) safely inside. */
 .album-art-container.vinyl-stage {
     position: relative;
-    aspect-ratio: 1 / 0.85;
+    aspect-ratio: 1;
     width: 100%;
     max-width: none;
     padding: 0;
@@ -4561,7 +4555,7 @@ header .brand-sub {
     top: 26%;
     right: -6%;
     width: 36%;
-    aspect-ratio: 1;
+    height: 36%;
     pointer-events: none;
     transform-origin: 88% 12%;
     transform: rotate(-22deg);
@@ -4667,6 +4661,12 @@ body.visualizer-active .vinyl-stage .spectrogram-canvas {
         -2px 8px 24px rgba(0, 0, 0, 0.5),
         -4px 18px 44px rgba(0, 0, 0, 0.35);
     overflow: hidden;
+    /* Subtle counterclockwise tilt — sleeve rests on the disc as if
+       casually placed, breaking up the otherwise rigid rectilinear
+       grid. The shadow above carries the same diagonal so the lean
+       reads as physical rather than transformed. */
+    transform: rotate(-2deg);
+    transform-origin: 50% 60%;
 }
 :root[data-theme="light"] .vinyl-stage .sleeve {
     background: transparent;
@@ -7950,10 +7950,16 @@ select option {
     display: inline-flex;
     align-items: center;
     gap: 10px;
-    /* Allow text to wrap so we don't ellipsis-truncate the model name */
+    min-width: 0;
+}
+/* Truncate the monitor name itself, not its sibling badge — putting
+   overflow:hidden on the parent flex container clipped the favourite
+   star whenever the model name was long enough to ellipsis. */
+.display-container .display-monitor-name-text {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
+    min-width: 0;
 }
 .display-container .display-monitor-details {
     font-family: var(--mono);
@@ -7973,6 +7979,7 @@ select option {
     margin: 0;
     line-height: 0;
     vertical-align: middle;
+    flex-shrink: 0;
     filter: drop-shadow(0 0 4px var(--copper-glow));
 }
 .display-container .display-primary-badge svg {

media_server/static/index.html

@@ -206,19 +206,19 @@
                     <svg class="tonearm" viewBox="0 0 200 200" aria-hidden="true">
                         <defs>
                             <linearGradient id="armGrad" x1="0" x2="1">
-                                <stop offset="0" stop-color="#3a3528"/>
+                                <stop offset="0" stop-color="#6d5f44"/>
-                                <stop offset="0.5" stop-color="#9C937F"/>
+                                <stop offset="0.5" stop-color="#d8c39a"/>
-                                <stop offset="1" stop-color="#5C5447"/>
+                                <stop offset="1" stop-color="#8a7a5a"/>
                             </linearGradient>
                         </defs>
-                        <circle cx="176" cy="24" r="14" fill="#1a1611" stroke="#3A3528" stroke-width="1"/>
+                        <circle cx="176" cy="24" r="14" fill="#2a241c" stroke="#9C835A" stroke-width="1.5"/>
-                        <circle cx="176" cy="24" r="6" fill="#3A3528"/>
+                        <circle cx="176" cy="24" r="6" fill="#5C5447"/>
-                        <circle cx="176" cy="24" r="2" fill="#E08038"/>
+                        <circle cx="176" cy="24" r="2.5" fill="#E08038"/>
-                        <line x1="176" y1="24" x2="64" y2="136" stroke="url(#armGrad)" stroke-width="3.5" stroke-linecap="round"/>
+                        <line x1="176" y1="24" x2="64" y2="136" stroke="url(#armGrad)" stroke-width="5" stroke-linecap="round"/>
-                        <rect x="180" y="14" width="14" height="20" fill="#26211A" stroke="#3A3528"/>
+                        <rect x="180" y="14" width="14" height="20" fill="#3A3528" stroke="#9C835A" stroke-width="1"/>
-                        <rect x="56" y="128" width="22" height="18" rx="2" fill="#26211A" stroke="#3A3528" transform="rotate(-45 67 137)"/>
+                        <rect x="56" y="128" width="22" height="18" rx="2" fill="#3A3528" stroke="#9C835A" stroke-width="1" transform="rotate(-45 67 137)"/>
-                        <circle cx="62" cy="138" r="3" fill="#E08038" opacity="0.8"/>
+                        <circle cx="62" cy="138" r="3.5" fill="#E08038" opacity="0.95"/>
-                        <circle cx="62" cy="138" r="6" fill="none" stroke="#E08038" stroke-width="0.5" opacity="0.4"/>
+                        <circle cx="62" cy="138" r="7" fill="none" stroke="#E08038" stroke-width="0.8" opacity="0.5"/>
                     </svg>
                     <canvas id="spectrogram-canvas" class="spectrogram-canvas" width="300" height="64"></canvas>
                 </div>