From 5ed7cbf23ee30a7f69571d393f488c9be896f5c4 Mon Sep 17 00:00:00 2001
From: Jorge Vargas <jorgev259@outlook.es>
Date: Mon, 28 Apr 2025 12:56:47 -0600
Subject: [PATCH] Responsive fixes

---
 src/components/search/AlbumSearch.astro |  7 +++++--
 src/pages/anim/list/index.astro         |  2 +-
 src/pages/game/[slug].astro             | 14 +++++++-------
 src/pages/game/list/index.astro         |  2 +-
 src/pages/platform/list/index.astro     |  2 +-
 src/pages/publisher/list/index.astro    |  2 +-
 src/pages/studio/list/index.astro       |  2 +-
 7 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/components/search/AlbumSearch.astro b/src/components/search/AlbumSearch.astro
index 291533a..c2dc899 100644
--- a/src/components/search/AlbumSearch.astro
+++ b/src/components/search/AlbumSearch.astro
@@ -44,7 +44,10 @@ const [count, search] = await Promise.all([
   <div>
     Albums ({count}) {
       count > take ? (
-        <span> / Showing {page === 1 ? `first ${take}` : `${(page - 1) * take}-${Math.min(page * take, count)}`} results</span>
+        <span>
+          {' '}
+          / Showing {page === 1 ? `first ${take}` : `${(page - 1) * take}-${Math.min(page * take, count)}`} results
+        </span>
       ) : null
     }
   </div>
@@ -56,7 +59,7 @@ const [count, search] = await Promise.all([
     }
   </div>
 </div>
-<div class='grid sm:grid-cols-1 md:grid-cols-3 mt-1.5 gap-4'>
+<div class='grid grid-cols-1 md:grid-cols-3 mt-1.5 gap-4'>
   {
     search.map((album) => (
       <a class='flex bg-gray h-40 group hover:no-underline' href={`/album/${album.id}`}>
diff --git a/src/pages/anim/list/index.astro b/src/pages/anim/list/index.astro
index 2fe4333..b217185 100644
--- a/src/pages/anim/list/index.astro
+++ b/src/pages/anim/list/index.astro
@@ -20,7 +20,7 @@ const letters: { letter: string; count: BigInt }[] = await prismaClient.$queryRa
     letters.map((l) => (
       <div id={l.letter}>
         <div class='flex uppercase border-y-2 text-4xl justify-center border-white py-1.5'>{l.letter}</div>
-        <div class='py-4 grid sm:grid-cols-1 md:grid-cols-6 gap-1 justify-items-center'>
+        <div class='py-4 grid grid-cols-1 md:grid-cols-6 gap-1 justify-items-center'>
           <AnimList letter={l.letter} server:defer>
             <Fragment slot='fallback'>
               {Array.from({ length: Number(l.count) }).map(() => (
diff --git a/src/pages/game/[slug].astro b/src/pages/game/[slug].astro
index 09ae69e..ed84e5c 100644
--- a/src/pages/game/[slug].astro
+++ b/src/pages/game/[slug].astro
@@ -62,23 +62,23 @@ const coverImage = await getImage({
 
 <BaseLayout>
   <div class='flex flex-col flex-1 max-w-[1440px] mx-auto p-3'>
-    <div class='flex flex-wrap md:flex-nowrap gap-x-3'>
+    <div class='flex flex-col md:flex-row flex-wrap md:flex-nowrap gap-x-3 gap-y-2'>
       <div class='flex-1 flex-wrap md:flex-5/12'>
-        <div class='size-full relative cursor-pointer'>
-          <!--   <Image
+        <div class='size-full relative cursor-pointer bg-dark rounded-xl p-4'>
+          <Image
             src={`https://cdn.sittingonclouds.net/game/${slug}.png`}
             alt={`${game.name} logo`}
-            class='rounded-sm size-full object-contain h-fit mb-2 md:min-h-96 px-10'
+            class='rounded-sm'
             quality='mid'
             width={500}
             height={500}
-          /> -->
+          />
         </div>
       </div>
       <div class='flex-1 flex-wrap md:flex-7/12'>
         <div class='bg-dark rounded-xl py-4 px-6'>
           <div class='font-medium text-4xl text-center'>{game.name}</div>
-          <table class='mt-4 border-spacing-y-4 border-separate w-full'>
+          <table class='border-spacing-y-4 border-separate w-full'>
             <tbody>
               {
                 game.releaseDate ? (
@@ -134,7 +134,7 @@ const coverImage = await getImage({
     </div>
     <hr />
     <div class='flex flex-wrap md:flex-nowrap gap-x-3'>
-      <div class='grid grid-cols-5 gap-x-2'>
+      <div class='grid grid-cols-2 md:grid-cols-5 gap-x-2'>
         {
           game.albums.map((a) => (
             <AlbumBox href={`/album/${a.album.id}`} image={`/album/${a.album.id}.png`} title={a.album.title} />
diff --git a/src/pages/game/list/index.astro b/src/pages/game/list/index.astro
index 5f344e5..49ac9ed 100644
--- a/src/pages/game/list/index.astro
+++ b/src/pages/game/list/index.astro
@@ -20,7 +20,7 @@ const letters: { letter: string; count: BigInt }[] = await prismaClient.$queryRa
     letters.map((l) => (
       <div id={l.letter}>
         <div class='flex uppercase border-y-2 text-4xl justify-center border-white py-1.5'>{l.letter}</div>
-        <div class='py-4 grid sm:grid-cols-1 md:grid-cols-3 gap-1'>
+        <div class='py-4 grid grid-cols-1 md:grid-cols-3 gap-1'>
           <GameList letter={l.letter} server:defer>
             <Fragment slot='fallback'>
               {Array.from({ length: Number(l.count) }).map(() => (
diff --git a/src/pages/platform/list/index.astro b/src/pages/platform/list/index.astro
index 6a5f297..a3f879d 100644
--- a/src/pages/platform/list/index.astro
+++ b/src/pages/platform/list/index.astro
@@ -21,7 +21,7 @@ const letters: { letter: string; count: BigInt }[] = await prismaClient.$queryRa
     letters.map((l) => (
       <div id={l.letter}>
         <div class='flex uppercase border-y-2 text-4xl justify-center border-white py-1.5'>{l.letter}</div>
-        <div class='py-4 grid sm:grid-cols-1 md:grid-cols-4 gap-1'>
+        <div class='py-4 grid grid-cols-1 md:grid-cols-4 gap-1'>
           <PlatformList letter={l.letter} server:defer>
             <Fragment slot='fallback'>
               {Array.from({ length: Number(l.count) }).map(() => (
diff --git a/src/pages/publisher/list/index.astro b/src/pages/publisher/list/index.astro
index f02c82c..b48887a 100644
--- a/src/pages/publisher/list/index.astro
+++ b/src/pages/publisher/list/index.astro
@@ -20,7 +20,7 @@ const letters: { letter: string; count: BigInt }[] = await prismaClient.$queryRa
     letters.map((l) => (
       <div id={l.letter}>
         <div class='flex uppercase border-y-2 text-4xl justify-center border-white py-1.5'>{l.letter}</div>
-        <div class='py-4 grid sm:grid-cols-1 md:grid-cols-4 gap-1'>
+        <div class='py-4 grid grid-cols-1 md:grid-cols-4 gap-1'>
           <PublisherList letter={l.letter} server:defer>
             <Fragment slot='fallback'>
               {Array.from({ length: Number(l.count) }).map(() => (
diff --git a/src/pages/studio/list/index.astro b/src/pages/studio/list/index.astro
index 8cb35d4..6fec597 100644
--- a/src/pages/studio/list/index.astro
+++ b/src/pages/studio/list/index.astro
@@ -20,7 +20,7 @@ const letters: { letter: string; count: BigInt }[] = await prismaClient.$queryRa
     letters.map((l) => (
       <div id={l.letter}>
         <div class='flex uppercase border-y-2 text-4xl justify-center border-white py-1.5'>{l.letter}</div>
-        <div class='py-4 grid sm:grid-cols-1 md:grid-cols-4 gap-1'>
+        <div class='py-4 grid grid-cols-1 md:grid-cols-4 gap-1'>
           <PublisherList letter={l.letter} server:defer>
             <Fragment slot='fallback'>
               {Array.from({ length: Number(l.count) }).map(() => (