Search results are horizontally scrollable instead of Wrap

Hotkey Record dialog pops the route on cancel bugfix
Headings & fontSizes optimized for smaller devices

lib/components/Lyrics.dart

@@ -5,6 +5,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:spotify/spotify.dart';
 import 'package:spotube/helpers/artist-to-string.dart';
 import 'package:spotube/helpers/getLyrics.dart';
+import 'package:spotube/hooks/useBreakpoints.dart';
 import 'package:spotube/provider/Playback.dart';
 import 'package:spotube/provider/UserPreferences.dart';
 
@@ -56,6 +57,8 @@ class Lyrics extends HookConsumerWidget {
       playback.currentTrack,
     ]);
 
+    final breakpoint = useBreakpoints();
+
     if (lyrics.value["lyrics"] == null && playback.currentTrack != null) {
       if (!hasToken) {
         return Expanded(
@@ -83,6 +86,8 @@ class Lyrics extends HookConsumerWidget {
       );
     }
 
+    final textTheme = Theme.of(context).textTheme;
+
     return Expanded(
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.stretch,
@@ -90,24 +95,32 @@ class Lyrics extends HookConsumerWidget {
           Center(
             child: Text(
               playback.currentTrack?.name ?? "",
-              style: Theme.of(context).textTheme.headline3,
+              style: breakpoint >= Breakpoints.md
+                  ? textTheme.headline3
+                  : textTheme.headline4?.copyWith(fontSize: 25),
             ),
           ),
           Center(
             child: Text(
               artistsToString<Artist>(playback.currentTrack?.artists ?? []),
-              style: Theme.of(context).textTheme.headline5,
+              style: breakpoint >= Breakpoints.md
+                  ? textTheme.headline5
+                  : textTheme.headline6,
             ),
           ),
           Expanded(
             child: SingleChildScrollView(
               child: Center(
+                child: Padding(
+                  padding: const EdgeInsets.all(8.0),
                   child: Text(
                     lyrics.value["lyrics"] == null &&
                             playback.currentTrack == null
                         ? "No Track being played currently"
                         : lyrics.value["lyrics"]!,
-                  style: Theme.of(context).textTheme.headline6,
+                    style: textTheme.headline6
+                        ?.copyWith(color: textTheme.headline1?.color),
+                  ),
                 ),
               ),
             ),

lib/components/Player/PlayerView.dart

@@ -60,7 +60,7 @@ class PlayerView extends HookConsumerWidget {
                   Text(
                     currentTrack?.name ?? "Not playing",
                     overflow: TextOverflow.ellipsis,
-                    style: Theme.of(context).textTheme.headline4?.copyWith(
+                    style: Theme.of(context).textTheme.headline5?.copyWith(
                           fontWeight: FontWeight.bold,
                           color: paletteColor.titleTextColor,
                         ),

lib/components/Search/Search.dart

@@ -9,6 +9,7 @@ import 'package:spotube/components/Shared/TracksTableView.dart';
 import 'package:spotube/helpers/image-to-url-string.dart';
 import 'package:spotube/helpers/simple-album-to-album.dart';
 import 'package:spotube/helpers/zero-pad-num-str.dart';
+import 'package:spotube/hooks/useBreakpoints.dart';
 import 'package:spotube/provider/Playback.dart';
 import 'package:spotube/provider/SpotifyDI.dart';
 
@@ -20,6 +21,10 @@ class Search extends HookConsumerWidget {
     SpotifyApi spotify = ref.watch(spotifyProvider);
     var controller = useTextEditingController();
     var searchTerm = useState("");
+    final albumController = useScrollController();
+    final playlistController = useScrollController();
+    final artistController = useScrollController();
+    final breakpoint = useBreakpoints();
 
     return Expanded(
       child: Column(
@@ -135,15 +140,18 @@ class Search extends HookConsumerWidget {
                             style: Theme.of(context).textTheme.headline5,
                           ),
                         const SizedBox(height: 10),
-                        Center(
+                        Scrollbar(
-                          child: Wrap(
+                          controller: albumController,
-                            spacing: 20,
+                          child: SingleChildScrollView(
-                            runSpacing: 20,
+                            scrollDirection: Axis.horizontal,
+                            controller: albumController,
+                            child: Row(
                               children: albums.map((album) {
                                 return AlbumCard(simpleAlbumToAlbum(album));
                               }).toList(),
                             ),
                           ),
+                        ),
                         const SizedBox(height: 20),
                         if (artists.isNotEmpty)
                           Text(
@@ -151,13 +159,22 @@ class Search extends HookConsumerWidget {
                             style: Theme.of(context).textTheme.headline5,
                           ),
                         const SizedBox(height: 10),
-                        Center(
+                        Scrollbar(
-                          child: Wrap(
+                          controller: artistController,
-                            spacing: 20,
+                          child: SingleChildScrollView(
-                            runSpacing: 20,
+                            scrollDirection: Axis.horizontal,
-                            children: artists.map((artist) {
+                            controller: artistController,
-                              return ArtistCard(artist);
+                            child: Row(
-                            }).toList(),
+                              children: artists
+                                  .map(
+                                    (artist) => Container(
+                                      margin: const EdgeInsets.symmetric(
+                                          horizontal: 15),
+                                      child: ArtistCard(artist),
+                                    ),
+                                  )
+                                  .toList(),
+                            ),
                           ),
                         ),
                         const SizedBox(height: 20),
@@ -167,13 +184,21 @@ class Search extends HookConsumerWidget {
                             style: Theme.of(context).textTheme.headline5,
                           ),
                         const SizedBox(height: 10),
-                        Center(
+                        Scrollbar(
-                          child: Wrap(
+                          scrollbarOrientation: breakpoint > Breakpoints.md
-                            spacing: 20,
+                              ? ScrollbarOrientation.bottom
-                            runSpacing: 20,
+                              : ScrollbarOrientation.top,
-                            children: playlists.map((playlist) {
+                          controller: playlistController,
-                              return PlaylistCard(playlist);
+                          child: SingleChildScrollView(
-                            }).toList(),
+                            scrollDirection: Axis.horizontal,
+                            controller: playlistController,
+                            child: Row(
+                              children: playlists
+                                  .map(
+                                    (playlist) => PlaylistCard(playlist),
+                                  )
+                                  .toList(),
+                            ),
                           ),
                         ),
                       ],

lib/components/Shared/RecordHotKeyDialog.dart

@@ -67,7 +67,7 @@ class RecordHotKeyDialog extends HookWidget {
         TextButton(
           child: const Text('Cancel'),
           onPressed: () {
-            GoRouter.of(context).pop();
+            Navigator.of(context).pop();
           },
         ),
         TextButton(