Merge pull request #71 from Cattn/mobile-fixes

fix padding on mobile

Author: Cattn

src/routes/+page.svelte

@@ -32,7 +32,7 @@
 <div class="mt-5 flex w-full flex-col">
 	<h1 class="ml-4 text-2xl font-bold md:ml-10">Recently Played</h1>
 	<div
-		class="mx-4 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-1 lg:grid-cols-4 lg:gap-x-1 xl:grid-cols-5 xl:gap-x-1"
+		class="mr-8 ml-2 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-1 lg:grid-cols-4 lg:gap-x-1 xl:grid-cols-5 xl:gap-x-1"
 	>
 		{#each recent as track}
 			<Track {track} queue={recent} queueSource={{ type: 'recent', label: 'Recently Played' }} />

src/routes/albums/+page.svelte

@@ -31,7 +31,7 @@
 />
 
 <div
-	class="mx-4 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-1 lg:grid-cols-4 lg:gap-x-1 xl:grid-cols-5 xl:gap-x-1"
+	class="mr-8 ml-2 mb-10 md:mb-0 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-1 lg:grid-cols-4 lg:gap-x-1 xl:grid-cols-5 xl:gap-x-1"
 >
 	{#each sortedAlbums as album (album.id)}
 		<div class="will-change-transform" animate:flip={{ duration: 300, easing: cubicOut }}>

src/routes/albums/album/[slug]/+page.svelte

@@ -188,7 +188,7 @@
 	});
 </script>
 
-<div class="flex flex-col gap-8 pt-4 pr-3 pl-3 md:flex-row md:pt-14 md:pr-20 md:pl-14 lg:pl-28">
+<div class="flex flex-col gap-8 pt-4 pr-3 pl-3 md:flex-row md:pt-14 md:pr-20 md:pl-14 lg:pl-28 mb-5 md:mb-0">
 	<div class="w-full md:w-1/2 lg:w-2/5">
 		{#if imageUrl}
 			<img

src/routes/artists/+page.svelte

@@ -31,7 +31,7 @@
 />
 
 <div
-	class="mx-4 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-1 lg:grid-cols-4 lg:gap-x-1 xl:grid-cols-5 xl:gap-x-1"
+	class="mr-8 ml-2 mb-10 md:mb-0 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-1 lg:grid-cols-4 lg:gap-x-1 xl:grid-cols-5 xl:gap-x-1"
 >
 	{#each sortedArtists as artist (artist.id)}
 		<div class="will-change-transform" animate:flip={{ duration: 300, easing: cubicOut }}>

src/routes/tracks/+page.svelte

@@ -34,7 +34,7 @@
 />
 
 <div
-	class="mr-8 ml-2 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-1 lg:grid-cols-4 lg:gap-x-1 xl:grid-cols-5 xl:gap-x-1"
+	class="mr-8 ml-2 mb-10 md:mb-0 grid grid-cols-2 gap-x-2 gap-y-2 sm:gap-x-3 md:mx-16 md:grid-cols-3 md:gap-x-1 lg:grid-cols-4 lg:gap-x-1 xl:grid-cols-5 xl:gap-x-1"
 >
 	{#each sortedTracks as track (track.id)}
 		<div class="will-change-transform" animate:flip={{ duration: 300, easing: cubicOut }}>