diff --git a/lib/styles/styles.dart b/lib/styles/styles.dart
index 05afa9b2..0a9ec4db 100644
--- a/lib/styles/styles.dart
+++ b/lib/styles/styles.dart
@@ -6,24 +6,28 @@ import 'package:wonders/common_libs.dart';
 
 export 'colors.dart';
 
-AppStyle $styles = AppStyle();
-
 @immutable
 class AppStyle {
-  AppStyle({Size? appSize}) {
-    /// Measure the diagonal size of the app window, and slightly adjust the scale value which is
-    /// applied to paddings and font-sizes across the app.
-    if (appSize == null) {
+  AppStyle({Size? screenSize}) {
+    if (screenSize == null) {
       scale = 1;
       return;
     }
-    final screenSize = (appSize.width + appSize.height) / 2;
-    if (screenSize > 1000) {
-      scale = 1.25; // large tablets
-    } else if (screenSize > 800) {
-      scale = 1; // small tablets
+    final shortestSide = screenSize.shortestSide;
+    const tabletXl = 1000;
+    const tabletLg = 800;
+    const tabletSm = 600;
+    const phoneLg = 400;
+    if (shortestSide > tabletXl) {
+      scale = 1.25;
+    } else if (shortestSide > tabletLg) {
+      scale = 1.15;
+    } else if (shortestSide > tabletSm) {
+      scale = 1;
+    } else if (shortestSide > phoneLg) {
+      scale = .9; // phone
     } else {
-      scale = .9; // phones
+      scale = .85; // small phone
     }
     debugPrint('screenSize=$screenSize, scale=$scale');
   }
diff --git a/lib/ui/app_scaffold.dart b/lib/ui/app_scaffold.dart
index 454c16b3..78651907 100644
--- a/lib/ui/app_scaffold.dart
+++ b/lib/ui/app_scaffold.dart
@@ -4,13 +4,14 @@ import 'package:wonders/ui/common/app_scroll_behavior.dart';
 class WondersAppScaffold extends StatelessWidget with GetItMixin {
   WondersAppScaffold({Key? key, required this.child}) : super(key: key);
   final Widget child;
+  static AppStyle get style => _style;
+  static AppStyle _style = AppStyle();
 
   @override
   Widget build(BuildContext context) {
-    Animate.defaultDuration = $styles.times.fast;
     // Listen to the device size, and update AppStyle when it changes
-    $styles = AppStyle(appSize: Size(context.widthPx, context.heightPx));
-    //$styles = AppStyle(appSize: null); //Size(context.widthPx, context.heightPx));
+    _style = AppStyle(screenSize: context.sizePx);
+    Animate.defaultDuration = $styles.times.fast;
     return Stack(
       key: ValueKey($styles.scale),
       children: [