fix(audience-sample): stack status bar vertically on all narrow screens (SDK-314)

Move status bar vertical stacking from the phone breakpoint (<480px) to
the narrow breakpoint (<1024px). UUID values in the status bar were
overflowing horizontally on devices wider than 480px because the phone
class was never applied.

Also toggle .narrow on _root (in addition to .sample-app-grid) so the
narrow selectors can reach the sticky header which sits outside the grid.
Font/touch-target changes remain phone-only.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: nattb8

examples/audience/Assets/SampleApp/Resources/AudienceSample.uss

@@ -521,64 +521,72 @@
     width: 100%;
 }
 
-/* Phone breakpoint (< 480 px) — .phone is toggled on the root VisualElement
-   by RegisterResponsiveLayout so selectors here reach the full page tree,
-   including the sticky header that sits outside .sample-app-grid.
-   Goal: LARGER text for legibility, 44 px touch targets throughout, single-
-   column status bar. Vertical height grows and is absorbed by scrolling. */
-
-.phone .sticky-top-main {
-    padding-top: 12px;
-}
-
-/* Slight title reduction frees header height; 24 px is still prominent. */
-.phone .title {
-    font-size: 24px;
-}
+/* Narrow breakpoint (< 1024 px) — .narrow is toggled on the root VisualElement
+   (and on .sample-app-grid) by RegisterResponsiveLayout so selectors here reach
+   the sticky header. Status bar switches to a vertical stack so UUID values
+   never overflow sideways regardless of device width. */
 
-/* Status bar: bigger font, stack all cells in one column so nothing clips. */
-.phone .status-bar {
+.narrow .status-bar {
     padding-left: 16px;
     padding-right: 16px;
-    padding-top: 12px;
-    padding-bottom: 12px;
-    font-size: 14px;
 }
 
-.phone .status-top-row {
+.narrow .status-top-row {
     flex-direction: column;
     flex-wrap: nowrap;
     align-items: stretch;
 }
 
-.phone .status-group {
+.narrow .status-group {
     flex-direction: column;
     margin-right: 0;
-    /* min-width: 0 lets align-items: stretch on the parent column constrain
-       this group to the container width rather than expanding to content width. */
     min-width: 0;
 }
 
-.phone .status-cell {
+.narrow .status-cell {
     margin-right: 0;
     margin-bottom: 6px;
     min-width: 0;
     overflow: hidden;
 }
 
-/* Value fills the remaining row width and clips if still too long — the user
-   can tap any cell to copy the full string. */
-.phone .status-value {
+/* Value clips to available width — user taps to copy the full string. */
+.narrow .status-value {
     flex-grow: 1;
     flex-shrink: 1;
     overflow: hidden;
     min-width: 0;
 }
 
-.phone .status-vertical-rule {
+.narrow .status-vertical-rule {
     display: none;
 }
 
+/* Phone breakpoint (< 480 px) — .phone is toggled on the root VisualElement
+   by RegisterResponsiveLayout so selectors here reach the full page tree.
+   Goal: LARGER text for legibility, 44 px touch targets throughout.
+   Status bar vertical layout is already handled by .narrow above. */
+
+.phone .sticky-top-main {
+    padding-top: 12px;
+}
+
+/* Slight title reduction frees header height; 24 px is still prominent. */
+.phone .title {
+    font-size: 24px;
+}
+
+/* Status bar: bigger font on phone. */
+.phone .status-bar {
+    padding-top: 12px;
+    padding-bottom: 12px;
+    font-size: 14px;
+}
+
+.phone .status-cell {
+    margin-bottom: 6px;
+}
+
 /* Tabs: 13 px text, reduced letter-spacing and padding so all four fit on
    375 px while staying close to the 44 px touch-target guideline. */
 .phone .tab-bar .tab {

examples/audience/Assets/SampleApp/Scripts/AudienceSample.UI.cs

@@ -430,9 +430,13 @@ void Update()
 
         // Mirrors the web sample's `@media` breakpoints. USS 2021.3 has no
         // @media; toggle class names via GeometryChangedEvent instead.
-        //   .narrow on sample-app-grid : < 1024 px — stacks columns vertically.
-        //   .phone  on _root           : < 480 px  — compact status bar, tabs,
-        //                                            title, and panel padding.
+        //   .narrow on sample-app-grid AND _root : < 1024 px — stacks grid
+        //                                          columns vertically and
+        //                                          switches status bar to a
+        //                                          vertical stack so UUIDs
+        //                                          never overflow sideways.
+        //   .phone  on _root                     : < 480 px — larger text,
+        //                                          44 px touch targets.
         // Each breakpoint is evaluated independently so toggling one does not
         // suppress the other. Both are idempotent — only mutate on a boolean flip.
         private void RegisterResponsiveLayout()
@@ -447,16 +451,17 @@ void Update()
                 var isNarrow = grid.ClassListContains("narrow");
                 if (shouldBeNarrow != isNarrow)
                 {
-                    if (shouldBeNarrow) grid.AddToClassList("narrow");
-                    else grid.RemoveFromClassList("narrow");
+                    grid.EnableInClassList("narrow", shouldBeNarrow);
+                    // Also on _root so .narrow selectors can reach the sticky
+                    // header (status bar) which sits outside .sample-app-grid.
+                    _root.EnableInClassList("narrow", shouldBeNarrow);
                 }
 
                 var shouldBePhone = w < PhoneBreakpointPx;
                 var isPhone = _root.ClassListContains("phone");
                 if (shouldBePhone != isPhone)
                 {
-                    if (shouldBePhone) _root.AddToClassList("phone");
-                    else _root.RemoveFromClassList("phone");
+                    _root.EnableInClassList("phone", shouldBePhone);
                 }
             }
             _root.RegisterCallback<GeometryChangedEvent>(_ => Update());