Improve small screens detection

lib/src/app.dart

@@ -14,6 +14,7 @@ import 'package:lichess_mobile/src/model/settings/general_preferences.dart';
 import 'package:lichess_mobile/src/model/settings/board_preferences.dart';
 import 'package:lichess_mobile/src/utils/immersive_mode.dart';
 import 'package:lichess_mobile/src/utils/wakelock.dart';
+import 'package:lichess_mobile/src/utils/layout.dart';
 
 class App extends ConsumerStatefulWidget {
   const App({super.key});
@@ -44,15 +45,17 @@ class _AppState extends ConsumerState<App> {
         (state) => state.boardTheme,
       ),
     );
-    final screenHeight = MediaQuery.sizeOf(context).height;
+    final remainingHeight = estimateRemainingHeightLeftBoard(context);
 
     return MaterialApp(
       localizationsDelegates: AppLocalizations.localizationsDelegates,
       supportedLocales: kSupportedLocales,
       onGenerateTitle: (BuildContext context) => 'lichess.org',
       theme: ThemeData(
         navigationBarTheme: NavigationBarTheme.of(context).copyWith(
-          height: screenHeight < kSmallHeightScreenThreshold ? 60 : null,
+          height: remainingHeight < kSmallRemainingHeightLeftBoardThreshold
+              ? 60
+              : null,
         ),
         textTheme: defaultTargetPlatform == TargetPlatform.iOS
             ? brightness == Brightness.light

lib/src/constants.dart

@@ -27,14 +27,16 @@ const kProvisionalDeviation = 110;
 const kClueLessDeviation = 230;
 
 // UI
-const kSmallHeightScreenThreshold = 650;
 const kTabletThreshold = 600;
 const kCardTextScaleFactor = 1.64;
 const kMaxClockTextScaleFactor = 1.94;
 const kEmptyWidget = SizedBox.shrink();
 const kEmptyFen = '8/8/8/8/8/8/8/8 w - - 0 1';
 const kTabletBoardTableSidePadding = 16.0;
 
+/// The threshold to detect screens with a small remaining height left board.
+const kSmallRemainingHeightLeftBoardThreshold = 160;
+
 // annotations
 class _AllowedWidgetReturn {
   const _AllowedWidgetReturn();

lib/src/utils/layout.dart

@@ -0,0 +1,17 @@
+import 'package:flutter/widgets.dart';
+import 'package:flutter/foundation.dart';
+
+final _appBarHeight = defaultTargetPlatform == TargetPlatform.iOS ? 44.0 : 56.0;
+
+// bottom bar height in board screens
+const _bottomBarHeight = 50.0;
+
+/// Returns the estimated height of screen left the board
+double estimateRemainingHeightLeftBoard(BuildContext context) {
+  final size = MediaQuery.sizeOf(context);
+  final padding = MediaQuery.paddingOf(context);
+  final safeViewportHeight = size.height - padding.top - padding.bottom;
+  final boardSize = size.width;
+
+  return safeViewportHeight - boardSize - _appBarHeight - _bottomBarHeight;
+}

lib/src/view/analysis/analysis_screen.dart

@@ -125,8 +125,10 @@ class _BodyState extends ConsumerState<_Body> {
                 final aspectRatio = constraints.biggest.aspectRatio;
                 final defaultBoardSize = constraints.biggest.shortestSide;
                 final isTablet = defaultBoardSize > kTabletThreshold;
+                final remainingHeight =
+                    constraints.maxHeight - defaultBoardSize;
                 final isSmallScreen =
-                    constraints.maxHeight < kSmallHeightScreenThreshold;
+                    remainingHeight < kSmallRemainingHeightLeftBoardThreshold;
                 final boardSize = isTablet || isSmallScreen
                     ? defaultBoardSize - kTabletBoardTableSidePadding * 2
                     : defaultBoardSize;

lib/src/view/puzzle/puzzle_session_widget.dart

@@ -3,14 +3,14 @@ import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
-import 'package:lichess_mobile/src/widgets/board_table.dart';
 import 'package:lichess_mobile/src/model/common/id.dart';
 import 'package:lichess_mobile/src/model/settings/brightness.dart';
 import 'package:lichess_mobile/src/styles/lichess_colors.dart';
 import 'package:lichess_mobile/src/model/puzzle/puzzle_providers.dart';
 import 'package:lichess_mobile/src/model/puzzle/puzzle_session.dart';
 import 'package:lichess_mobile/src/model/puzzle/puzzle_service.dart';
 import 'package:lichess_mobile/src/model/puzzle/puzzle_ctrl.dart';
+import 'package:lichess_mobile/src/utils/layout.dart';
 
 class PuzzleSessionWidget extends ConsumerStatefulWidget {
   const PuzzleSessionWidget({
@@ -74,7 +74,8 @@ class PuzzleSessionWidgetState extends ConsumerState<PuzzleSessionWidget> {
       padding: const EdgeInsets.symmetric(vertical: 5.0),
       child: OrientationBuilder(
         builder: (context, orientation) {
-          final estimatedTableHeight = estimateTableHeight(context);
+          final remainingSpace = estimateRemainingHeightLeftBoard(context);
+          final estimatedTableHeight = remainingSpace / 2;
           const estimatedRatingWidgetHeight = 33.0;
           final estimatedWidgetHeight =
               estimatedTableHeight - estimatedRatingWidgetHeight;

lib/src/widgets/board_table.dart

@@ -553,12 +553,3 @@ class StackedMoveItem extends StatelessWidget {
     );
   }
 }
-
-/// Returns the estimated height of spaces around the board.
-double estimateTableHeight(BuildContext context) {
-  final size = MediaQuery.sizeOf(context);
-  final padding = MediaQuery.paddingOf(context);
-  final safeHeight = size.height - padding.top - padding.bottom;
-  // viewport height - board size - app bar height - bottom bar height
-  return (safeHeight - size.width - 50 - 56) / 2;
-}

lib/src/widgets/countdown_clock.dart

@@ -8,6 +8,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:lichess_mobile/src/model/settings/brightness.dart';
 import 'package:lichess_mobile/src/model/common/service/sound_service.dart';
 import 'package:lichess_mobile/src/constants.dart';
+import 'package:lichess_mobile/src/utils/layout.dart';
 
 /// A simple countdown clock.
 ///
@@ -119,7 +120,7 @@ class _CountdownClockState extends ConsumerState<CountdownClock> {
         ? ClockStyle.darkThemeStyle
         : ClockStyle.lightThemeStyle;
     final MediaQueryData mediaQueryData = MediaQuery.of(context);
-    final screenHeight = MediaQuery.sizeOf(context).height;
+    final remaingHeight = estimateRemainingHeightLeftBoard(context);
 
     return RepaintBoundary(
       child: Container(
@@ -151,7 +152,9 @@ class _CountdownClockState extends ConsumerState<CountdownClock> {
                       : clockStyle.textColor,
                   fontSize: 26,
                   height:
-                      screenHeight < kSmallHeightScreenThreshold ? 1.0 : null,
+                      remaingHeight < kSmallRemainingHeightLeftBoardThreshold
+                          ? 1.0
+                          : null,
                   fontFeatures: const [
                     FontFeature.tabularFigures(),
                   ],

lib/src/widgets/player.dart

@@ -11,6 +11,7 @@ import 'package:lichess_mobile/src/constants.dart';
 import 'package:lichess_mobile/src/model/game/player.dart';
 import 'package:lichess_mobile/src/utils/navigation.dart';
 import 'package:lichess_mobile/src/utils/l10n_context.dart';
+import 'package:lichess_mobile/src/utils/layout.dart';
 import 'package:lichess_mobile/src/view/user/user_screen.dart';
 
 /// A widget to display player information above/below the chess board.
@@ -40,9 +41,9 @@ class BoardPlayer extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final screenHeight = MediaQuery.sizeOf(context).height;
+    final remaingHeight = estimateRemainingHeightLeftBoard(context);
     final playerFontSize =
-        screenHeight < kSmallHeightScreenThreshold ? 14.0 : 16.0;
+        remaingHeight <= kSmallRemainingHeightLeftBoardThreshold ? 14.0 : 16.0;
 
     final playerWidget = Column(
       mainAxisAlignment: MainAxisAlignment.center,