fix: lyrics modal sheet out of safe area so use 80% of screen height instead of full

lib/pages/lyrics/genius_lyrics.dart

@@ -1,6 +1,5 @@
 import 'package:fl_query_hooks/fl_query_hooks.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:palette_generator/palette_generator.dart';
 import 'package:spotify/spotify.dart';
@@ -15,8 +14,10 @@ import 'package:tuple/tuple.dart';
 
 class GeniusLyrics extends HookConsumerWidget {
   final PaletteColor palette;
+  final bool? isModal;
   const GeniusLyrics({
     required this.palette,
+    this.isModal,
     Key? key,
   }) : super(key: key);
 
@@ -36,6 +37,7 @@ class GeniusLyrics extends HookConsumerWidget {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.stretch,
       children: [
+        if (isModal != true) ...[
           Center(
             child: Text(
               playback.track?.name ?? "",
@@ -56,7 +58,8 @@ class GeniusLyrics extends HookConsumerWidget {
                       : textTheme.headline6)
                   ?.copyWith(color: palette.bodyTextColor),
             ),
-        ),
+          )
+        ],
         Expanded(
           child: SingleChildScrollView(
             child: Center(

lib/pages/lyrics/lyrics.dart

@@ -40,8 +40,8 @@ class LyricsPage extends HookConsumerWidget {
     );
 
     Widget body = [
-      SyncedLyrics(palette: palette),
+      SyncedLyrics(palette: palette, isModal: isModal),
-      GeniusLyrics(palette: palette),
+      GeniusLyrics(palette: palette, isModal: isModal),
     ][index.value];
 
     final tabbar = PreferredSize(
@@ -70,11 +70,12 @@ class LyricsPage extends HookConsumerWidget {
       return SafeArea(
         child: Container(
           clipBehavior: Clip.hardEdge,
-          decoration: BoxDecoration(
+          decoration: const BoxDecoration(
-            color: Colors.black45,
+            borderRadius: BorderRadius.only(
-            borderRadius: BorderRadius.circular(8),
+              topLeft: Radius.circular(10),
+              topRight: Radius.circular(10),
+            ),
           ),
-          margin: const EdgeInsets.all(16),
           child: BackdropFilter(
             filter: ImageFilter.blur(sigmaX: 50, sigmaY: 50),
             child: Column(

lib/pages/lyrics/synced_lyrics.dart

@@ -26,8 +26,11 @@ final lyricDelayState = StateProvider<Duration>(
 
 class SyncedLyrics extends HookConsumerWidget {
   final PaletteColor palette;
+  final bool? isModal;
+
   const SyncedLyrics({
     required this.palette,
+    this.isModal,
     Key? key,
   }) : super(key: key);
 
@@ -70,15 +73,11 @@ class SyncedLyrics extends HookConsumerWidget {
             : textTheme.headline4?.copyWith(fontSize: 25))
         ?.copyWith(color: palette.titleTextColor);
 
-    return Column(
+    return Stack(
       children: [
-        SizedBox(
+        Column(
-          height: breakpoint >= Breakpoints.md ? 50 : 40,
-          child: Material(
-            type: MaterialType.transparency,
-            textStyle: PlatformTheme.of(context).textTheme!.body!,
-            child: Stack(
           children: [
+            if (isModal != true)
               Center(
                 child: SpotubeMarqueeText(
                   text: playback.track?.name ?? "Not Playing",
@@ -86,32 +85,7 @@ class SyncedLyrics extends HookConsumerWidget {
                   isHovering: true,
                 ),
               ),
-                Positioned(
+            if (isModal != true)
-                  top: 10,
-                  right: 10,
-                  child: Align(
-                    alignment: Alignment.centerRight,
-                    child: PlatformFilledButton(
-                      child: const Icon(
-                        SpotubeIcons.clock,
-                        size: 16,
-                      ),
-                      onPressed: () async {
-                        final delay = await showPlatformAlertDialog(
-                          context,
-                          builder: (context) => const LyricDelayAdjustDialog(),
-                        );
-                        if (delay != null) {
-                          ref.read(lyricDelayState.notifier).state = delay;
-                        }
-                      },
-                    ),
-                  ),
-                ),
-              ],
-            ),
-          ),
-        ),
               Center(
                 child: Text(
                   TypeConversionUtils.artists_X_String<Artist>(
@@ -172,6 +146,30 @@ class SyncedLyrics extends HookConsumerWidget {
                 (lyricValue == null || lyricValue.lyrics.isEmpty == true))
               const Expanded(child: ShimmerLyrics()),
           ],
+        ),
+        Positioned(
+          top: 10,
+          right: 10,
+          child: Align(
+            alignment: Alignment.centerRight,
+            child: PlatformFilledButton(
+              child: const Icon(
+                SpotubeIcons.clock,
+                size: 16,
+              ),
+              onPressed: () async {
+                final delay = await showPlatformAlertDialog(
+                  context,
+                  builder: (context) => const LyricDelayAdjustDialog(),
+                );
+                if (delay != null) {
+                  ref.read(lyricDelayState.notifier).state = delay;
+                }
+              },
+            ),
+          ),
+        ),
+      ],
     );
   }
 }

lib/pages/player/player.dart

@@ -201,13 +201,17 @@ class PlayerView extends HookConsumerWidget {
                             isDismissible: true,
                             enableDrag: true,
                             isScrollControlled: true,
-                            backgroundColor: Colors.transparent,
+                            backgroundColor: Colors.black38,
                             barrierColor: Colors.black12,
-                            shape: RoundedRectangleBorder(
+                            shape: const RoundedRectangleBorder(
-                              borderRadius: BorderRadius.circular(10),
+                              borderRadius: BorderRadius.only(
+                                topLeft: Radius.circular(20),
+                                topRight: Radius.circular(20),
+                              ),
                             ),
                             constraints: BoxConstraints(
-                              maxHeight: MediaQuery.of(context).size.height,
+                              maxHeight:
+                                  MediaQuery.of(context).size.height * 0.8,
                             ),
                             builder: (context) =>
                                 const LyricsPage(isModal: true),