fix(ui): respect mobile safe areas in tablet layouts

ui/flutter/lib/core/window/app_window_frame.dart

@@ -1,7 +1,9 @@
+import 'package:flutter/foundation.dart' show TargetPlatform, defaultTargetPlatform;
 import 'package:flutter/material.dart' show Colors;
 import 'package:flutter/widgets.dart';
 import 'package:window_manager/window_manager.dart';
 
+import '../../shared/theme/app_palette.dart';
 import '../../shared/widgets/window/desktop_window_header.dart';
 import 'app_window_chrome.dart';
 
@@ -16,6 +18,15 @@ class AppWindowFrame extends StatelessWidget {
   Widget build(BuildContext context) {
     Widget framedChild = child;
 
+    // System insets apply to mobile devices at every responsive breakpoint.
+    // SafeArea also consumes the padding so page-level SafeAreas do not add it twice.
+    if (defaultTargetPlatform == TargetPlatform.android || defaultTargetPlatform == TargetPlatform.iOS) {
+      framedChild = ColoredBox(
+        color: AppPalette.of(context).bg,
+        child: SafeArea(child: framedChild),
+      );
+    }
+
     if (AppWindowChrome.usesCustomChrome) {
       framedChild = Stack(
         children: [