From d76d409416d9486fd10ea2ff1a5232bc3a356f6c Mon Sep 17 00:00:00 2001
From: R-Bharathraj <bharathraj0535@gmail.com>
Date: Mon, 28 Sep 2026 21:23:29 +0530
Subject: [PATCH] updated screen size

---
 lib/main.dart                |  2 ++
 lib/widgets/phone_frame.dart | 65 ++++++++++++++++++++++++++++++++++++
 2 files changed, 67 insertions(+)
 create mode 100644 lib/widgets/phone_frame.dart

diff --git a/lib/main.dart b/lib/main.dart
index 1828e77..6761f0a 100644
--- a/lib/main.dart
+++ b/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()),
     );
   }
 }
diff --git a/lib/widgets/phone_frame.dart b/lib/widgets/phone_frame.dart
new file mode 100644
index 0000000..5430775
--- /dev/null
+++ b/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,
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}