feat(audience-sample): mobile-responsive UI with safe area and scroll fixes (SDK-314)

nattb8 · claude · nattb8 · commit ef360bc966f4 · 2026-05-05T15:17:17.000+12:00
- Responsive layout breakpoints: stacks grid columns vertically below
  1024 px (.narrow) and applies larger text/44 px touch targets below
  480 px (.phone)
- Status bar switches to a vertical stack at the narrow breakpoint so
  UUID values (session ID, anon ID, etc.) never overflow sideways;
  values are left-aligned and clip with overflow: hidden
- Android safe area: Screen.safeArea insets applied as root padding on
  startup and orientation change so content is never hidden behind the
  notch or navigation bar
- Scroll performance: UsageHints.GroupTransform on both scroll content
  containers (GPU transform instead of per-frame re-composite); log
  capped at 200 rows to keep the visual tree bounded

Co-Authored-By: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/examples/audience/Assets/SampleApp/Resources/AudienceSample.uss b/examples/audience/Assets/SampleApp/Resources/AudienceSample.uss
@@ -521,6 +521,115 @@
     width: 100%;
 }
 
+/* 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. */
+
+.narrow .status-bar {
+    padding-left: 16px;
+    padding-right: 16px;
+}
+
+.narrow .status-top-row {
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-items: stretch;
+}
+
+.narrow .status-group {
+    flex-direction: column;
+    align-items: stretch;
+    margin-right: 0;
+    min-width: 0;
+}
+
+.narrow .status-cell {
+    margin-right: 0;
+    margin-bottom: 6px;
+    min-width: 0;
+    overflow: hidden;
+}
+
+/* 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;
+}
+
+.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 {
+    padding-top: 13px;
+    padding-bottom: 13px;
+    padding-left: 10px;
+    padding-right: 10px;
+    font-size: 13px;
+    letter-spacing: 0.3px;
+}
+
+/* Buttons: 44 px minimum height and 14 px text throughout panels. */
+.phone Button {
+    min-height: 44px;
+    font-size: 14px;
+}
+
+/* Section and field labels: bump from 11 px to 13 px. */
+.phone .section-label,
+.phone .field-label {
+    font-size: 13px;
+}
+
+/* Accordion headers: larger text, taller tap target. */
+.phone .accordion-title {
+    font-size: 13px;
+}
+
+.phone .accordion-header {
+    padding-top: 14px;
+    padding-bottom: 14px;
+}
+
+/* Input fields: 14 px text and 44 px min-height for comfortable typing. */
+.phone .field .unity-text-field > .unity-text-field__input,
+.phone .field .unity-base-text-field__input {
+    font-size: 14px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    min-height: 44px;
+}
+
 /* ---------- Panels ---------- */
 
 .panel {
diff --git a/examples/audience/Assets/SampleApp/Scripts/AudienceSample.UI.cs b/examples/audience/Assets/SampleApp/Scripts/AudienceSample.UI.cs
@@ -30,7 +30,9 @@ private static readonly (string TabId, string PanelId)[] Tabs =
 
         private const int CollapseThreshold = 240;
         private const int StatusPollIntervalMs = 500;
+        private const int MaxLogRows = 200;
         private const float NarrowBreakpointPx = 1024f;
+        private const float PhoneBreakpointPx  = 480f;
 
         // ---- UI document state ----
         // All fields below are populated by BindElements before any other access.
@@ -83,6 +85,9 @@ private static readonly (string TabId, string PanelId)[] Tabs =
 
 #pragma warning restore 8618
 
+        // Tracks the last applied safe area so Update only re-applies on change.
+        private Rect _lastSafeArea;
+
         // ---- UI lifecycle (single entry point called from main's Awake) ----
 
         // Full UI lifecycle: thread capture, document load, binding, callbacks,
@@ -112,6 +117,15 @@ private void InitializeUi()
             _root.schedule.Execute(RefreshStatusBar).Every(StatusPollIntervalMs);
         }
 
+        // Re-apply safe-area padding whenever Screen.safeArea changes (startup,
+        // orientation flip, multi-window resize). Runs every frame but exits
+        // immediately when nothing has changed.
+        private void Update()
+        {
+            if (Screen.safeArea != _lastSafeArea)
+                ApplySafeArea();
+        }
+
         // ---- UI document load ----
 
         // Loads the UXML/USS resources and clones the tree into the panel
@@ -223,6 +237,11 @@ private void BindElements()
             // scroller never engages.
             _logView.contentContainer.style.flexShrink = 0;
 
+            // Tell the renderer the log subtree moves as a unit when scrolled.
+            // Without this hint Unity re-composites every row on each scroll
+            // frame; with it the subtree is translated on the GPU instead.
+            _logView.contentContainer.usageHints = UsageHints.GroupTransform;
+
             _logCount = Require<Label>("log-count");
         }
 
@@ -403,31 +422,78 @@ void Update()
                 if (float.IsNaN(needed) || needed <= 0f) return;
                 pageScroll.contentContainer.style.minHeight = needed;
             }
+            pageScroll.contentContainer.usageHints = UsageHints.GroupTransform;
             controls.RegisterCallback<GeometryChangedEvent>(_ => Update());
             logCol.RegisterCallback<GeometryChangedEvent>(_ => Update());
             pageScroll.contentContainer.schedule.Execute(Update).StartingIn(0);
         }
 
-        // Mirrors the web sample's `@media (min-width: 1024px)`. USS 2021.3
-        // has no @media; toggle a .narrow class on .sample-app-grid via
-        // GeometryChangedEvent. Idempotent — only mutates on the boolean flip.
+        // Mirrors the web sample's `@media` breakpoints. USS 2021.3 has no
+        // @media; toggle class names via GeometryChangedEvent instead.
+        //   .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()
         {
             var grid = Require<VisualElement>("sample-app-grid");
             void Update()
             {
                 var w = _root.layout.width;
                 if (float.IsNaN(w) || w <= 0f) return;
+
                 var shouldBeNarrow = w < NarrowBreakpointPx;
                 var isNarrow = grid.ClassListContains("narrow");
-                if (shouldBeNarrow == isNarrow) return;
-                if (shouldBeNarrow) grid.AddToClassList("narrow");
-                else grid.RemoveFromClassList("narrow");
+                if (shouldBeNarrow != isNarrow)
+                {
+                    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)
+                {
+                    _root.EnableInClassList("phone", shouldBePhone);
+                }
             }
             _root.RegisterCallback<GeometryChangedEvent>(_ => Update());
             _root.schedule.Execute(Update).StartingIn(0);
         }
 
+        // Converts Screen.safeArea insets (screen-space pixels) to root
+        // VisualElement padding (panel layout units). Called by Update() on
+        // every frame where the safe area rect changes — typically once on
+        // startup and once per orientation change.
+        //
+        // _lastSafeArea is updated only on success so that a too-early call
+        // (layout not yet settled) retries automatically next frame.
+        private void ApplySafeArea()
+        {
+            if (_root == null) return;
+            var w = _root.layout.width;
+            var h = _root.layout.height;
+            if (float.IsNaN(w) || w <= 0f || float.IsNaN(h) || h <= 0f) return;
+
+            var safe   = Screen.safeArea;
+            var scaleX = w / Screen.width;
+            var scaleY = h / Screen.height;
+
+            _root.style.paddingTop    = (Screen.height - safe.yMax) * scaleY;
+            _root.style.paddingBottom = safe.y * scaleY;
+            _root.style.paddingLeft   = safe.x * scaleX;
+            _root.style.paddingRight  = (Screen.width - safe.xMax) * scaleX;
+
+            _lastSafeArea = safe;
+        }
+
         // ---- Typed-events accordion construction ----
 
         // Each accordion's Send button captures its EventSpec + input dictionary
@@ -705,6 +771,12 @@ private void AppendLog(string label, string? body, LogLevel level, LogSource sou
 
             var row = BuildLogRow(new LogEntry(DateTime.Now, label, body, level, source));
             _logView.Add(row);
+
+            // Keep the visual tree bounded so scroll performance doesn't degrade
+            // as the log grows. Remove the oldest row when the cap is exceeded.
+            while (_logView.contentContainer.childCount > MaxLogRows)
+                _logView.contentContainer.RemoveAt(0);
+
             _logCount.text = _logView.contentContainer.childCount.ToString(CultureInfo.InvariantCulture);
 
             // contentContainer.flexShrink = 0 (set in BindElements) makes the
