Fix WhatsNewModal: use whats-new-content class with !important overrides, adjust modal size

src/lib/components/updates/WhatsNewModal.svelte

@@ -54,7 +54,7 @@
 <div
   class="whats-new-modal"
   style={`
-    --updates-modal-max-height: ${maxHeightPx}px;
+    --updates-modal-max-height: ${maxHeightPx - 150}px;
     --updates-overlay-pad-top: ${TITLEBAR_HEIGHT + INNER_MARGIN}px;
     --updates-overlay-pad-bottom: ${PLAYER_HEIGHT + INNER_MARGIN}px;
   `}
@@ -63,11 +63,11 @@
     {isOpen}
     onClose={onClose}
     title={modalTitle}
-    maxWidth="860px"
+    maxWidth="910px"
   >
     {#if release}
       {#if releaseHtml}
-        <div class="release-body prose">
+        <div class="release-body whats-new-content">
           {@html releaseHtml}
         </div>
       {:else}
@@ -99,62 +99,59 @@
     color: var(--text-primary);
   }
 
-  /* Minimal prose styling for safe markdown output */
+  /* Whats New content styling - using !important to override any conflicting styles */
-  :global(.whats-new-modal .prose p) {
+  .whats-new-content :global(p) {
-    margin: 0 0 12px;
+    margin: 0 0 12px !important;
-    line-height: 1.6;
+    line-height: 1.6 !important;
   }
 
-  :global(.whats-new-modal .prose ul) {
+  .whats-new-content :global(ul) {
-    margin: 6px 0 14px 10px;
+    margin: 6px 0 14px 10px !important;
-    padding: 0 0 0 44px;
+    padding: 0 0 0 24px !important;
-    display: flex;
+    display: flex !important;
-    flex-direction: column;
+    flex-direction: column !important;
-    gap: 8px;
+    gap: 8px !important;
-    list-style-position: outside;
+    list-style-type: disc !important;
+    list-style-position: outside !important;
   }
 
-  :global(.whats-new-modal .prose li) {
+  /* First level list items - brighter color */
-    line-height: 1.6;
+  .whats-new-content :global(li) {
-    color: var(--text-secondary);
+    line-height: 1.6 !important;
-    font-size: 14px;
+    color: var(--text-secondary) !important;
-    font-weight: 400;
+    font-size: 14px !important;
+    font-weight: 400 !important;
   }
 
-  :global(.whats-new-modal .prose li)::marker {
+  /* Nested lists - extra indentation */
-    color: color-mix(in srgb, var(--text-secondary) 85%, transparent);
+  .whats-new-content :global(ul ul) {
+    margin: 6px 0 8px 0 !important;
+    padding-left: 24px !important;
   }
 
-  /* Nested/child list items - darker color and proper indentation */
+  /* Nested list items - darker/muted color */
-  :global(.whats-new-modal .prose ul ul) {
+  .whats-new-content :global(ul ul li) {
-    margin: 4px 0 8px 16px;
+    color: var(--text-muted) !important;
-    padding-left: 20px;
+    font-size: 13px !important;
   }
 
-  :global(.whats-new-modal .prose li li) {
+  /* Section headings */
-    color: var(--text-muted);
+  .whats-new-content :global(h3),
-    font-size: 13px;
+  .whats-new-content :global(.wn-section) {
+    margin: 16px 0 8px !important;
+    font-weight: 800 !important;
+    font-size: 18px !important;
+    letter-spacing: 0.2px !important;
+    color: var(--text-primary) !important;
   }
 
-  :global(.whats-new-modal .prose li li)::marker {
+  .whats-new-content :global(code) {
-    color: color-mix(in srgb, var(--text-muted) 70%, transparent);
+    background: var(--bg-tertiary) !important;
-  }
+    border: 1px solid var(--bg-hover) !important;
-
+    padding: 1px 6px !important;
-  :global(.whats-new-modal .prose h3),
+    border-radius: 6px !important;
-  :global(.whats-new-modal .prose .wn-section) {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
-    margin: 16px 0 8px;
+    font-size: 12px !important;
-    font-weight: 800;
-    font-size: 18px;
-    letter-spacing: 0.2px;
-  }
-
-  :global(.whats-new-modal .prose code) {
-    background: var(--bg-tertiary);
-    border: 1px solid var(--bg-hover);
-    padding: 1px 6px;
-    border-radius: 6px;
-    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-    font-size: 12px;
   }
 
   .empty {