fix: padding issues (#47)

## Pull Request Description

This fixes a bunch of padding issues, and also improves padding in other
areas.

Issue Number: #29

---------

Co-authored-by: PartyDonut <PartyDonut@users.noreply.github.com>

lib/screens/collections/add_to_collection.dart

@@ -1,14 +1,16 @@
-import 'package:ficonsax/ficonsax.dart';
-import 'package:fladder/providers/collections_provider.dart';
-import 'package:fladder/screens/shared/adaptive_dialog.dart';
-import 'package:fladder/screens/shared/fladder_snackbar.dart';
-import 'package:fladder/util/localization_helper.dart';
-import 'package:fladder/widgets/shared/modal_bottom_sheet.dart';
 import 'package:flutter/material.dart';
+
+import 'package:ficonsax/ficonsax.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
 import 'package:fladder/models/item_base_model.dart';
+import 'package:fladder/providers/collections_provider.dart';
+import 'package:fladder/screens/shared/adaptive_dialog.dart';
+import 'package:fladder/screens/shared/fladder_snackbar.dart';
 import 'package:fladder/screens/shared/outlined_text_field.dart';
+import 'package:fladder/util/localization_helper.dart';
+import 'package:fladder/widgets/shared/alert_content.dart';
+import 'package:fladder/widgets/shared/modal_bottom_sheet.dart';
 
 Future<void> addItemToCollection(BuildContext context, List<ItemBaseModel> item) {
   return showDialogAdaptive(
@@ -40,19 +42,12 @@ class _AddToCollectionState extends ConsumerState<AddToCollection> {
   @override
   Widget build(BuildContext context) {
     final collectonOptions = ref.watch(provider);
-    return Card(
+    return ActionContent(
-      color: Theme.of(context).colorScheme.surface,
+      title: Container(
-      child: Column(
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          SizedBox(height: MediaQuery.paddingOf(context).top),
-          Container(
         color: Theme.of(context).colorScheme.surface,
         child: Column(
           children: [
-                Padding(
+            Row(
-                  padding: const EdgeInsets.symmetric(horizontal: 16),
-                  child: Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
                 if (widget.items.length == 1)
@@ -71,14 +66,13 @@ class _AddToCollectionState extends ConsumerState<AddToCollection> {
                 )
               ],
             ),
-                ),
             if (widget.items.length == 1) ItemBottomSheetPreview(item: widget.items.first),
           ],
         ),
       ),
-          Padding(
+      child: Column(
-            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+        children: [
-            child: Row(
+          Row(
             children: [
               Flexible(
                 child: OutlinedTextField(
@@ -98,13 +92,12 @@ class _AddToCollectionState extends ConsumerState<AddToCollection> {
                         }
                       : null,
                   icon: const Icon(Icons.add_rounded)),
-                const SizedBox(width: 4),
             ],
           ),
-          ),
           Flexible(
             child: ListView(
               shrinkWrap: true,
+              padding: const EdgeInsets.symmetric(vertical: 12),
               children: [
                 ...collectonOptions.collections.entries.map(
                   (e) {
@@ -125,11 +118,21 @@ class _AddToCollectionState extends ConsumerState<AddToCollection> {
                         },
                       );
                     } else {
-                      return ListTile(
+                      return Container(
-                        title: Text(e.key.name),
+                        margin: const EdgeInsets.all(8),
-                        trailing: Row(
+                        child: Card(
+                          elevation: 0,
+                          child: Padding(
+                            padding: const EdgeInsets.all(8),
+                            child: Row(
                               mainAxisSize: MainAxisSize.min,
                               children: [
+                                Expanded(
+                                  child: Text(
+                                    e.key.name,
+                                    style: Theme.of(context).textTheme.bodyLarge,
+                                  ),
+                                ),
                                 ElevatedButton(
                                   onPressed: () async {
                                     final response =
@@ -145,6 +148,8 @@ class _AddToCollectionState extends ConsumerState<AddToCollection> {
                                 ),
                               ],
                             ),
+                          ),
+                        ),
                       );
                     }
                   },
@@ -152,23 +157,14 @@ class _AddToCollectionState extends ConsumerState<AddToCollection> {
               ],
             ),
           ),
-          Container(
+        ],
-            color: Theme.of(context).colorScheme.surface,
+      ),
-            child: Padding(
+      actions: [
-              padding: const EdgeInsets.all(16),
-              child: Row(
-                mainAxisAlignment: MainAxisAlignment.end,
-                children: [
         FilledButton(
           onPressed: () => Navigator.of(context).pop(),
           child: Text(context.localized.close),
         )
       ],
-              ),
-            ),
-          ),
-        ],
-      ),
     );
   }
 }

lib/screens/metadata/identifty_screen.dart

@@ -13,6 +13,7 @@ import 'package:fladder/screens/shared/focused_outlined_text_field.dart';
 import 'package:fladder/screens/shared/media/external_urls.dart';
 import 'package:fladder/util/localization_helper.dart';
 import 'package:fladder/util/string_extensions.dart';
+import 'package:fladder/widgets/shared/alert_content.dart';
 
 Future<void> showIdentifyScreen(BuildContext context, ItemBaseModel item) async {
   return showDialogAdaptive(
@@ -50,22 +51,14 @@ class _IdentifyScreenState extends ConsumerState<IdentifyScreen> with TickerProv
     final state = ref.watch(provider);
     final posters = state.results;
     final processing = state.processing;
-    return MediaQuery.removePadding(
+    return ActionContent(
-      context: context,
+      showDividers: false,
-      child: Card(
+      title: Container(
         color: Theme.of(context).colorScheme.surface,
         child: Column(
           mainAxisSize: MainAxisSize.min,
           children: [
-            Container(
+            Row(
-              color: Theme.of(context).colorScheme.surface,
-              child: Column(
-                mainAxisSize: MainAxisSize.min,
-                children: [
-                  SizedBox(height: MediaQuery.paddingOf(context).top),
-                  Padding(
-                    padding: const EdgeInsets.all(16.0),
-                    child: Row(
               children: [
                 Text(
                   widget.item.detailedName(context) ?? widget.item.name,
@@ -77,7 +70,6 @@ class _IdentifyScreenState extends ConsumerState<IdentifyScreen> with TickerProv
                     icon: const Icon(IconsaxOutline.refresh)),
               ],
             ),
-                  ),
             TabBar(
               isScrollable: true,
               controller: tabController,
@@ -98,9 +90,6 @@ class _IdentifyScreenState extends ConsumerState<IdentifyScreen> with TickerProv
           ],
         ),
       ),
-            Expanded(
-              child: Padding(
-                padding: const EdgeInsets.all(16),
       child: TabBarView(
         controller: tabController,
         children: [
@@ -123,9 +112,7 @@ class _IdentifyScreenState extends ConsumerState<IdentifyScreen> with TickerProv
                     Switch.adaptive(
                       value: state.replaceAllImages,
                       onChanged: (value) {
-                                  ref
+                        ref.read(provider.notifier).update((state) => state.copyWith(replaceAllImages: value));
-                                      .read(provider.notifier)
-                                      .update((state) => state.copyWith(replaceAllImages: value));
                       },
                     ),
                   ],
@@ -160,9 +147,7 @@ class _IdentifyScreenState extends ConsumerState<IdentifyScreen> with TickerProv
                                       children: [
                                         Text(
                                             "${result.name ?? ""}${result.productionYear != null ? "(${result.productionYear})" : ""}"),
-                                                  Opacity(
+                                        Opacity(opacity: 0.65, child: Text(result.providerIds?.keys.join(',') ?? ""))
-                                                      opacity: 0.65,
-                                                      child: Text(result.providerIds?.keys.join(',') ?? ""))
                                       ],
                                     ),
                                   ),
@@ -178,8 +163,7 @@ class _IdentifyScreenState extends ConsumerState<IdentifyScreen> with TickerProv
                                               .firstWhereOrNull((element) => element.key == providerKey)
                                               ?.urlFormatString;
 
-                                                    final url =
+                                          final url = externalId?.replaceAll("{0}", providerValue?.toString() ?? "");
-                                                        externalId?.replaceAll("{0}", providerValue?.toString() ?? "");
 
                                           launchUrl(context, url ?? "");
                                         },
@@ -190,12 +174,10 @@ class _IdentifyScreenState extends ConsumerState<IdentifyScreen> with TickerProv
                                     child: IconButton(
                                       onPressed: !processing
                                           ? () async {
-                                                        final response =
+                                              final response = await ref.read(provider.notifier).setIdentity(result);
-                                                            await ref.read(provider.notifier).setIdentity(result);
                                               if (response?.isSuccessful == true) {
                                                 fladderSnackbar(context,
-                                                              title:
+                                                    title: context.localized.setIdentityTo(result.name ?? ""));
-                                                                  context.localized.setIdentityTo(result.name ?? ""));
                                               } else {
                                                 fladderSnackbarResponse(context, response,
                                                     altTitle: context.localized.somethingWentWrong);
@@ -217,16 +199,7 @@ class _IdentifyScreenState extends ConsumerState<IdentifyScreen> with TickerProv
             )
         ],
       ),
-              ),
+      actions: [
-            ),
-            Container(
-              color: Theme.of(context).colorScheme.surface,
-              child: Padding(
-                padding: const EdgeInsets.all(16),
-                child: Row(
-                  mainAxisSize: MainAxisSize.max,
-                  mainAxisAlignment: MainAxisAlignment.end,
-                  children: [
         ElevatedButton(onPressed: () => Navigator.of(context).pop(), child: Text(context.localized.cancel)),
         const SizedBox(width: 16),
         FilledButton(
@@ -245,20 +218,14 @@ class _IdentifyScreenState extends ConsumerState<IdentifyScreen> with TickerProv
                 )
               : Text(context.localized.search),
         ),
-                    SizedBox(height: MediaQuery.paddingOf(context).bottom),
       ],
-                ),
-              ),
-            ),
-          ],
-        ),
-      ),
     );
   }
 
   ListView inputFields(IdentifyModel state) {
     return ListView(
       shrinkWrap: true,
+      padding: EdgeInsets.zero,
       children: [
         Row(
           mainAxisAlignment: MainAxisAlignment.end,

lib/screens/metadata/refresh_metadata.dart

@@ -1,3 +1,7 @@
+import 'package:flutter/material.dart';
+
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
 import 'package:fladder/jellyfin/enum_models.dart';
 import 'package:fladder/providers/user_provider.dart';
 import 'package:fladder/screens/settings/settings_list_tile.dart';
@@ -5,8 +9,6 @@ import 'package:fladder/screens/shared/fladder_snackbar.dart';
 import 'package:fladder/util/adaptive_layout.dart';
 import 'package:fladder/util/localization_helper.dart';
 import 'package:fladder/widgets/shared/enum_selection.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_riverpod/flutter_riverpod.dart';
 
 Future<void> showRefreshPopup(BuildContext context, String itemId, String itemName) async {
   return showDialog(
@@ -60,8 +62,11 @@ class _RefreshPopupDialogState extends ConsumerState<RefreshPopupDialog> {
                   ),
                 ),
               ),
+              const Divider(),
               const SizedBox(height: 16),
-              EnumBox(
+              Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 16),
+                child: EnumBox(
                   current: refreshMode.label(context),
                   itemBuilder: (context) => MetadataRefresh.values
                       .map((value) => PopupMenuItem(
@@ -73,6 +78,7 @@ class _RefreshPopupDialogState extends ConsumerState<RefreshPopupDialog> {
                           ))
                       .toList(),
                 ),
+              ),
               if (refreshMode != MetadataRefresh.defaultRefresh)
                 SettingsListTile(
                   label: Text(context.localized.replaceExistingImages),
@@ -87,7 +93,7 @@ class _RefreshPopupDialogState extends ConsumerState<RefreshPopupDialog> {
                   style: Theme.of(context).textTheme.bodyLarge,
                 ),
               ),
-              const SizedBox(height: 16),
+              const Divider(),
               Container(
                 color: Theme.of(context).colorScheme.surface,
                 child: Padding(

lib/screens/playlists/add_to_playlists.dart

@@ -1,14 +1,16 @@
-import 'package:ficonsax/ficonsax.dart';
-import 'package:fladder/providers/playlist_provider.dart';
-import 'package:fladder/screens/shared/adaptive_dialog.dart';
-import 'package:fladder/screens/shared/fladder_snackbar.dart';
-import 'package:fladder/util/localization_helper.dart';
-import 'package:fladder/widgets/shared/modal_bottom_sheet.dart';
 import 'package:flutter/material.dart';
+
+import 'package:ficonsax/ficonsax.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
 import 'package:fladder/models/item_base_model.dart';
+import 'package:fladder/providers/playlist_provider.dart';
+import 'package:fladder/screens/shared/adaptive_dialog.dart';
+import 'package:fladder/screens/shared/fladder_snackbar.dart';
 import 'package:fladder/screens/shared/outlined_text_field.dart';
+import 'package:fladder/util/localization_helper.dart';
+import 'package:fladder/widgets/shared/alert_content.dart';
+import 'package:fladder/widgets/shared/modal_bottom_sheet.dart';
 
 Future<void> addItemToPlaylist(BuildContext context, List<ItemBaseModel> item) {
   return showDialogAdaptive(context: context, builder: (context) => AddToPlaylist(items: item));
@@ -35,19 +37,12 @@ class _AddToPlaylistState extends ConsumerState<AddToPlaylist> {
   @override
   Widget build(BuildContext context) {
     final collectonOptions = ref.watch(provider);
-    return Card(
+    return ActionContent(
-      color: Theme.of(context).colorScheme.surface,
+      title: Container(
-      child: Column(
-        mainAxisSize: MainAxisSize.min,
-        children: [
-          SizedBox(height: MediaQuery.paddingOf(context).top),
-          Container(
         color: Theme.of(context).colorScheme.surface,
         child: Column(
           children: [
-                Padding(
+            Row(
-                  padding: const EdgeInsets.symmetric(horizontal: 16),
-                  child: Row(
               mainAxisAlignment: MainAxisAlignment.spaceBetween,
               children: [
                 if (widget.items.length == 1)
@@ -66,14 +61,13 @@ class _AddToPlaylistState extends ConsumerState<AddToPlaylist> {
                 )
               ],
             ),
-                ),
             if (widget.items.length == 1) ItemBottomSheetPreview(item: widget.items.first),
           ],
         ),
       ),
-          Padding(
+      child: Column(
-            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
+        children: [
-            child: Row(
+          Row(
             children: [
               Flexible(
                 child: OutlinedTextField(
@@ -99,21 +93,29 @@ class _AddToPlaylistState extends ConsumerState<AddToPlaylist> {
                         }
                       : null,
                   icon: const Icon(Icons.add_rounded)),
-                const SizedBox(width: 8),
             ],
           ),
-          ),
           Flexible(
             child: ListView(
               shrinkWrap: true,
+              padding: const EdgeInsets.symmetric(vertical: 12),
               children: [
                 ...collectonOptions.collections.entries.map(
                   (e) {
-                    return ListTile(
+                    return Container(
-                      title: Text(e.key.name),
+                      margin: const EdgeInsets.symmetric(vertical: 8),
-                      trailing: Row(
+                      child: Card(
+                        elevation: 0,
+                        child: Padding(
+                          padding: const EdgeInsets.all(10),
+                          child: Row(
                             mainAxisSize: MainAxisSize.min,
                             children: [
+                              Expanded(
+                                  child: Text(
+                                e.key.name,
+                                style: Theme.of(context).textTheme.bodyLarge,
+                              )),
                               IconButton.filledTonal(
                                 style: IconButton.styleFrom(
                                     shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8))),
@@ -130,30 +132,22 @@ class _AddToPlaylistState extends ConsumerState<AddToPlaylist> {
                               ),
                             ],
                           ),
+                        ),
+                      ),
                     );
                   },
                 ),
-                const SizedBox(height: 8),
               ],
             ),
           ),
-          Container(
+        ],
-            color: Theme.of(context).colorScheme.surface,
+      ),
-            child: Padding(
+      actions: [
-              padding: const EdgeInsets.all(16),
-              child: Row(
-                mainAxisAlignment: MainAxisAlignment.end,
-                children: [
         FilledButton(
           onPressed: () => Navigator.of(context).pop(),
           child: Text(context.localized.close),
         )
       ],
-              ),
-            ),
-          ),
-        ],
-      ),
     );
   }
 }

lib/screens/settings/settings_list_tile.dart

@@ -31,6 +31,8 @@ class SettingsListTile extends StatelessWidget {
       shape: const RoundedRectangleBorder(
           borderRadius: BorderRadius.only(topLeft: Radius.circular(8), bottomLeft: Radius.circular(8))),
       margin: EdgeInsets.zero,
+      child: MediaQuery(
+        data: const MediaQueryData(padding: EdgeInsets.zero),
         child: ListTile(
           minVerticalPadding: 12,
           minLeadingWidth: 16,
@@ -38,7 +40,7 @@ class SettingsListTile extends StatelessWidget {
           shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
           horizontalTitleGap: 0,
           titleAlignment: ListTileTitleAlignment.center,
-        contentPadding: const EdgeInsets.only(right: 12),
+          contentPadding: const EdgeInsets.only(right: 12, left: 2),
           leading: (suffix ?? iconWidget) != null
               ? Padding(
                   padding: const EdgeInsets.only(left: 8.0, right: 16.0),
@@ -67,6 +69,7 @@ class SettingsListTile extends StatelessWidget {
           subtitle: subLabel,
           onTap: onTap,
         ),
+      ),
     );
   }
 }

lib/screens/settings/settings_scaffold.dart

@@ -43,11 +43,11 @@ class SettingsScaffold extends ConsumerWidget {
                     backgroundColor: Theme.of(context).scaffoldBackgroundColor,
                     leading: context.router.backButton(),
                     flexibleSpace: FlexibleSpaceBar(
-                      titlePadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16)
+                      titlePadding: const EdgeInsets.symmetric(horizontal: 16)
                           .add(EdgeInsets.only(left: padding.left, right: padding.right)),
                       title: Row(
                         children: [
-                          Text(label, style: Theme.of(context).textTheme.headlineSmall),
+                          Text(label, style: Theme.of(context).textTheme.headlineLarge),
                           const Spacer(),
                           if (showUserIcon)
                             SizedBox.fromSize(
@@ -73,9 +73,12 @@ class SettingsScaffold extends ConsumerWidget {
                           style: Theme.of(context).textTheme.headlineLarge),
                     ),
                   ),
-                SliverList(
+                SliverPadding(
+                  padding: MediaQuery.paddingOf(context),
+                  sliver: SliverList(
                     delegate: SliverChildListDelegate(items),
                   ),
+                ),
                 if (bottomActions.isEmpty)
                   const SliverToBoxAdapter(child: SizedBox(height: kBottomNavigationBarHeight + 40)),
               ],

lib/screens/settings/widgets/settings_label_divider.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
 class SettingsLabelDivider extends ConsumerWidget {
@@ -8,11 +9,7 @@ class SettingsLabelDivider extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     return Padding(
-      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8).add(
+      padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
-        EdgeInsets.symmetric(
-          horizontal: MediaQuery.paddingOf(context).horizontal,
-        ),
-      ),
       child: Text(
         label,
         style: Theme.of(context).textTheme.titleMedium?.copyWith(

lib/screens/shared/adaptive_dialog.dart

@@ -1,12 +1,13 @@
-import 'package:fladder/util/adaptive_layout.dart';
 import 'package:flutter/material.dart';
 
+import 'package:fladder/util/adaptive_layout.dart';
+
 Future<void> showDialogAdaptive(
-    {required BuildContext context, bool useSafeArea = true, required Widget Function(BuildContext context) builder}) {
+    {required BuildContext context, required Widget Function(BuildContext context) builder}) {
   if (AdaptiveLayout.of(context).inputDevice == InputDevice.pointer) {
     return showDialog(
       context: context,
-      useSafeArea: useSafeArea,
+      useSafeArea: false,
       builder: (context) => Dialog(
         child: builder(context),
       ),
@@ -14,7 +15,7 @@ Future<void> showDialogAdaptive(
   } else {
     return showDialog(
       context: context,
-      useSafeArea: useSafeArea,
+      useSafeArea: false,
       builder: (context) => Dialog.fullscreen(
         child: builder(context),
       ),

lib/screens/shared/default_titlebar.dart

@@ -9,7 +9,7 @@ class DefaultTitleBar extends ConsumerStatefulWidget {
   final String? label;
   final double? height;
   final Brightness? brightness;
-  const DefaultTitleBar({this.height = 35, this.label, this.brightness, super.key});
+  const DefaultTitleBar({this.height = defaultTitleBarHeight, this.label, this.brightness, super.key});
 
   @override
   ConsumerState<ConsumerStatefulWidget> createState() => _DefaultTitleBarState();
@@ -161,7 +161,13 @@ class _DefaultTitleBarState extends ConsumerState<DefaultTitleBar> with WindowLi
               ),
             ],
           ),
-        TargetPlatform.macOS => null,
+        TargetPlatform.macOS => const Row(
+            children: [
+              Spacer(),
+              Text("Fladder"),
+              SizedBox(width: 16),
+            ],
+          ),
         _ => Text(widget.label ?? "Fladder"),
       },
     );

lib/screens/shared/detail_scaffold.dart

@@ -140,32 +140,28 @@ class _DetailScaffoldState extends ConsumerState<DetailScaffold> {
             //Top row buttons
             IconTheme(
               data: IconThemeData(color: Theme.of(context).colorScheme.onSurface),
-              child: Transform.translate(
+              child: Padding(
-                offset: const Offset(0, kToolbarHeight),
+                padding: MediaQuery.paddingOf(context).add(
+                  const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+                ),
                 child: Row(
                   children: [
-                    Padding(
+                    IconButton.filledTonal(
-                      padding: const EdgeInsets.only(left: 16),
-                      child: IconButton.filledTonal(
                       style: IconButton.styleFrom(
                         backgroundColor: backGroundColor,
                       ),
                       onPressed: () => context.router.popBack(),
                       icon: Padding(
-                          padding:
+                        padding: EdgeInsets.all(AdaptiveLayout.of(context).inputDevice == InputDevice.pointer ? 0 : 4),
-                              EdgeInsets.all(AdaptiveLayout.of(context).inputDevice == InputDevice.pointer ? 0 : 4),
                         child: const Icon(IconsaxOutline.arrow_left_2),
                       ),
                     ),
-                    ),
                     const Spacer(),
-                    Padding(
+                    AnimatedSize(
-                      padding: const EdgeInsets.only(right: 16),
-                      child: AnimatedSize(
                       duration: const Duration(milliseconds: 250),
                       child: Container(
-                          decoration: BoxDecoration(
+                        decoration:
-                              color: backGroundColor, borderRadius: FladderTheme.defaultShape.borderRadius),
+                            BoxDecoration(color: backGroundColor, borderRadius: FladderTheme.defaultShape.borderRadius),
                         child: Row(
                           mainAxisSize: MainAxisSize.min,
                           children: [
@@ -209,7 +205,14 @@ class _DetailScaffoldState extends ConsumerState<DetailScaffold> {
                                 ),
                               ),
                             if (AdaptiveLayout.of(context).size == ScreenLayout.single)
-                                const SizedBox(height: 30, width: 30, child: SettingsUserIcon()),
+                              Container(
+                                margin: const EdgeInsets.symmetric(horizontal: 6),
+                                child: const SizedBox(
+                                  height: 30,
+                                  width: 30,
+                                  child: SettingsUserIcon(),
+                                ),
+                              ),
                             Tooltip(
                               message: context.localized.home,
                               child: IconButton(
@@ -221,7 +224,6 @@ class _DetailScaffoldState extends ConsumerState<DetailScaffold> {
                         ),
                       ),
                     ),
-                    ),
                   ],
                 ),
               ),

lib/screens/syncing/sync_item_details.dart

@@ -1,5 +1,9 @@
+import 'package:flutter/material.dart';
+
 import 'package:background_downloader/background_downloader.dart';
 import 'package:ficonsax/ficonsax.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
 import 'package:fladder/models/items/episode_model.dart';
 import 'package:fladder/models/syncing/sync_item.dart';
 import 'package:fladder/providers/settings/client_settings_provider.dart';
@@ -17,9 +21,8 @@ import 'package:fladder/util/adaptive_layout.dart';
 import 'package:fladder/util/list_padding.dart';
 import 'package:fladder/util/localization_helper.dart';
 import 'package:fladder/util/size_formatting.dart';
+import 'package:fladder/widgets/shared/alert_content.dart';
 import 'package:fladder/widgets/shared/icon_button_await.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_riverpod/flutter_riverpod.dart';
 
 Future<void> showSyncItemDetails(
   BuildContext context,
@@ -28,7 +31,6 @@ Future<void> showSyncItemDetails(
 ) {
   return showDialogAdaptive(
     context: context,
-    useSafeArea: false,
     builder: (context) => SyncItemDetails(
       syncItem: syncItem,
     ),
@@ -55,20 +57,14 @@ class _SyncItemDetailsState extends ConsumerState<SyncItemDetails> {
 
     return SyncMarkedForDelete(
         syncedItem: syncedItem,
-      child: SafeArea(      
+        child: ActionContent(
-        child: Padding(
+          title: Row(
-          padding: const EdgeInsets.all(16.0),
-          child: Column(
-            mainAxisSize: MainAxisSize.min,
-            crossAxisAlignment: CrossAxisAlignment.center,
-            children: [
-              Row(
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
             children: [
               Card(
                   elevation: 1,
                   child: Padding(
-                        padding: const EdgeInsets.all(8.0),
+                    padding: const EdgeInsets.all(12.0),
                     child: Text(baseItem?.type.label(context) ?? ""),
                   )),
               Text(
@@ -81,11 +77,12 @@ class _SyncItemDetailsState extends ConsumerState<SyncItemDetails> {
               )
             ],
           ),
+          child: Column(
+            mainAxisSize: MainAxisSize.min,
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: [
               if (baseItem != null) ...{
-                const Divider(),
+                Row(
-                Padding(
-                  padding: const EdgeInsets.symmetric(vertical: 8),
-                  child: Row(
                   mainAxisSize: MainAxisSize.min,
                   crossAxisAlignment: CrossAxisAlignment.center,
                   children: [
@@ -192,7 +189,6 @@ class _SyncItemDetailsState extends ConsumerState<SyncItemDetails> {
                       ),
                   ].addInBetween(const SizedBox(width: 16)),
                 ),
-                ),
               },
               const Divider(),
               if (syncChildren.isNotEmpty == true)
@@ -206,11 +202,9 @@ class _SyncItemDetailsState extends ConsumerState<SyncItemDetails> {
                     ],
                   ),
                 ),
-              Padding(
+            ],
-                padding: const EdgeInsets.only(top: 16),
+          ),
-                child: Row(
+          actions: [
-                  mainAxisAlignment: MainAxisAlignment.end,
-                  children: [
             if (baseItem is! EpisodeModel)
               ElevatedButton(
                 style: ElevatedButton.styleFrom(
@@ -247,12 +241,6 @@ class _SyncItemDetailsState extends ConsumerState<SyncItemDetails> {
                 child: Text(context.localized.syncOpenParent),
               )
           ],
-                ),
+        ));
-              )
-            ],
-          ),
-        ),
-      ),
-    );
   }
 }

lib/screens/syncing/widgets/sync_markedfordelete.dart

@@ -1,9 +1,12 @@
-import 'package:ficonsax/ficonsax.dart';
-import 'package:fladder/models/syncing/sync_item.dart';
-import 'package:fladder/util/list_padding.dart';
 import 'package:flutter/material.dart';
+
+import 'package:ficonsax/ficonsax.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
+import 'package:fladder/models/syncing/sync_item.dart';
+import 'package:fladder/util/list_padding.dart';
+
+///This is a wrapper widget for marking a synced item as deleted (while it is being deleted)
 class SyncMarkedForDelete extends ConsumerWidget {
   final SyncedItem syncedItem;
   final Widget child;

lib/screens/video_player/video_player_controls.dart

@@ -208,13 +208,7 @@ class _DesktopControlsState extends ConsumerState<DesktopControls> {
           Colors.black.withOpacity(0),
         ],
       )),
-      child: Padding(
+      child: Stack(
-        padding:
-            EdgeInsets.only(top: topPadding + (AdaptiveLayout.of(context).platform == TargetPlatform.macOS ? 28 : 0.0)),
-        child: Container(
-          alignment: Alignment.topCenter,
-          height: 80,
-          child: Column(
         children: [
           if (AdaptiveLayout.of(context).isDesktop)
             const Flexible(
@@ -223,6 +217,14 @@ class _DesktopControlsState extends ConsumerState<DesktopControls> {
                 child: DefaultTitleBar(),
               ),
             ),
+          Flexible(
+            child: Padding(
+              padding: MediaQuery.paddingOf(context).copyWith(bottom: 0),
+              child: Container(
+                alignment: Alignment.topCenter,
+                height: 80,
+                child: Column(
+                  children: [
                     Padding(
                       padding: const EdgeInsets.symmetric(horizontal: 12),
                       child: Row(
@@ -249,6 +251,9 @@ class _DesktopControlsState extends ConsumerState<DesktopControls> {
                 ),
               ),
             ),
+          ),
+        ],
+      ),
     );
   }
 
@@ -264,10 +269,9 @@ class _DesktopControlsState extends ConsumerState<DesktopControls> {
         ],
       )),
       child: Padding(
-        padding: EdgeInsets.only(bottom: bottomPadding)
+        padding: MediaQuery.paddingOf(context).add(
-            .copyWith(bottom: 21)
+          const EdgeInsets.symmetric(horizontal: 16).copyWith(bottom: 12),
-            .add(const EdgeInsets.symmetric(vertical: 16))
+        ),
-            .add(EdgeInsets.symmetric(horizontal: AdaptiveLayout.of(context).isDesktop ? 32 : 0)),
         child: Column(
           children: [
             Padding(

lib/util/adaptive_layout.dart

@@ -121,6 +121,8 @@ class AdaptiveLayout extends InheritedWidget {
   }
 }
 
+const defaultTitleBarHeight = 35.0;
+
 class AdaptiveLayoutBuilder extends ConsumerStatefulWidget {
   final List<LayoutPoints> layoutPoints;
   final LayoutState fallBack;
@@ -182,7 +184,12 @@ class _AdaptiveLayoutBuilderState extends ConsumerState<AdaptiveLayoutBuilder> {
 
   @override
   Widget build(BuildContext context) {
-    return AdaptiveLayout(
+    return MediaQuery(
+      data: MediaQuery.of(context).copyWith(
+        padding: isDesktop || kIsWeb ? const EdgeInsets.only(top: defaultTitleBarHeight, bottom: 16) : null,
+        viewPadding: isDesktop || kIsWeb ? const EdgeInsets.only(top: defaultTitleBarHeight, bottom: 16) : null,
+      ),
+      child: AdaptiveLayout(
         layout: layout,
         controller: controller,
         size: size,
@@ -196,6 +203,7 @@ class _AdaptiveLayoutBuilderState extends ConsumerState<AdaptiveLayoutBuilder> {
           LayoutState.desktop => const PosterDefaults(size: 400, ratio: 0.55),
         },
         child: widget.child,
+      ),
     );
   }
 }

lib/widgets/navigation_scaffold/components/navigation_body.dart

@@ -111,10 +111,7 @@ class _NavigationBodyState extends ConsumerState<NavigationBody> {
   }
 
   Widget navigationRail(BuildContext context) {
-    return Padding(
+    return Column(
-      key: const Key('navigation_rail'),
-      padding: AdaptiveLayout.of(context).isDesktop ? EdgeInsets.zero : MediaQuery.of(context).padding,
-      child: Column(
       children: [
         if (AdaptiveLayout.of(context).isDesktop && AdaptiveLayout.of(context).platform != TargetPlatform.macOS) ...{
           const SizedBox(height: 4),
@@ -123,10 +120,12 @@ class _NavigationBodyState extends ConsumerState<NavigationBody> {
             style: Theme.of(context).textTheme.titleSmall,
           ),
         },
-          if (AdaptiveLayout.of(context).platform == TargetPlatform.macOS)
+        Flexible(
-            const SizedBox(height: 32)
+          child: Padding(
-          else
+            key: const Key('navigation_rail'),
-            const SizedBox(height: 16),
+            padding: MediaQuery.paddingOf(context).copyWith(right: 0),
+            child: Column(
+              children: [
                 IconButton(
                   onPressed: () {
                     if (AdaptiveLayout.layoutOf(context) != LayoutState.desktop) {
@@ -181,6 +180,9 @@ class _NavigationBodyState extends ConsumerState<NavigationBody> {
                 if (AdaptiveLayout.of(context).inputDevice == InputDevice.pointer) const SizedBox(height: 16),
               ],
             ),
+          ),
+        ),
+      ],
     );
   }
 }

lib/widgets/shared/alert_content.dart

@@ -0,0 +1,49 @@
+import 'package:flutter/material.dart';
+
+import 'package:fladder/util/list_padding.dart';
+
+class ActionContent extends StatelessWidget {
+  final Widget? title;
+  final Widget child;
+  final List<Widget> actions;
+  final bool showDividers;
+  final EdgeInsetsGeometry? padding;
+  const ActionContent({
+    this.title,
+    required this.child,
+    this.padding,
+    this.showDividers = true,
+    this.actions = const [],
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: padding ?? MediaQuery.paddingOf(context).add(const EdgeInsets.symmetric(horizontal: 16)),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          if (title != null) ...[
+            title!,
+            if (showDividers)
+              const Divider(
+                height: 4,
+              ),
+          ],
+          Expanded(child: child),
+          if (actions.isNotEmpty) ...[
+            if (showDividers)
+              const Divider(
+                height: 4,
+              ),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.end,
+              children: actions,
+            )
+          ],
+        ].addInBetween(const SizedBox(height: 16)),
+      ),
+    );
+  }
+}

lib/widgets/shared/item_actions.dart

@@ -1,9 +1,10 @@
 // ignore_for_file: public_member_api_docs, sort_constructors_first
 import 'dart:async';
 
-import 'package:collection/collection.dart';
 import 'package:flutter/material.dart';
 
+import 'package:collection/collection.dart';
+
 abstract class ItemAction {
   Widget toMenuItemButton();
   PopupMenuEntry toPopupMenuItem({bool useIcons = false});
@@ -67,7 +68,11 @@ class ItemActionButton extends ItemAction {
                     iconTheme: IconThemeData(color: Theme.of(context).colorScheme.onSurface),
                   ),
                   child: Row(
-                    children: [if (icon != null) icon!, const SizedBox(width: 8), if (label != null) Flexible(child: label!)],
+                    children: [
+                      if (icon != null) icon!,
+                      const SizedBox(width: 8),
+                      if (label != null) Flexible(child: label!)
+                    ],
                   ),
                 ),
               );
@@ -82,25 +87,38 @@ class ItemActionButton extends ItemAction {
   }
 
   @override
-  ListTile toListItem(BuildContext context, {bool useIcons = false, bool shouldPop = true}) {
+  Widget toListItem(BuildContext context, {bool useIcons = false, bool shouldPop = true}) {
-    return ListTile(
+    return ElevatedButton(
-      onTap: () {
+      style: ButtonStyle(
+        backgroundColor: const WidgetStatePropertyAll(Colors.transparent),
+        padding: const WidgetStatePropertyAll(EdgeInsets.symmetric(horizontal: 12)),
+        minimumSize: const WidgetStatePropertyAll(Size(50, 50)),
+        elevation: const WidgetStatePropertyAll(0),
+        foregroundColor: WidgetStatePropertyAll(Theme.of(context).colorScheme.onSurface),
+      ),
+      onPressed: () {
         if (shouldPop) {
           Navigator.of(context).pop();
         }
         action?.call();
       },
-      title: useIcons
+      child: useIcons
-          ? Builder(builder: (context) {
+          ? Builder(
+              builder: (context) {
                 return Theme(
                   data: ThemeData(
                     iconTheme: IconThemeData(color: Theme.of(context).colorScheme.onSurface),
                   ),
                   child: Row(
-                  children: [if (icon != null) icon!, const SizedBox(width: 8), if (label != null) Flexible(child: label!)],
+                    children: [
+                      if (icon != null) icon!,
+                      const SizedBox(width: 8),
+                      if (label != null) Flexible(child: label!)
+                    ],
                   ),
                 );
-            })
+              },
+            )
           : label,
     );
   }

lib/widgets/shared/modal_bottom_sheet.dart

@@ -1,8 +1,10 @@
+import 'package:flutter/material.dart';
+
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
 import 'package:fladder/models/item_base_model.dart';
 import 'package:fladder/util/adaptive_layout.dart';
 import 'package:fladder/util/fladder_image.dart';
-import 'package:flutter/material.dart';
-import 'package:flutter_riverpod/flutter_riverpod.dart';
 
 Future<void> showBottomSheetPill({
   ItemBaseModel? item,
@@ -32,7 +34,10 @@ Future<void> showBottomSheetPill({
         controller: controller,
         children: [
           if (item != null) ...{
-            ItemBottomSheetPreview(item: item),
+            Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 12),
+              child: ItemBottomSheetPreview(item: item),
+            ),
             const Divider(),
           },
           content(context, controller),
@@ -51,9 +56,7 @@ class ItemBottomSheetPreview extends ConsumerWidget {
   Widget build(BuildContext context, WidgetRef ref) {
     return Column(
       children: [
-        Padding(
+        Row(
-          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
-          child: Row(
           children: [
             Card(
               child: SizedBox(
@@ -94,7 +97,6 @@ class ItemBottomSheetPreview extends ConsumerWidget {
             ),
           ],
         ),
-        ),
       ],
     );
   }