From 2b364b1e5eca4aea13c14c690b5589608ee179f9 Mon Sep 17 00:00:00 2001
From: Devin Haska <2636402+wonderfulfrog@users.noreply.github.com>
Date: Sat, 25 Jan 2025 22:28:41 -0800
Subject: [PATCH] fix: media meta grid on mobile

---
 src/_includes/layouts/book.html  |  2 +-
 src/_includes/layouts/game.html  |  2 +-
 src/_includes/layouts/movie.html |  2 +-
 src/_includes/layouts/show.html  |  7 +------
 src/css/blocks/media-display.css | 11 +++++++++++
 5 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/_includes/layouts/book.html b/src/_includes/layouts/book.html
index 2df6093..eb7d5bd 100644
--- a/src/_includes/layouts/book.html
+++ b/src/_includes/layouts/book.html
@@ -24,7 +24,7 @@ layout: "layouts/base"
         <h2>{{ title }}</h2>
         {% if subtitle %}<p class="text-fadeText flow-space-0.5 line-height-m">{{ subtitle }}</p>{% endif %}
         {% if rating %}{{ stars(rating) }}{% endif %}
-        <ul class="list-none p-0 mb-0 media-meta-grid gap-0.5">
+        <ul class="list-none p-0 mb-0 media-meta gap-0.5">
             {% if author %}
                 <li class="flex-col">
                     <strong>Author</strong><span>{{ author }}</span>
diff --git a/src/_includes/layouts/game.html b/src/_includes/layouts/game.html
index 4fddca2..a5268bf 100644
--- a/src/_includes/layouts/game.html
+++ b/src/_includes/layouts/game.html
@@ -27,7 +27,7 @@ layout: "layouts/base"
         </div>
         {% if subtitle %}<h2>{{ subtitle }}</h2>{% endif %}
         {% if rating %}{{ stars(rating) }}{% endif %}
-        <ul class="list-none p-0 mb-0 media-meta-grid gap-0.5">
+        <ul class="list-none p-0 mb-0 media-meta gap-0.5">
             {% if year %}
                 <li class="flex-col">
                     <strong>Released</strong><span>{{ year }}</span>
diff --git a/src/_includes/layouts/movie.html b/src/_includes/layouts/movie.html
index 8088b02..ccabc3b 100644
--- a/src/_includes/layouts/movie.html
+++ b/src/_includes/layouts/movie.html
@@ -38,7 +38,7 @@ layout: "layouts/base"
         </div>
         {% if subtitle %}<h2>{{ subtitle }}</h2>{% endif %}
         {% if rating %}{{ stars(rating) }}{% endif %}
-        <ul class="list-none p-0 mb-0 media-meta-grid gap-0.5">
+        <ul class="list-none p-0 mb-0 media-meta gap-0.5">
             {% if year %}
                 <li class="flex-col">
                     <strong>Released</strong><span>{{ year }}</span>
diff --git a/src/_includes/layouts/show.html b/src/_includes/layouts/show.html
index 0ba1025..ec211b0 100644
--- a/src/_includes/layouts/show.html
+++ b/src/_includes/layouts/show.html
@@ -38,7 +38,7 @@ layout: "layouts/base"
         {% endif %}
         {% if watchHistory %}<p class="flow-space-0.25">{{ format(watchHistory | last) }}</p>{% endif %}
         {% if rating %}{{ stars(rating) }}{% endif %}
-        <ul class="list-none p-0 mb-0 media-meta-grid gap-0.5">
+        <ul class="list-none p-0 mb-0 media-meta gap-0.5">
             {% if year %}
                 <li class="flex-col">
                     <strong>Released</strong><span>{{ year }}</span>
@@ -49,11 +49,6 @@ layout: "layouts/base"
                     <strong>Runtime</strong><span>{{ runtime }} mins</span>
                 </li>
             {% endif %}
-            {% if tags %}
-                <li class="flex-col meta-grid--full">
-                    <strong>Genres</strong><span>{{ tags | filter("tv") | join(", ") }}</span>
-                </li>
-            {% endif %}
         </ul>
     </div>
 </footer>
diff --git a/src/css/blocks/media-display.css b/src/css/blocks/media-display.css
index 3e6d68c..2926f62 100644
--- a/src/css/blocks/media-display.css
+++ b/src/css/blocks/media-display.css
@@ -25,3 +25,14 @@
 .meta-grid--full {
   grid-column: 1/3;
 }
+
+.media-meta {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+}
+
+@container (max-width: 36rem) {
+  .media-meta-grid {
+    grid-template-columns: 1fr;
+  }
+}