💄 Use bottom modal sheet instead of popover

✨ Show strike on user profile page

lib/providers/sn_network.dart

@@ -249,8 +249,11 @@ class SnNetworkProvider {
     return null;
   }
 
-  String getAttachmentUrl(String ky) {
+  String getAttachmentUrl(String ky, {bool preview = true}) {
     if (ky.startsWith("http")) return ky;
+    if (!preview) {
+      return '${client.options.baseUrl}/cgi/uc/attachments/$ky?preview=false';
+    }
     return '${client.options.baseUrl}/cgi/uc/attachments/$ky';
   }
 

lib/screens/account/profile_page.dart

@@ -15,6 +15,7 @@ import 'package:surface/providers/experience.dart';
 import 'package:surface/providers/relationship.dart';
 import 'package:surface/providers/sn_network.dart';
 import 'package:surface/screens/abuse_report.dart';
+import 'package:surface/screens/account/punishments.dart';
 import 'package:surface/types/account.dart';
 import 'package:surface/types/check_in.dart';
 import 'package:surface/types/post.dart';
@@ -457,7 +458,7 @@ class _UserScreenState extends State<UserScreen>
                     ],
                   ).padding(right: 8),
                   if (_account!.profile!.description.isNotEmpty)
-                    const Gap(12)
+                    const Gap(4)
                   else
                     const Gap(8),
                   if (_account!.profile!.description.isNotEmpty)
@@ -503,7 +504,8 @@ class _UserScreenState extends State<UserScreen>
                       ],
                     ).padding(vertical: 8, horizontal: 12),
                   ),
-                  const Gap(8),
+                  if (_account!.badges.isNotEmpty) const Gap(8),
+                  if (_account!.badges.isNotEmpty)
                     Wrap(
                       spacing: 4,
                       runSpacing: 4,
@@ -619,6 +621,17 @@ class _UserScreenState extends State<UserScreen>
                 ],
               ).padding(all: 16),
             ),
+          if (_account?.punishments.isNotEmpty ?? false)
+            SliverToBoxAdapter(child: const Divider()),
+          if (_account?.punishments.isNotEmpty ?? false)
+            SliverToBoxAdapter(
+              child: Column(
+                children: [
+                  for (final ele in _account!.punishments)
+                    PunishmentInfoCard(ele: ele),
+                ],
+              ),
+            ),
           if (_account?.profile?.links.isNotEmpty ?? false)
             SliverToBoxAdapter(child: const Divider()),
           if (_account?.profile?.links.isNotEmpty ?? false)

lib/screens/account/punishments.dart

@@ -107,6 +107,28 @@ class _PunishmentsScreenState extends State<PunishmentsScreen> {
                 itemCount: _punishments?.length ?? 0,
                 itemBuilder: (context, index) {
                   final ele = _punishments![index];
+                  return PunishmentInfoCard(ele: ele);
+                },
+                separatorBuilder: (_, __) => const Gap(8),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class PunishmentInfoCard extends StatelessWidget {
+  const PunishmentInfoCard({
+    super.key,
+    required this.ele,
+  });
+
+  final SnPunishment ele;
+
+  @override
+  Widget build(BuildContext context) {
     return Card(
       margin: EdgeInsets.symmetric(horizontal: 8),
       child: Column(
@@ -117,10 +139,8 @@ class _PunishmentsScreenState extends State<PunishmentsScreen> {
               Icon(kPunishmentIcons[ele.type], size: 20),
               const Gap(6),
               Expanded(
-                              child: Text('punishmentType${ele.type}')
+                child:
-                                  .tr()
+                    Text('punishmentType${ele.type}').tr().fontSize(16).bold(),
-                                  .fontSize(16)
-                                  .bold(),
               ),
             ],
           ),
@@ -175,13 +195,5 @@ class _PunishmentsScreenState extends State<PunishmentsScreen> {
         ],
       ).padding(horizontal: 24, vertical: 16),
     );
-                },
-                separatorBuilder: (_, __) => const Gap(8),
-              ),
-            ),
-          ),
-        ],
-      ),
-    );
   }
 }

lib/types/account.dart

@@ -22,6 +22,7 @@ abstract class SnAccount with _$SnAccount {
     required String language,
     required SnAccountProfile? profile,
     @Default([]) List<SnAccountBadge> badges,
+    @Default([]) List<SnPunishment> punishments,
     required DateTime? suspendedAt,
     required int? affiliatedId,
     required int? affiliatedTo,

lib/types/account.freezed.dart

@@ -29,6 +29,7 @@ mixin _$SnAccount {
   String get language;
   SnAccountProfile? get profile;
   List<SnAccountBadge> get badges;
+  List<SnPunishment> get punishments;
   DateTime? get suspendedAt;
   int? get affiliatedId;
   int? get affiliatedTo;
@@ -69,6 +70,8 @@ mixin _$SnAccount {
                 other.language == language) &&
             (identical(other.profile, profile) || other.profile == profile) &&
             const DeepCollectionEquality().equals(other.badges, badges) &&
+            const DeepCollectionEquality()
+                .equals(other.punishments, punishments) &&
             (identical(other.suspendedAt, suspendedAt) ||
                 other.suspendedAt == suspendedAt) &&
             (identical(other.affiliatedId, affiliatedId) ||
@@ -99,6 +102,7 @@ mixin _$SnAccount {
         language,
         profile,
         const DeepCollectionEquality().hash(badges),
+        const DeepCollectionEquality().hash(punishments),
         suspendedAt,
         affiliatedId,
         affiliatedTo,
@@ -108,7 +112,7 @@ mixin _$SnAccount {
 
   @override
   String toString() {
-    return 'SnAccount(id: $id, createdAt: $createdAt, updatedAt: $updatedAt, deletedAt: $deletedAt, confirmedAt: $confirmedAt, contacts: $contacts, avatar: $avatar, banner: $banner, name: $name, nick: $nick, permNodes: $permNodes, language: $language, profile: $profile, badges: $badges, suspendedAt: $suspendedAt, affiliatedId: $affiliatedId, affiliatedTo: $affiliatedTo, automatedBy: $automatedBy, automatedId: $automatedId)';
+    return 'SnAccount(id: $id, createdAt: $createdAt, updatedAt: $updatedAt, deletedAt: $deletedAt, confirmedAt: $confirmedAt, contacts: $contacts, avatar: $avatar, banner: $banner, name: $name, nick: $nick, permNodes: $permNodes, language: $language, profile: $profile, badges: $badges, punishments: $punishments, suspendedAt: $suspendedAt, affiliatedId: $affiliatedId, affiliatedTo: $affiliatedTo, automatedBy: $automatedBy, automatedId: $automatedId)';
   }
 }
 
@@ -132,6 +136,7 @@ abstract mixin class $SnAccountCopyWith<$Res> {
       String language,
       SnAccountProfile? profile,
       List<SnAccountBadge> badges,
+      List<SnPunishment> punishments,
       DateTime? suspendedAt,
       int? affiliatedId,
       int? affiliatedTo,
@@ -167,6 +172,7 @@ class _$SnAccountCopyWithImpl<$Res> implements $SnAccountCopyWith<$Res> {
     Object? language = null,
     Object? profile = freezed,
     Object? badges = null,
+    Object? punishments = null,
     Object? suspendedAt = freezed,
     Object? affiliatedId = freezed,
     Object? affiliatedTo = freezed,
@@ -230,6 +236,10 @@ class _$SnAccountCopyWithImpl<$Res> implements $SnAccountCopyWith<$Res> {
           ? _self.badges
           : badges // ignore: cast_nullable_to_non_nullable
               as List<SnAccountBadge>,
+      punishments: null == punishments
+          ? _self.punishments
+          : punishments // ignore: cast_nullable_to_non_nullable
+              as List<SnPunishment>,
       suspendedAt: freezed == suspendedAt
           ? _self.suspendedAt
           : suspendedAt // ignore: cast_nullable_to_non_nullable
@@ -286,6 +296,7 @@ class _SnAccount extends SnAccount {
       required this.language,
       required this.profile,
       final List<SnAccountBadge> badges = const [],
+      final List<SnPunishment> punishments = const [],
       required this.suspendedAt,
       required this.affiliatedId,
       required this.affiliatedTo,
@@ -294,6 +305,7 @@ class _SnAccount extends SnAccount {
       : _contacts = contacts,
         _permNodes = permNodes,
         _badges = badges,
+        _punishments = punishments,
         super._();
   factory _SnAccount.fromJson(Map<String, dynamic> json) =>
       _$SnAccountFromJson(json);
@@ -350,6 +362,15 @@ class _SnAccount extends SnAccount {
     return EqualUnmodifiableListView(_badges);
   }
 
+  final List<SnPunishment> _punishments;
+  @override
+  @JsonKey()
+  List<SnPunishment> get punishments {
+    if (_punishments is EqualUnmodifiableListView) return _punishments;
+    // ignore: implicit_dynamic_type
+    return EqualUnmodifiableListView(_punishments);
+  }
+
   @override
   final DateTime? suspendedAt;
   @override
@@ -401,6 +422,8 @@ class _SnAccount extends SnAccount {
                 other.language == language) &&
             (identical(other.profile, profile) || other.profile == profile) &&
             const DeepCollectionEquality().equals(other._badges, _badges) &&
+            const DeepCollectionEquality()
+                .equals(other._punishments, _punishments) &&
             (identical(other.suspendedAt, suspendedAt) ||
                 other.suspendedAt == suspendedAt) &&
             (identical(other.affiliatedId, affiliatedId) ||
@@ -431,6 +454,7 @@ class _SnAccount extends SnAccount {
         language,
         profile,
         const DeepCollectionEquality().hash(_badges),
+        const DeepCollectionEquality().hash(_punishments),
         suspendedAt,
         affiliatedId,
         affiliatedTo,
@@ -440,7 +464,7 @@ class _SnAccount extends SnAccount {
 
   @override
   String toString() {
-    return 'SnAccount(id: $id, createdAt: $createdAt, updatedAt: $updatedAt, deletedAt: $deletedAt, confirmedAt: $confirmedAt, contacts: $contacts, avatar: $avatar, banner: $banner, name: $name, nick: $nick, permNodes: $permNodes, language: $language, profile: $profile, badges: $badges, suspendedAt: $suspendedAt, affiliatedId: $affiliatedId, affiliatedTo: $affiliatedTo, automatedBy: $automatedBy, automatedId: $automatedId)';
+    return 'SnAccount(id: $id, createdAt: $createdAt, updatedAt: $updatedAt, deletedAt: $deletedAt, confirmedAt: $confirmedAt, contacts: $contacts, avatar: $avatar, banner: $banner, name: $name, nick: $nick, permNodes: $permNodes, language: $language, profile: $profile, badges: $badges, punishments: $punishments, suspendedAt: $suspendedAt, affiliatedId: $affiliatedId, affiliatedTo: $affiliatedTo, automatedBy: $automatedBy, automatedId: $automatedId)';
   }
 }
 
@@ -467,6 +491,7 @@ abstract mixin class _$SnAccountCopyWith<$Res>
       String language,
       SnAccountProfile? profile,
       List<SnAccountBadge> badges,
+      List<SnPunishment> punishments,
       DateTime? suspendedAt,
       int? affiliatedId,
       int? affiliatedTo,
@@ -503,6 +528,7 @@ class __$SnAccountCopyWithImpl<$Res> implements _$SnAccountCopyWith<$Res> {
     Object? language = null,
     Object? profile = freezed,
     Object? badges = null,
+    Object? punishments = null,
     Object? suspendedAt = freezed,
     Object? affiliatedId = freezed,
     Object? affiliatedTo = freezed,
@@ -566,6 +592,10 @@ class __$SnAccountCopyWithImpl<$Res> implements _$SnAccountCopyWith<$Res> {
           ? _self._badges
           : badges // ignore: cast_nullable_to_non_nullable
               as List<SnAccountBadge>,
+      punishments: null == punishments
+          ? _self._punishments
+          : punishments // ignore: cast_nullable_to_non_nullable
+              as List<SnPunishment>,
       suspendedAt: freezed == suspendedAt
           ? _self.suspendedAt
           : suspendedAt // ignore: cast_nullable_to_non_nullable

lib/types/account.g.dart

@@ -32,6 +32,10 @@ _SnAccount _$SnAccountFromJson(Map<String, dynamic> json) => _SnAccount(
               ?.map((e) => SnAccountBadge.fromJson(e as Map<String, dynamic>))
               .toList() ??
           const [],
+      punishments: (json['punishments'] as List<dynamic>?)
+              ?.map((e) => SnPunishment.fromJson(e as Map<String, dynamic>))
+              .toList() ??
+          const [],
       suspendedAt: json['suspended_at'] == null
           ? null
           : DateTime.parse(json['suspended_at'] as String),
@@ -57,6 +61,7 @@ Map<String, dynamic> _$SnAccountToJson(_SnAccount instance) =>
       'language': instance.language,
       'profile': instance.profile?.toJson(),
       'badges': instance.badges.map((e) => e.toJson()).toList(),
+      'punishments': instance.punishments.map((e) => e.toJson()).toList(),
       'suspended_at': instance.suspendedAt?.toIso8601String(),
       'affiliated_id': instance.affiliatedId,
       'affiliated_to': instance.affiliatedTo,

lib/widgets/account/account_popover.dart

@@ -22,12 +22,14 @@ class AccountPopoverCard extends StatelessWidget {
   Widget build(BuildContext context) {
     final sn = context.read<SnNetworkProvider>();
 
-    return Column(
+    return SingleChildScrollView(
+      child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
-      mainAxisSize: MainAxisSize.min,
         children: [
           if (data.banner.isNotEmpty)
-          Container(
+            ClipRRect(
+              borderRadius: BorderRadius.circular(16),
+              child: Container(
                 color: Theme.of(context).colorScheme.surfaceContainer,
                 child: AspectRatio(
                   aspectRatio: 16 / 7,
@@ -37,8 +39,10 @@ class AccountPopoverCard extends StatelessWidget {
                   ),
                 ),
               ),
+            ).padding(all: 16)
+          else
+            const Gap(16),
           // Top padding
-        Gap(16),
           Row(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
@@ -67,7 +71,8 @@ class AccountPopoverCard extends StatelessWidget {
                 },
                 icon: const Icon(Symbols.chevron_right),
                 padding: EdgeInsets.zero,
-              visualDensity: const VisualDensity(horizontal: -4, vertical: -4),
+                visualDensity:
+                    const VisualDensity(horizontal: -4, vertical: -4),
               ),
               const Gap(8)
             ],
@@ -86,7 +91,9 @@ class AccountPopoverCard extends StatelessWidget {
               data.profile?.description ?? '',
               maxLines: 2,
               overflow: TextOverflow.ellipsis,
-          ).padding(horizontal: 26, bottom: 8),
+            ).padding(horizontal: 26, bottom: 8)
+          else
+            const Gap(12),
           Row(
             crossAxisAlignment: CrossAxisAlignment.center,
             children: [
@@ -104,7 +111,8 @@ class AccountPopoverCard extends StatelessWidget {
                 child: LinearProgressIndicator(
                   value: calcLevelUpProgress(data.profile?.experience ?? 0),
                   borderRadius: BorderRadius.circular(8),
-                backgroundColor: Theme.of(context).colorScheme.surfaceContainer,
+                  backgroundColor:
+                      Theme.of(context).colorScheme.surfaceContainer,
                 ).alignment(Alignment.centerLeft),
               ),
             ],
@@ -156,8 +164,9 @@ class AccountPopoverCard extends StatelessWidget {
             },
           ),
           // Bottom padding
-        const Gap(16),
+          const Gap(64),
         ],
+      ),
     );
   }
 }

lib/widgets/attachment/attachment_list.dart

@@ -170,8 +170,7 @@ class _AttachmentListState extends State<AttachmentList> {
               child: Column(
                 children: widget.data
                     .mapIndexed(
-                      (idx, ele) => GestureDetector(
+                      (idx, ele) => AspectRatio(
-                        child: AspectRatio(
                         aspectRatio: ele?.data['ratio']?.toDouble() ?? 1,
                         child: Container(
                           constraints: constraints,
@@ -180,7 +179,21 @@ class _AttachmentListState extends State<AttachmentList> {
                             heroTag: heroTags[idx],
                             fit: BoxFit.cover,
                             filterQuality: widget.filterQuality,
+                            onZoom: () {
+                              context.pushTransparentRoute(
+                                AttachmentZoomView(
+                                  data: widget.data
+                                      .where((ele) =>
+                                          ele != null &&
+                                          ele.mediaType == SnMediaType.image)
+                                      .cast(),
+                                  initialIndex: idx,
+                                  heroTags: heroTags,
                                 ),
+                                backgroundColor: Colors.black.withOpacity(0.7),
+                                rootNavigator: true,
+                              );
+                            },
                           ),
                         ),
                       ),
@@ -211,26 +224,6 @@ class _AttachmentListState extends State<AttachmentList> {
                     child: AspectRatio(
                       aspectRatio:
                           (widget.data[idx]?.data['ratio'] ?? 1).toDouble(),
-                      child: GestureDetector(
-                        onTap: () {
-                          if (widget.data[idx]?.mediaType !=
-                              SnMediaType.image) {
-                            return;
-                          }
-                          context.pushTransparentRoute(
-                            AttachmentZoomView(
-                              data: widget.data
-                                  .where((ele) =>
-                                      ele != null &&
-                                      ele.mediaType == SnMediaType.image)
-                                  .cast(),
-                              initialIndex: idx,
-                              heroTags: heroTags,
-                            ),
-                            backgroundColor: Colors.black.withOpacity(0.7),
-                            rootNavigator: true,
-                          );
-                        },
                       child: Stack(
                         fit: StackFit.expand,
                         children: [
@@ -249,6 +242,23 @@ class _AttachmentListState extends State<AttachmentList> {
                                 data: widget.data[idx],
                                 heroTag: heroTags[idx],
                                 filterQuality: widget.filterQuality,
+                                onZoom: () {
+                                  context.pushTransparentRoute(
+                                    AttachmentZoomView(
+                                      data: widget.data
+                                          .where((ele) =>
+                                              ele != null &&
+                                              ele.mediaType ==
+                                                  SnMediaType.image)
+                                          .cast(),
+                                      initialIndex: idx,
+                                      heroTags: heroTags,
+                                    ),
+                                    backgroundColor:
+                                        Colors.black.withOpacity(0.7),
+                                    rootNavigator: true,
+                                  );
+                                },
                               ),
                             ),
                           ),
@@ -262,7 +272,6 @@ class _AttachmentListState extends State<AttachmentList> {
                         ],
                       ),
                     ),
-                    ),
                   );
                 },
                 separatorBuilder: (context, index) => const Gap(8),

lib/widgets/attachment/attachment_zoom.dart

@@ -181,7 +181,10 @@ class _AttachmentZoomViewState extends State<AttachmentZoomView> {
                             scaleState == PhotoViewScaleState.initial);
                       },
                       imageProvider: UniversalImage.provider(
-                        sn.getAttachmentUrl(widget.data.first.rid),
+                        sn.getAttachmentUrl(
+                          widget.data.first.rid,
+                          preview: false,
+                        ),
                       ),
                     ),
                   );
@@ -199,7 +202,10 @@ class _AttachmentZoomViewState extends State<AttachmentZoomView> {
                         widget.heroTags?.elementAt(idx) ?? uuid.v4();
                     return PhotoViewGalleryPageOptions(
                       imageProvider: UniversalImage.provider(
-                        sn.getAttachmentUrl(widget.data.elementAt(idx).rid),
+                        sn.getAttachmentUrl(
+                          widget.data.elementAt(idx).rid,
+                          preview: false,
+                        ),
                       ),
                       heroAttributes: PhotoViewHeroAttributes(
                         tag: 'attachment-${widget.data.first.rid}-$heroTag',

lib/widgets/chat/chat_message.dart

@@ -1,11 +1,8 @@
-import 'dart:math' as math;
-
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_context_menu/flutter_context_menu.dart';
 import 'package:gap/gap.dart';
 import 'package:material_symbols_icons/symbols.dart';
-import 'package:popover/popover.dart';
 import 'package:provider/provider.dart';
 import 'package:styled_widget/styled_widget.dart';
 import 'package:surface/providers/config.dart';
@@ -120,20 +117,9 @@ class ChatMessage extends StatelessWidget {
                       ),
                       onTap: () {
                         if (user == null) return;
-                        showPopover(
+                        showModalBottomSheet(
-                          backgroundColor:
-                              Theme.of(context).colorScheme.surface,
                           context: context,
-                          transition: PopoverTransition.other,
+                          builder: (context) => AccountPopoverCard(data: user),
-                          bodyBuilder: (context) => SizedBox(
-                            width: math.min(
-                                400, MediaQuery.of(context).size.width - 10),
-                            child: AccountPopoverCard(data: user),
-                          ),
-                          direction: PopoverDirection.bottom,
-                          arrowHeight: 5,
-                          arrowWidth: 15,
-                          arrowDxOffset: -190,
                         );
                       },
                     )

lib/widgets/post/post_item.dart

@@ -12,7 +12,6 @@ import 'package:go_router/go_router.dart';
 import 'package:google_fonts/google_fonts.dart';
 import 'package:material_symbols_icons/symbols.dart';
 import 'package:path_provider/path_provider.dart';
-import 'package:popover/popover.dart';
 import 'package:provider/provider.dart';
 import 'package:qr_flutter/qr_flutter.dart';
 import 'package:relative_time/relative_time.dart';
@@ -1274,20 +1273,11 @@ class _PostAvatar extends StatelessWidget {
               ),
             ),
       onTap: () {
-        showPopover(
+        showModalBottomSheet(
-          backgroundColor: Theme.of(context).colorScheme.surface,
           context: context,
-          transition: PopoverTransition.other,
+          builder: (context) => PublisherPopoverCard(
-          bodyBuilder: (context) => SizedBox(
-            width: math.min(400, MediaQuery.of(context).size.width - 10),
-            child: PublisherPopoverCard(
             data: data.publisher,
           ),
-          ),
-          direction: PopoverDirection.bottom,
-          arrowHeight: 5,
-          arrowWidth: 15,
-          arrowDxOffset: -190,
         );
       },
     );

lib/widgets/post/publisher_popover.dart

@@ -24,12 +24,14 @@ class PublisherPopoverCard extends StatelessWidget {
 
     final user = data.type == 0 ? ud.getFromCache(data.accountId) : null;
 
-    return Column(
+    return SingleChildScrollView(
+      child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
-      mainAxisSize: MainAxisSize.min,
         children: [
           if (data.banner.isNotEmpty)
-          Container(
+            ClipRRect(
+              borderRadius: BorderRadius.circular(16),
+              child: Container(
                 color: Theme.of(context).colorScheme.surfaceContainer,
                 child: AspectRatio(
                   aspectRatio: 16 / 7,
@@ -39,6 +41,8 @@ class PublisherPopoverCard extends StatelessWidget {
                   ),
                 ),
               ),
+            ).padding(all: 16)
+          else
             // Top padding
             Gap(16),
           Row(
@@ -70,7 +74,8 @@ class PublisherPopoverCard extends StatelessWidget {
                 },
                 icon: const Icon(Symbols.chevron_right),
                 padding: EdgeInsets.zero,
-              visualDensity: const VisualDensity(horizontal: -4, vertical: -4),
+                visualDensity:
+                    const VisualDensity(horizontal: -4, vertical: -4),
               ),
               const Gap(8)
             ],
@@ -98,7 +103,10 @@ class PublisherPopoverCard extends StatelessWidget {
                   mainAxisSize: MainAxisSize.min,
                   crossAxisAlignment: CrossAxisAlignment.center,
                   children: [
-                  Text('publisherSocialPoint').tr().fontSize(13).opacity(0.75),
+                    Text('publisherSocialPoint')
+                        .tr()
+                        .fontSize(13)
+                        .opacity(0.75),
                     Text((data.totalUpvote - data.totalDownvote).toString()),
                   ],
                 ),
@@ -114,7 +122,10 @@ class PublisherPopoverCard extends StatelessWidget {
                   mainAxisSize: MainAxisSize.min,
                   crossAxisAlignment: CrossAxisAlignment.center,
                   children: [
-                  Text('publisherTotalUpvote').tr().fontSize(13).opacity(0.75),
+                    Text('publisherTotalUpvote')
+                        .tr()
+                        .fontSize(13)
+                        .opacity(0.75),
                     Text(data.totalUpvote.toString()),
                   ],
                 ),
@@ -141,8 +152,9 @@ class PublisherPopoverCard extends StatelessWidget {
             ],
           ).padding(horizontal: 16),
           // Bottom padding
-        const Gap(16),
+          const Gap(64),
         ],
+      ),
     );
   }
 }