fix: remove horizontal scrollbars, use overflow-x: hidden instead

No horizontal scrolling on mobile - content must fit viewport.
Changed overflow-x: auto to overflow-x: hidden on all card containers.
Added word-break: break-word to ensure text wraps naturally.
Added mobile-specific text wrapping for meta values.
Added overflow handling to section-card header and body elements.

Co-Authored-By: claude-flow <ruv@ruv.net>

Author: Coder

SonosControl.Web/Shared/SectionCard.razor.css

@@ -8,14 +8,17 @@
     background-color: var(--surface-1);
     box-shadow: var(--shadow-xs);
     min-width: 0;
-    overflow-x: auto;
+    overflow-x: hidden;
+    word-break: break-word;
 }
 
 .section-card__header {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     gap: var(--spacing-md);
+    min-width: 0;
+    overflow-x: hidden;
 }
 
 .section-card__header-main {
@@ -29,10 +32,16 @@
     line-height: 1;
 }
 
+.section-card__header-text {
+    min-width: 0;
+    overflow-x: hidden;
+}
+
 .section-card__header-text h3 {
     margin: 0;
     font-size: var(--font-size-xl);
     color: var(--text-primary);
+    overflow-wrap: break-word;
 }
 
 .section-card__eyebrow {
@@ -59,6 +68,8 @@
     display: flex;
     flex-direction: column;
     gap: var(--spacing-md);
+    min-width: 0;
+    overflow-x: hidden;
 }
 
 @media (max-width: 768px) {

SonosControl.Web/wwwroot/css/site.css

@@ -207,7 +207,7 @@ a:focus-visible {
     padding-top: var(--spacing-lg);
     padding-bottom: var(--spacing-xl);
     min-width: 0;
-    overflow-x: auto;
+    overflow-x: hidden;
 }
 
 .card, .panel {
@@ -216,7 +216,8 @@ a:focus-visible {
     border-radius: var(--bs-border-radius-lg);
     box-shadow: var(--shadow-sm);
     min-width: 0;
-    overflow-x: auto;
+    overflow-x: hidden;
+    word-break: break-word;
 }
 
 .card-header, .panel-header {
@@ -582,6 +583,7 @@ a:focus-visible {
 .currently-playing-card .card-body {
     min-width: 0;
     overflow-wrap: break-word;
+    overflow-x: hidden;
 }
 
 .currently-playing-card::before {
@@ -661,6 +663,14 @@ a:focus-visible {
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    min-width: 0;
+}
+
+@media (max-width: 576px) {
+    .currently-playing-meta-value {
+        white-space: normal;
+        overflow-wrap: break-word;
+    }
 }
 
 .currently-playing-progress {
@@ -945,7 +955,7 @@ a:focus-visible {
     flex: 1;
     background: var(--surface-0);
     min-width: 0;
-    overflow-x: auto;
+    overflow-x: hidden;
 }
 
 .nav-shell {