updated screen size

lib/main.dart

@@ -7,6 +7,7 @@ import 'package:shared_preferences/shared_preferences.dart';
 import 'core/router.dart';
 import 'core/theme.dart';
 import 'state/session_controller.dart';
+import 'widgets/phone_frame.dart';
 
 Future<void> main() async {
   WidgetsFlutterBinding.ensureInitialized();
@@ -38,6 +39,7 @@ class KrowApp extends StatelessWidget {
       theme: buildKrowTheme(),
       scrollBehavior: const KrowScrollBehavior(),
       routerConfig: router,
+      builder: (context, child) => PhoneFrame(child: child ?? const SizedBox()),
     );
   }
 }

lib/widgets/phone_frame.dart

@@ -0,0 +1,65 @@
+import 'dart:math' as math;
+
+import 'package:flutter/material.dart';
+
+import '../core/theme.dart';
+
+/// Holds the app to phone proportions on anything wider than a phone.
+///
+/// This is a worker app: every screen is laid out for a thumb, and stretched
+/// across a laptop the same screens read as a broken website rather than an
+/// app. On a wide window the app is pinned to a phone-sized panel in the
+/// middle and the surrounding space is filled with a flat backdrop, so a
+/// worker who opens the link on a desktop gets the same interface a phone
+/// would show them.
+class PhoneFrame extends StatelessWidget {
+  const PhoneFrame({super.key, required this.child});
+
+  final Widget child;
+
+  /// Below this the window is a phone already, so it is left alone. 600 is
+  /// the usual Material breakpoint: narrow tablets in portrait sit above it
+  /// and get the panel, which is the point — a tablet stretches the layout
+  /// just as badly as a laptop does.
+  static const double breakpoint = 600;
+
+  /// A large phone, roughly a Pixel's logical size.
+  static const Size panel = Size(420, 900);
+
+  @override
+  Widget build(BuildContext context) {
+    final media = MediaQuery.of(context);
+    if (media.size.width < breakpoint) return child;
+
+    // Short windows give the panel everything they have rather than cropping
+    // it, so the app is never taller than the space it is drawn into.
+    final height = math.min(panel.height, media.size.height);
+    final size = Size(panel.width, height);
+    final rounded = height < media.size.height;
+
+    return ColoredBox(
+      color: KrowPalette.ink,
+      child: Center(
+        child: SizedBox.fromSize(
+          size: size,
+          child: ClipRRect(
+            borderRadius: BorderRadius.circular(rounded ? 28 : 0),
+            child: MediaQuery(
+              // The app measures itself against the panel, not the window:
+              // sheets sized as a fraction of the screen height and anything
+              // reading the width would otherwise use the desktop's numbers.
+              // Window padding goes too — the browser's safe areas belong to
+              // the edges of the page, which the panel no longer touches.
+              data: media.copyWith(
+                size: size,
+                padding: EdgeInsets.zero,
+                viewPadding: EdgeInsets.zero,
+              ),
+              child: child,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}