fix: sweep whole screens at large text and fix the overflows it found

lib/ui2/activity/zones.dart

@@ -470,15 +470,15 @@ class _ZonesDetailState extends State<ZonesDetail> {
                     ],
                   ),
                 ),
-                Text(
-                  // One beat below the next edge, as [ZoneRows.range] prints
-                  // it, so no bpm sits in two zones.
-                  z.zone == 5 ? '${z.lo}+' : '${z.lo}–${z.hi > z.lo ? z.hi - 1 : z.hi}',
-                  style: F.n17.copyWith(color: p.ink2),
-                ),
                 const SizedBox(width: S.x2),
-                Text(l?.activityZonesBpmUnit ?? 'bpm',
-                    style: F.cap.copyWith(color: p.ink3)),
+                // At large text the range may wrap (after its dash, or
+                // before the unit) instead of overflowing the row. Only
+                // there: flexed at 1x it would take half the row from the
+                // zone name. One Text.rich so the unit stays with its number.
+                if (bigText(context))
+                  Flexible(child: _range(z, p, l))
+                else
+                  _range(z, p, l),
               ],
             ),
           ],
@@ -492,6 +492,26 @@ class _ZonesDetailState extends State<ZonesDetail> {
     );
   }
 
+  /// One zone's bpm range with its unit, as one run of text.
+  Widget _range(ZoneRow z, P p, AppLocalizations? l) => Text.rich(
+        TextSpan(children: [
+          TextSpan(
+            // One beat below the next edge, as [ZoneRows.range] prints it, so
+            // no bpm sits in two zones.
+            text: z.zone == 5
+                ? '${z.lo}+'
+                : '${z.lo}–${z.hi > z.lo ? z.hi - 1 : z.hi}',
+            style: F.n17.copyWith(color: p.ink2),
+          ),
+          TextSpan(
+            // A no-break space, so the unit never lands on a line of its own.
+            text: ' ${l?.activityZonesBpmUnit ?? 'bpm'}',
+            style: F.cap.copyWith(color: p.ink3),
+          ),
+        ]),
+        textAlign: TextAlign.end,
+      );
+
   /// WHERE THESE EDGES CAME FROM — the whole point of the screen. Three
   /// different claims, three different sentences, never a shared hedge.
   String _anchorCopy(AppLocalizations? l, ZonesData d) {

lib/ui2/grammar.dart

@@ -1808,21 +1808,28 @@ class MetricRow extends StatelessWidget {
         if (sub.isNotEmpty) Text(sub, style: F.over.copyWith(color: p.ink3)),
       ],
     );
+    final big = bigText(c);
+    final valueText = Text(
+      value,
+      style: F.body.copyWith(color: p.ink, fontWeight: FontWeight.w600),
+      // At large text the value has a line of its own (see below), and a
+      // value that is a WORD ('What applies to you' → a phrase) can still be
+      // wider than that line. It wraps there rather than overflowing the row.
+      maxLines: big ? null : 1,
+      overflow: big ? null : TextOverflow.ellipsis,
+    );
     final amount = Row(
       mainAxisSize: MainAxisSize.min,
       crossAxisAlignment: CrossAxisAlignment.baseline,
       textBaseline: TextBaseline.alphabetic,
       children: [
-        // NOT Flexible. Sharing the row's flex with the name gave the value
-        // a quarter of the width and no more, so 'Respiratory rate' shipped
-        // reading `1… br/min` — a truncated measurement, which this row is
-        // supposed to never do. It is the name that gives way now.
-        Text(
-          value,
-          style: F.body.copyWith(color: p.ink, fontWeight: FontWeight.w600),
-          maxLines: 1,
-          overflow: TextOverflow.ellipsis,
-        ),
+        // NOT Flexible on the one-line row. Sharing the row's flex with the
+        // name gave the value a quarter of the width and no more, so
+        // 'Respiratory rate' shipped reading `1… br/min` — a truncated
+        // measurement, which this row is supposed to never do. It is the name
+        // that gives way there. On the large-text layout the value is alone
+        // on its line, so flexing there only lets a too-long one wrap.
+        if (big) Flexible(child: valueText) else valueText,
         if (unit.isNotEmpty) ...[
           const SizedBox(width: 2),
           Text(displayUnit, style: F.over.copyWith(color: p.ink3)),
@@ -1871,7 +1878,7 @@ class MetricRow extends StatelessWidget {
               .trim(),
       child: Padding(
         padding: const EdgeInsets.symmetric(vertical: S.x2),
-        child: bigText(c)
+        child: big
             // A dense row cannot stay one line at accessibility sizes without
             // truncating the measurement, and a truncated measurement is worse
             // than a taller row.

lib/ui2/screens/cycle_screen.dart

@@ -479,14 +479,24 @@ class _CycleTabState extends State<CycleTab> with RevisionReload {
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          Row(
+          // A Wrap, not a Row with a Spacer: at large text sizes or in a
+          // longer language the label and the phase pill do not fit one
+          // line, and the row overflowed. Side by side when they fit, the
+          // pill on its own line when they don't.
+          Wrap(
+            alignment: WrapAlignment.spaceBetween,
+            crossAxisAlignment: WrapCrossAlignment.center,
+            spacing: S.x2,
+            runSpacing: S.x2,
             children: [
               Text(
                 l?.cycleDayInThisCycle ?? 'DAY IN THIS CYCLE',
                 style: F.over.copyWith(color: p.ink3),
               ),
-              const Spacer(),
-              if (d.phase != 'unknown') Pill(_phaseLabel(l, d.phase), C.pink),
+              if (d.phase != 'unknown')
+                // Wraps at large text rather than cutting a long phase name
+                // short with an ellipsis; one line at default sizes.
+                Pill(_phaseLabel(l, d.phase), C.pink, wrap: bigText(c)),
             ],
           ),
           const SizedBox(height: S.x2),
@@ -496,13 +506,18 @@ class _CycleTabState extends State<CycleTab> with RevisionReload {
             children: [
               Text('${d.cycleDay}', style: F.n34.copyWith(color: p.ink)),
               const SizedBox(width: S.x2),
-              Text(
-                d.medianLength == null
-                    ? (l?.cycleCountedFromLastStart ??
-                          'counted from your last logged start')
-                    : (l?.cycleOfAboutDays(d.medianLength!.round()) ??
-                          'of about ${d.medianLength!.round()}'),
-                style: F.cap.copyWith(color: p.ink3),
+              // Wraps under itself rather than running off the card:
+              // "counted from your last logged start" is most of a line at
+              // the default size already.
+              Flexible(
+                child: Text(
+                  d.medianLength == null
+                      ? (l?.cycleCountedFromLastStart ??
+                            'counted from your last logged start')
+                      : (l?.cycleOfAboutDays(d.medianLength!.round()) ??
+                            'of about ${d.medianLength!.round()}'),
+                  style: F.cap.copyWith(color: p.ink3),
+                ),
               ),
             ],
           ),

lib/ui2/screens/readiness_detail.dart

@@ -297,12 +297,23 @@ class _ReadinessDetailState extends State<ReadinessDetail> {
                         p.track,
                         stroke: 14, t: animate(c, 1)),
                   ),
-                  Column(mainAxisSize: MainAxisSize.min, children: [
-                    Text('${v.round()}',
-                        style: F.n48.copyWith(
-                            color: d.provisional ? p.ink3 : p.ink)),
-                    Text(band.label, style: F.cap.copyWith(color: p.ink3)),
-                  ]),
+                  // The ring is a fixed 150 pt; at large text the score and
+                  // its band label were 260 pt taller than its inside and ran
+                  // out of it. They scale down to the ring's inner width
+                  // instead (stroke 14 each side, plus breathing room).
+                  Padding(
+                    padding: const EdgeInsets.all(22),
+                    child: FittedBox(
+                      fit: BoxFit.scaleDown,
+                      child: Column(mainAxisSize: MainAxisSize.min, children: [
+                        Text('${v.round()}',
+                            style: F.n48.copyWith(
+                                color: d.provisional ? p.ink3 : p.ink)),
+                        Text(band.label,
+                            style: F.cap.copyWith(color: p.ink3)),
+                      ]),
+                    ),
+                  ),
                 ]),
               ),
               if (recoveryStateLine(d.head, l) case final note?) ...[

test/cycle_day_row_overflow_test.dart

@@ -0,0 +1,73 @@
+// The cycle screen's "day in this cycle" card must fit a phone at any text
+// size.
+//
+// The headline row put the day number and "counted from your last logged
+// start" side by side with nothing allowed to wrap, and the header row put
+// its label before a Spacer and the phase pill. At a 390 pt width that
+// overflowed by 147 pt in the test font, and by less, but still, with larger
+// system text (iOS goes to 3.1x) or a longer language.
+
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:provider/provider.dart';
+
+import 'package:openstrap_edge/data/local_repository.dart';
+import 'package:openstrap_edge/state/app_state.dart';
+import 'package:openstrap_edge/ui2/screens/cycle_screen.dart';
+import 'package:openstrap_edge/ui2/ui2.dart';
+
+class _Repo extends LocalRepository {
+  _Repo({this.median});
+  final num? median;
+
+  @override
+  Future<Map<String, dynamic>> getCycle() async => {
+        'enabled': true,
+        'phase': 'follicular',
+        'cycle_day': 5,
+        'median_length': ?median,
+        'logs': [
+          {'date': '2026-11-09', 'kind': 'start'},
+        ],
+      };
+
+  @override
+  Future<Map<String, List<String>>> getCycleSymptoms() async => const {};
+}
+
+Future<void> _pump(WidgetTester t, {num? median, double scale = 1}) async {
+  t.view.physicalSize = const Size(390 * 3, 4000 * 3);
+  t.view.devicePixelRatio = 3;
+  addTearDown(t.view.reset);
+  final app = AppState.forTesting()..repo = _Repo(median: median);
+  addTearDown(app.dispose);
+  await t.pumpWidget(ChangeNotifierProvider<AppState>.value(
+    value: app,
+    child: MediaQuery(
+      data: MediaQueryData(textScaler: TextScaler.linear(scale)),
+      child: MaterialApp(
+        theme: buildTheme(Brightness.light),
+        home: const Scaffold(body: CycleTab()),
+      ),
+    ),
+  ));
+  await t.pumpAndSettle();
+}
+
+void main() {
+  for (final scale in const [1.0, 3.1]) {
+    testWidgets('no median yet, ${scale}x text', (t) async {
+      // The pump is the assertion: a RenderFlex overflow fails it.
+      await _pump(t, scale: scale);
+      expect(find.textContaining('counted from your last logged start'),
+          findsOneWidget);
+    });
+
+    testWidgets('with a median, ${scale}x text', (t) async {
+      await _pump(t, median: 29, scale: scale);
+      expect(find.textContaining('of about 29'), findsOneWidget);
+      // The phase name wraps at large text instead of ending in an ellipsis.
+      expect(t.widget<Pill>(find.byType(Pill).first).wrap, scale > 1.3);
+    });
+  }
+}