From cfe5a0abf9462c4735add72068032d63ccd29c2d Mon Sep 17 00:00:00 2001
From: ggurdin <46800240+ggurdin@users.noreply.github.com>
Date: Mon, 17 Mar 2025 16:42:52 -0400
Subject: [PATCH] chore: improvements to activity suggestion UI on mobile
 (#2159)

---
 .../activity_suggestions_area.dart            |  21 ++--
 .../suggestions_page.dart                     | 102 +++++++++---------
 2 files changed, 62 insertions(+), 61 deletions(-)

diff --git a/lib/pangea/activity_suggestions/activity_suggestions_area.dart b/lib/pangea/activity_suggestions/activity_suggestions_area.dart
index cebf9c669..3bcb5b133 100644
--- a/lib/pangea/activity_suggestions/activity_suggestions_area.dart
+++ b/lib/pangea/activity_suggestions/activity_suggestions_area.dart
@@ -43,8 +43,8 @@ class ActivitySuggestionsAreaState extends State<ActivitySuggestionsArea> {
   final List<ActivityPlanModel> _activityItems = [];
   final ScrollController _scrollController = ScrollController();
   final double cardHeight = 235.0;
-  final double cardPadding = 8.0;
-  double get cardWidth => _isColumnMode ? 225.0 : 160.0;
+  double get cardPadding => _isColumnMode ? 8.0 : 0.0;
+  double get cardWidth => _isColumnMode ? 225.0 : 150.0;
 
   void _scrollToItem(int index) {
     final viewportDimension = _scrollController.position.viewportDimension;
@@ -133,8 +133,7 @@ class ActivitySuggestionsAreaState extends State<ActivitySuggestionsArea> {
     return Container(
       alignment: Alignment.topCenter,
       padding: EdgeInsets.symmetric(
-        vertical: 16.0,
-        horizontal: _isColumnMode ? 16.0 : 0.0,
+        horizontal: FluffyThemes.isColumnMode(context) ? 16.0 : 4.0,
       ),
       height: _isColumnMode ? cardHeight * 1.5 : null,
       child: _isColumnMode
@@ -218,12 +217,14 @@ class ActivitySuggestionsAreaState extends State<ActivitySuggestionsArea> {
                 ),
               ],
             )
-          : SingleChildScrollView(
-              controller: _scrollController,
-              child: Wrap(
-                spacing: 8.0,
-                runSpacing: 8.0,
-                children: cards,
+          : SizedBox.expand(
+              child: SingleChildScrollView(
+                controller: _scrollController,
+                child: Wrap(
+                  alignment: WrapAlignment.spaceBetween,
+                  runSpacing: 8.0,
+                  children: cards,
+                ),
               ),
             ),
     );
diff --git a/lib/pangea/activity_suggestions/suggestions_page.dart b/lib/pangea/activity_suggestions/suggestions_page.dart
index 3ae2b3143..b346c96f6 100644
--- a/lib/pangea/activity_suggestions/suggestions_page.dart
+++ b/lib/pangea/activity_suggestions/suggestions_page.dart
@@ -16,62 +16,62 @@ class SuggestionsPage extends StatelessWidget {
     final theme = Theme.of(context);
     return Padding(
       padding: EdgeInsets.symmetric(
-        horizontal: FluffyThemes.isColumnMode(context) ? 36.0 : 8.0,
-        vertical: 24.0,
+        horizontal: FluffyThemes.isColumnMode(context) ? 36.0 : 16.0,
+        vertical: FluffyThemes.isColumnMode(context) ? 24.0 : 16.0,
       ),
-      child: Scaffold(
-        appBar: AppBar(
-          automaticallyImplyLeading: false,
-          title: Row(
-            mainAxisAlignment: MainAxisAlignment.spaceBetween,
-            children: [
-              Text(
-                L10n.of(context).learnByTexting,
-                style: const TextStyle(fontWeight: FontWeight.bold),
+      child: SafeArea(
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            if (!FluffyThemes.isColumnMode(context))
+              const LearningProgressIndicators(),
+            Padding(
+              padding: EdgeInsets.only(
+                left: FluffyThemes.isColumnMode(context) ? 12.0 : 4.0,
+                right: FluffyThemes.isColumnMode(context) ? 12.0 : 4.0,
+                top: 16.0,
+                bottom: 8.0,
               ),
-              Container(
-                decoration: BoxDecoration(
-                  color: theme.colorScheme.surfaceContainerHighest,
-                  borderRadius: BorderRadius.circular(36.0),
-                ),
-                padding: const EdgeInsets.symmetric(
-                  vertical: 8.0,
-                  horizontal: 16.0,
-                ),
-                child: Row(
-                  spacing: 8.0,
-                  children: [
-                    PangeaLogoSvg(
-                      width: 24.0,
-                      forceColor: theme.colorScheme.primary,
+              child: Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: [
+                  Text(
+                    L10n.of(context).learnByTexting,
+                    style: theme.textTheme.titleLarge
+                        ?.copyWith(fontWeight: FontWeight.bold),
+                  ),
+                  Container(
+                    decoration: BoxDecoration(
+                      color: theme.colorScheme.surfaceContainerHighest,
+                      borderRadius: BorderRadius.circular(36.0),
                     ),
-                    Text(
-                      AppConfig.applicationName,
-                      style: theme.textTheme.titleMedium?.copyWith(
-                        fontWeight: FontWeight.bold,
-                      ),
+                    padding: const EdgeInsets.symmetric(
+                      vertical: 6.0,
+                      horizontal: 10.0,
                     ),
-                  ],
-                ),
+                    child: Row(
+                      spacing: 8.0,
+                      children: [
+                        PangeaLogoSvg(
+                          width: 16.0,
+                          forceColor: theme.colorScheme.primary,
+                        ),
+                        Text(
+                          AppConfig.applicationName,
+                          style: theme.textTheme.titleSmall?.copyWith(
+                            fontWeight: FontWeight.bold,
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                ],
               ),
-            ],
-          ),
-        ),
-        body: SafeArea(
-          child: Column(
-            mainAxisSize: MainAxisSize.min,
-            children: [
-              if (!FluffyThemes.isColumnMode(context))
-                const Padding(
-                  padding: EdgeInsets.all(24.0),
-                  child: LearningProgressIndicators(),
-                ),
-              const SizedBox(height: 16.0),
-              const Flexible(
-                child: ActivitySuggestionsArea(),
-              ),
-            ],
-          ),
+            ),
+            const Flexible(
+              child: ActivitySuggestionsArea(),
+            ),
+          ],
         ),
       ),
     );