Make UI adapt to bigger font sizes (#465)

## Description 

In a number of screens, there were issues with the UI when system font
size is increased and even hindering basic usability in some cases. This
includes,
- Text getting clipped
- Buttons not visible/clickable
- Alignment issues

All obvious issues that I came across when testing has been fixed in
this PR.

lib/onboarding/view/onboarding_page.dart

@@ -58,121 +58,112 @@ class _OnboardingPageState extends State<OnboardingPage> {
       body: SafeArea(
         child: Center(
           child: SingleChildScrollView(
-            child: ConstrainedBox(
-              constraints:
-                  const BoxConstraints.tightFor(height: 800, width: 450),
-              child: Padding(
-                padding:
-                    const EdgeInsets.symmetric(vertical: 40.0, horizontal: 40),
-                child: Column(
-                  children: [
-                    Column(
-                      children: [
-                        kDebugMode
-                            ? GestureDetector(
-                                child: const Align(
-                                  alignment: Alignment.topRight,
-                                  child: Text("Lang"),
-                                ),
-                                onTap: () async {
-                                  final locale = await getLocale();
-                                  routeToPage(
-                                    context,
-                                    LanguageSelectorPage(
-                                      appSupportedLocales,
-                                      (locale) async {
-                                        await setLocale(locale);
-                                        App.setLocale(context, locale);
-                                      },
-                                      locale,
-                                    ),
-                                  ).then((value) {
-                                    setState(() {});
-                                  });
-                                },
-                              )
-                            : const SizedBox(),
-                        Image.asset(
-                          "assets/sheild-front-gradient.png",
-                          width: 200,
-                          height: 200,
-                        ),
-                        const SizedBox(height: 12),
-                        const Text(
-                          "ente",
-                          style: TextStyle(
-                            fontWeight: FontWeight.bold,
-                            fontFamily: 'Montserrat',
-                            fontSize: 42,
-                          ),
-                        ),
-                        const SizedBox(height: 4),
-                        Text(
-                          "Authenticator",
-                          style: Theme.of(context).textTheme.headlineMedium,
-                        ),
-                        const SizedBox(height: 32),
-                        Text(
-                          l10n.onBoardingBody,
-                          textAlign: TextAlign.center,
-                          style:
-                              Theme.of(context).textTheme.titleLarge!.copyWith(
-                                    color: Colors.white38,
-                                    // color: Theme.of(context)
-                                    //                            .colorScheme
-                                    //                            .mutedTextColor,
+            child: Padding(
+              padding:
+                  const EdgeInsets.symmetric(vertical: 40.0, horizontal: 40),
+              child: Column(
+                children: [
+                  Column(
+                    children: [
+                      kDebugMode
+                          ? GestureDetector(
+                              child: const Align(
+                                alignment: Alignment.topRight,
+                                child: Text("Lang"),
+                              ),
+                              onTap: () async {
+                                final locale = await getLocale();
+                                routeToPage(
+                                  context,
+                                  LanguageSelectorPage(
+                                    appSupportedLocales,
+                                    (locale) async {
+                                      await setLocale(locale);
+                                      App.setLocale(context, locale);
+                                    },
+                                    locale,
                                   ),
+                                ).then((value) {
+                                  setState(() {});
+                                });
+                              },
+                            )
+                          : const SizedBox(),
+                      Image.asset(
+                        "assets/sheild-front-gradient.png",
+                        width: 200,
+                        height: 200,
+                      ),
+                      const SizedBox(height: 12),
+                      const Text(
+                        "ente",
+                        style: TextStyle(
+                          fontWeight: FontWeight.bold,
+                          fontFamily: 'Montserrat',
+                          fontSize: 42,
                         ),
-                      ],
-                    ),
-                    const SizedBox(height: 100),
-                    Container(
-                      width: double.infinity,
-                      padding: const EdgeInsets.symmetric(horizontal: 20),
-                      child: GradientButton(
-                        onTap: _navigateToSignUpPage,
-                        text: l10n.newUser,
                       ),
-                    ),
-                    const SizedBox(height: 4),
-                    Container(
-                      width: double.infinity,
-                      padding: const EdgeInsets.fromLTRB(20, 12, 20, 0),
-                      child: Hero(
-                        tag: "log_in",
-                        child: ElevatedButton(
-                          style: Theme.of(context)
-                              .colorScheme
-                              .optionalActionButtonStyle,
-                          onPressed: _navigateToSignInPage,
-                          child: Text(
-                            l10n.existingUser,
-                            style: const TextStyle(
-                              color: Colors.black, // same for both themes
+                      const SizedBox(height: 4),
+                      Text(
+                        "Authenticator",
+                        style: Theme.of(context).textTheme.headlineMedium,
+                      ),
+                      const SizedBox(height: 32),
+                      Text(
+                        l10n.onBoardingBody,
+                        textAlign: TextAlign.center,
+                        style: Theme.of(context).textTheme.titleLarge!.copyWith(
+                              color: Colors.white38,
                             ),
+                      ),
+                    ],
+                  ),
+                  const SizedBox(height: 100),
+                  Container(
+                    width: double.infinity,
+                    padding: const EdgeInsets.symmetric(horizontal: 20),
+                    child: GradientButton(
+                      onTap: _navigateToSignUpPage,
+                      text: l10n.newUser,
+                    ),
+                  ),
+                  const SizedBox(height: 4),
+                  Container(
+                    width: double.infinity,
+                    padding: const EdgeInsets.fromLTRB(20, 12, 20, 0),
+                    child: Hero(
+                      tag: "log_in",
+                      child: ElevatedButton(
+                        style: Theme.of(context)
+                            .colorScheme
+                            .optionalActionButtonStyle,
+                        onPressed: _navigateToSignInPage,
+                        child: Text(
+                          l10n.existingUser,
+                          style: const TextStyle(
+                            color: Colors.black, // same for both themes
                           ),
                         ),
                       ),
                     ),
-                    const SizedBox(height: 4),
-                    Container(
-                      width: double.infinity,
-                      padding: const EdgeInsets.only(top: 20, bottom: 20),
-                      child: GestureDetector(
-                        onTap: _optForOfflineMode,
-                        child: Center(
-                          child: Text(
-                            l10n.useOffline,
-                            style: body.copyWith(
-                              color:
-                                  Theme.of(context).colorScheme.mutedTextColor,
-                            ),
+                  ),
+                  const SizedBox(height: 4),
+                  Container(
+                    width: double.infinity,
+                    padding: const EdgeInsets.only(top: 20, bottom: 20),
+                    child: GestureDetector(
+                      onTap: _optForOfflineMode,
+                      child: Center(
+                        child: Text(
+                          l10n.useOffline,
+                          style: body.copyWith(
+                            color: Theme.of(context).colorScheme.mutedTextColor,
                           ),
                         ),
                       ),
                     ),
-                  ],
-                ),
+                  ),
+                ],
               ),
             ),
           ),
@@ -183,13 +174,16 @@ class _OnboardingPageState extends State<OnboardingPage> {
 
   Future<void> _optForOfflineMode() async {
     bool canCheckBio = await LocalAuthentication().canCheckBiometrics;
-    if(!canCheckBio) {
-      showToast(context, "Sorry, biometric authentication is not supported on this device.");
+    if (!canCheckBio) {
+      showToast(
+        context,
+        "Sorry, biometric authentication is not supported on this device.",
+      );
       return;
     }
     final bool hasOptedBefore = Configuration.instance.hasOptedForOfflineMode();
     ButtonResult? result;
-    if(!hasOptedBefore) {
+    if (!hasOptedBefore) {
       result = await showChoiceActionSheet(
         context,
         title: context.l10n.warning,
@@ -208,7 +202,6 @@ class _OnboardingPageState extends State<OnboardingPage> {
         ),
       );
     }
-
   }
 
   void _navigateToSignUpPage() {

lib/ui/account/password_reentry_page.dart

@@ -260,8 +260,8 @@ class _PasswordReentryPageState extends State<PasswordReentryPage> {
                 ),
                 Padding(
                   padding: const EdgeInsets.symmetric(horizontal: 20),
-                  child: Row(
-                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  child: Wrap(
+                    alignment: WrapAlignment.spaceBetween,
                     children: [
                       GestureDetector(
                         behavior: HitTestBehavior.opaque,
@@ -274,17 +274,13 @@ class _PasswordReentryPageState extends State<PasswordReentryPage> {
                             ),
                           );
                         },
-                        child: Center(
-                          child: Text(
-                            context.l10n.forgotPassword,
-                            style: Theme.of(context)
-                                .textTheme
-                                .titleMedium!
-                                .copyWith(
-                                  fontSize: 14,
-                                  decoration: TextDecoration.underline,
-                                ),
-                          ),
+                        child: Text(
+                          context.l10n.forgotPassword,
+                          style:
+                              Theme.of(context).textTheme.titleMedium!.copyWith(
+                                    fontSize: 14,
+                                    decoration: TextDecoration.underline,
+                                  ),
                         ),
                       ),
                       GestureDetector(
@@ -300,17 +296,13 @@ class _PasswordReentryPageState extends State<PasswordReentryPage> {
                           Navigator.of(context)
                               .popUntil((route) => route.isFirst);
                         },
-                        child: Center(
-                          child: Text(
-                            context.l10n.changeEmail,
-                            style: Theme.of(context)
-                                .textTheme
-                                .titleMedium!
-                                .copyWith(
-                                  fontSize: 14,
-                                  decoration: TextDecoration.underline,
-                                ),
-                          ),
+                        child: Text(
+                          context.l10n.changeEmail,
+                          style:
+                              Theme.of(context).textTheme.titleMedium!.copyWith(
+                                    fontSize: 14,
+                                    decoration: TextDecoration.underline,
+                                  ),
                         ),
                       ),
                     ],

lib/ui/common/dynamic_fab.dart

@@ -1,5 +1,3 @@
-
-
 import 'dart:math' as math;
 
 import 'package:ente_auth/ente_theme_data.dart';
@@ -62,10 +60,10 @@ class DynamicFAB extends StatelessWidget {
     } else {
       return Container(
         width: double.infinity,
-        height: 56,
         padding: const EdgeInsets.symmetric(horizontal: 20),
         child: OutlinedButton(
-          onPressed: isFormValid! ? onPressedFunction as void Function()? : null,
+          onPressed:
+              isFormValid! ? onPressedFunction as void Function()? : null,
           child: Text(buttonText!),
         ),
       );

lib/ui/home/coach_mark_widget.dart

@@ -21,43 +21,37 @@ class CoachMarkWidget extends StatelessWidget {
         children: [
           Expanded(
             child: Container(
-              width: double.infinity,
               color: Theme.of(context).colorScheme.background.withOpacity(0.1),
               child: BackdropFilter(
                 filter: ImageFilter.blur(sigmaX: 8, sigmaY: 8),
-                child: Row(
+                child: Column(
                   mainAxisAlignment: MainAxisAlignment.center,
-                  crossAxisAlignment: CrossAxisAlignment.center,
                   children: [
-                    Column(
-                      mainAxisAlignment: MainAxisAlignment.center,
-                      children: [
-                        const Icon(
-                          Icons.swipe_left,
-                          size: 42,
-                        ),
-                        const SizedBox(
-                          height: 24,
-                        ),
-                        Text(
-                          l10n.swipeHint,
-                          style: Theme.of(context).textTheme.titleLarge,
-                        ),
-                        const SizedBox(
-                          height: 36,
-                        ),
-                        SizedBox(
-                          width: 160,
-                          child: OutlinedButton(
-                            onPressed: () async {
-                              await PreferenceService.instance
-                                  .setHasShownCoachMark(true);
-                              Bus.instance.fire(CodesUpdatedEvent());
-                            },
-                            child: Text(l10n.ok),
-                          ),
-                        ),
-                      ],
+                    const Icon(
+                      Icons.swipe_left,
+                      size: 42,
+                    ),
+                    const SizedBox(
+                      height: 12,
+                    ),
+                    Text(
+                      l10n.swipeHint,
+                      style: Theme.of(context).textTheme.titleLarge,
+                      textAlign: TextAlign.center,
+                    ),
+                    const SizedBox(
+                      height: 16,
+                    ),
+                    SizedBox(
+                      width: 160,
+                      child: OutlinedButton(
+                        onPressed: () async {
+                          await PreferenceService.instance
+                              .setHasShownCoachMark(true);
+                          Bus.instance.fire(CodesUpdatedEvent());
+                        },
+                        child: Text(l10n.ok),
+                      ),
                     ),
                   ],
                 ),

lib/ui/home/home_empty_state.dart

@@ -20,79 +20,76 @@ class HomeEmptyStateWidget extends StatelessWidget {
     final l10n = context.l10n;
     return SingleChildScrollView(
       child: Center(
-        child: ConstrainedBox(
-          constraints: const BoxConstraints.tightFor(height: 800, width: 450),
-          child: Padding(
-            padding: const EdgeInsets.symmetric(vertical: 40.0, horizontal: 40),
-            child: Column(
-              mainAxisAlignment: MainAxisAlignment.spaceBetween,
-              children: [
-                Column(
-                  children: [
-                    Image.asset(
-                      "assets/wallet-front-gradient.png",
-                      width: 200,
-                      height: 200,
+        child: Padding(
+          padding: const EdgeInsets.symmetric(vertical: 40.0, horizontal: 40),
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              Column(
+                children: [
+                  Image.asset(
+                    "assets/wallet-front-gradient.png",
+                    width: 200,
+                    height: 200,
+                  ),
+                  Text(
+                    l10n.setupFirstAccount,
+                    textAlign: TextAlign.center,
+                    style: Theme.of(context).textTheme.headlineMedium,
+                  ),
+                  const SizedBox(height: 64),
+                  SizedBox(
+                    width: 400,
+                    child: OutlinedButton(
+                      onPressed: onScanTap,
+                      child: Text(l10n.importScanQrCode),
                     ),
-                    Text(
-                      l10n.setupFirstAccount,
-                      textAlign: TextAlign.center,
-                      style: Theme.of(context).textTheme.headlineMedium,
-                    ),
-                    const SizedBox(height: 64),
-                    SizedBox(
-                      width: 400,
-                      child: OutlinedButton(
-                        onPressed: onScanTap,
-                        child: Text(l10n.importScanQrCode),
-                      ),
-                    ),
-                    const SizedBox(height: 18),
-                    SizedBox(
-                      width: 400,
-                      child: OutlinedButton(
-                        onPressed: onManuallySetupTap,
-                        child: Text(l10n.importEnterSetupKey),
-                      ),
+                  ),
+                  const SizedBox(height: 18),
+                  SizedBox(
+                    width: 400,
+                    child: OutlinedButton(
+                      onPressed: onManuallySetupTap,
+                      child: Text(l10n.importEnterSetupKey),
                     ),
-                    const SizedBox(height: 54),
-                    InkWell(
-                      onTap: () {
-                        routeToPage(context, ImportCodePage());
-                      },
-                      child: Text(
-                        l10n.importCodes,
-                        textAlign: TextAlign.center,
-                        style: getEnteTextTheme(context)
-                            .bodyFaint
-                            .copyWith(decoration: TextDecoration.underline),
-                      ),
+                  ),
+                  const SizedBox(height: 54),
+                  InkWell(
+                    onTap: () {
+                      routeToPage(context, ImportCodePage());
+                    },
+                    child: Text(
+                      l10n.importCodes,
+                      textAlign: TextAlign.center,
+                      style: getEnteTextTheme(context)
+                          .bodyFaint
+                          .copyWith(decoration: TextDecoration.underline),
                     ),
-                    const SizedBox(height: 18),
-                    InkWell(
-                      onTap: () {
-                        showModalBottomSheet<void>(
-                          backgroundColor:
-                              Theme.of(context).colorScheme.background,
-                          barrierColor: Colors.black87,
-                          context: context,
-                          builder: (context) {
-                            return const FAQQuestionsWidget();
-                          },
-                        );
-                      },
-                      child: Text(
-                        l10n.faq,
-                        textAlign: TextAlign.center,
-                        style: getEnteTextTheme(context)
-                            .bodyFaint
-                            .copyWith(decoration: TextDecoration.underline),
-                      ),
+                  ),
+                  const SizedBox(height: 18),
+                  InkWell(
+                    onTap: () {
+                      showModalBottomSheet<void>(
+                        backgroundColor:
+                            Theme.of(context).colorScheme.background,
+                        barrierColor: Colors.black87,
+                        context: context,
+                        builder: (context) {
+                          return const FAQQuestionsWidget();
+                        },
+                      );
+                    },
+                    child: Text(
+                      l10n.faq,
+                      textAlign: TextAlign.center,
+                      style: getEnteTextTheme(context)
+                          .bodyFaint
+                          .copyWith(decoration: TextDecoration.underline),
                     ),
-                  ],
-                ),
-              ],
-            ),
+                  ),
+                ],
+              ),
+            ],
           ),
         ),
       ),

lib/ui/settings/data/import/import_service.dart

@@ -3,9 +3,9 @@ import 'package:ente_auth/ui/settings/data/import/aegis_import.dart';
 import 'package:ente_auth/ui/settings/data/import/bitwarden_import.dart';
 import 'package:ente_auth/ui/settings/data/import/encrypted_ente_import.dart';
 import 'package:ente_auth/ui/settings/data/import/google_auth_import.dart';
+import 'package:ente_auth/ui/settings/data/import/lastpass_import.dart';
 import 'package:ente_auth/ui/settings/data/import/plain_text_import.dart';
 import 'package:ente_auth/ui/settings/data/import/raivo_plain_text_import.dart';
-import 'package:ente_auth/ui/settings/data/import/lastpass_import.dart';
 import 'package:ente_auth/ui/settings/data/import_page.dart';
 import 'package:flutter/cupertino.dart';