From 94790229e6004fe375893b3f91dd82d9027a104c Mon Sep 17 00:00:00 2001
From: ggurdin <46800240+ggurdin@users.noreply.github.com>
Date: Tue, 18 Mar 2025 09:41:18 -0400
Subject: [PATCH] chore: improve spacing in vertical activity suggestions view,
 replace arrows with scroll bar (#2165)

---
 .../activity_suggestions_area.dart            | 118 ++++--------------
 .../suggestions_page.dart                     |   6 +-
 2 files changed, 24 insertions(+), 100 deletions(-)

diff --git a/lib/pangea/activity_suggestions/activity_suggestions_area.dart b/lib/pangea/activity_suggestions/activity_suggestions_area.dart
index 3bcb5b133..61fa8687e 100644
--- a/lib/pangea/activity_suggestions/activity_suggestions_area.dart
+++ b/lib/pangea/activity_suggestions/activity_suggestions_area.dart
@@ -4,8 +4,6 @@
 import 'package:flutter/material.dart';
 
 import 'package:collection/collection.dart';
-import 'package:flutter_gen/gen_l10n/l10n.dart';
-import 'package:go_router/go_router.dart';
 
 import 'package:fluffychat/config/themes.dart';
 import 'package:fluffychat/pangea/activity_planner/activity_plan_model.dart';
@@ -130,103 +128,29 @@ class ActivitySuggestionsAreaState extends State<ActivitySuggestionsArea> {
       ),
     );
 
-    return Container(
-      alignment: Alignment.topCenter,
-      padding: EdgeInsets.symmetric(
-        horizontal: FluffyThemes.isColumnMode(context) ? 16.0 : 4.0,
-      ),
-      height: _isColumnMode ? cardHeight * 1.5 : null,
-      child: _isColumnMode
-          ? Stack(
-              alignment: Alignment.center,
-              children: [
-                Padding(
-                  padding: const EdgeInsets.symmetric(
-                    horizontal: 45.0,
-                  ), // Space for buttons
-                  child: ListView(
-                    controller: _scrollController,
-                    scrollDirection: Axis.horizontal,
-                    padding: const EdgeInsets.symmetric(vertical: 4.0),
-                    children: cards,
-                  ),
-                ),
-
-                // Left button
-                Positioned(
-                  left: 0,
-                  top: cardHeight / 1.5 - 20.0,
-                  child: Container(
-                    decoration: BoxDecoration(
-                      color: Theme.of(context)
-                          .cardColor
-                          .withAlpha((0.8 * 255).toInt()),
-                      borderRadius: BorderRadius.circular(25),
-                    ),
-                    child: IconButton(
-                      icon: const Icon(Icons.chevron_left),
-                      onPressed: () => _scrollToNextItem(AxisDirection.left),
-                      iconSize: 24.0,
-                      padding: const EdgeInsets.all(8.0),
-                      constraints: const BoxConstraints(),
-                    ),
-                  ),
-                ),
-
-                // Right button
-                Positioned(
-                  right: 0,
-                  top: cardHeight / 1.5 - 20.0,
-                  child: Container(
-                    decoration: BoxDecoration(
-                      color: Theme.of(context)
-                          .cardColor
-                          .withAlpha((0.8 * 255).toInt()),
-                      borderRadius: BorderRadius.circular(25),
-                    ),
-                    child: IconButton(
-                      icon: const Icon(Icons.chevron_right),
-                      onPressed: () => _scrollToNextItem(AxisDirection.right),
-                      iconSize: 24.0,
-                      padding: const EdgeInsets.all(8.0),
-                      constraints: const BoxConstraints(),
-                    ),
-                  ),
-                ),
-
-                // Create Chat button
-                Positioned(
-                  right: 0,
-                  top: cardHeight / 1.5 + 30.0,
-                  child: Container(
-                    decoration: BoxDecoration(
-                      color: Theme.of(context)
-                          .primaryColor
-                          .withAlpha((0.9 * 255).toInt()),
-                      borderRadius: BorderRadius.circular(25),
-                    ),
-                    child: IconButton(
-                      icon: const Icon(Icons.add_comment, color: Colors.white),
-                      tooltip: L10n.of(context).createOwnChat,
-                      onPressed: () => context.go('/rooms/newgroup'),
-                      iconSize: 24.0,
-                      padding: const EdgeInsets.all(8.0),
-                      constraints: const BoxConstraints(),
-                    ),
-                  ),
-                ),
-              ],
-            )
-          : SizedBox.expand(
-              child: SingleChildScrollView(
+    return _isColumnMode
+        ? ConstrainedBox(
+            constraints: BoxConstraints(maxHeight: cardHeight + 36.0),
+            child: Scrollbar(
+              controller: _scrollController,
+              thumbVisibility: true,
+              child: ListView(
                 controller: _scrollController,
-                child: Wrap(
-                  alignment: WrapAlignment.spaceBetween,
-                  runSpacing: 8.0,
-                  children: cards,
-                ),
+                scrollDirection: Axis.horizontal,
+                padding: const EdgeInsets.symmetric(vertical: 4.0),
+                children: cards,
               ),
             ),
-    );
+          )
+        : SizedBox.expand(
+            child: SingleChildScrollView(
+              controller: _scrollController,
+              child: Wrap(
+                alignment: WrapAlignment.spaceEvenly,
+                runSpacing: 16.0,
+                children: cards,
+              ),
+            ),
+          );
   }
 }
diff --git a/lib/pangea/activity_suggestions/suggestions_page.dart b/lib/pangea/activity_suggestions/suggestions_page.dart
index b346c96f6..83eee87fa 100644
--- a/lib/pangea/activity_suggestions/suggestions_page.dart
+++ b/lib/pangea/activity_suggestions/suggestions_page.dart
@@ -16,8 +16,8 @@ class SuggestionsPage extends StatelessWidget {
     final theme = Theme.of(context);
     return Padding(
       padding: EdgeInsets.symmetric(
-        horizontal: FluffyThemes.isColumnMode(context) ? 36.0 : 16.0,
-        vertical: FluffyThemes.isColumnMode(context) ? 24.0 : 16.0,
+        horizontal: FluffyThemes.isColumnMode(context) ? 36.0 : 8.0,
+        vertical: FluffyThemes.isColumnMode(context) ? 24.0 : 8.0,
       ),
       child: SafeArea(
         child: Column(
@@ -30,7 +30,7 @@ class SuggestionsPage extends StatelessWidget {
                 left: FluffyThemes.isColumnMode(context) ? 12.0 : 4.0,
                 right: FluffyThemes.isColumnMode(context) ? 12.0 : 4.0,
                 top: 16.0,
-                bottom: 8.0,
+                bottom: 16.0,
               ),
               child: Row(
                 mainAxisAlignment: MainAxisAlignment.spaceBetween,