Small improvements to collectible pages

src/components/AppLayout/AsideLayout.astro

@@ -53,10 +53,11 @@ const { reducedAsideWidth = false } = Astro.props;
     @media (min-width: 1280.5px) {
       display: grid;
       justify-content: space-between;
-      grid-template-columns: 35rem 35rem;
+      gap: 5rem;
+      grid-template-columns: 1fr 35rem;
 
       &.reduced-width {
-        grid-template-columns: 35rem 27rem;
+        grid-template-columns: 1fr 27rem;
       }
 
       align-items: start;

src/components/AppLayout/components/Html.astro

@@ -167,7 +167,8 @@ const { currentTheme } = Astro.locals;
   p,
   button,
   body,
-  html {
+  html,
+  hr {
     padding: 0;
     margin: 0;
     overflow-wrap: anywhere;

src/pages/[locale]/api/pages/partial.astro

@@ -128,7 +128,7 @@ if (updatedBy) {
     border: none;
     border-top: 3px dotted var(--color-base-500);
     margin-block: 24px;
-    width: 100%;
+    width: min(100%, 35rem);
   }
 
   #credits {

src/pages/[locale]/collectibles/[slug]/_components/SubitemSection.astro

@@ -33,8 +33,20 @@ const { t } = await getI18n(Astro.locals.currentLocale);
 
     & > #values {
       display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
       gap: clamp(6px, 2vmin, 16px);
+
+      grid-template-columns: repeat(auto-fill, 270px);
+
+      @media (max-width: 600.5px) {
+        grid-template-columns: 1fr 1fr;
+        row-gap: 12px;
+      }
+
+      @media (max-width: 24rem) {
+        grid-template-columns: 1fr;
+      }
+
+      align-items: start;
     }
   }
 </style>

src/pages/[locale]/collectibles/[slug]/index.astro

@@ -154,50 +154,50 @@ if (price) {
     </Fragment>
 
     <Fragment slot="header-aside">
-      <div id="images">
+      {
-        {
+        (thumbnail || gallery || scans) && (
-          thumbnail && (
+          <div id="images">
-            <a
+            {thumbnail && (
-              id="thumbnail"
+              <a
-              href={getLocalizedUrl(`/images/${thumbnail.id}`)}
+                id="thumbnail"
-              style={`aspect-ratio: ${thumbnail.width}/${thumbnail.height};`}>
+                href={getLocalizedUrl(`/images/${thumbnail.id}`)}
-              <img
+                style={`aspect-ratio: ${thumbnail.width}/${thumbnail.height};`}>
-                src={thumbnail.url}
+                <img
-                srcset={sizesToSrcset(thumbnail.sizes)}
+                  src={thumbnail.url}
-                sizes={`(max-width: 550px) 90vw, 550px`}
+                  srcset={sizesToSrcset(thumbnail.sizes)}
-                width={thumbnail.width}
+                  sizes={`(max-width: 550px) 90vw, 550px`}
-                height={thumbnail.height}
+                  width={thumbnail.width}
-              />
+                  height={thumbnail.height}
-            </a>
-          )
-        }
-
-        {
-          (gallery || scans) && (
-            <div
-              id="gallery-scans"
-              class:list={{ "when-no-print": true, "with-two": gallery && scans }}>
-              {gallery && (
-                <ImageTile
-                  image={gallery.thumbnail}
-                  title={t("collectibles.gallery.title")}
-                  subtitle={t("collectibles.gallery.subtitle", { count: gallery.count })}
-                  href={getLocalizedUrl(`/collectibles/${slug}/gallery`)}
                 />
-              )}
+              </a>
+            )}
 
-              {scans && (
+            {(gallery || scans) && (
-                <ImageTile
+              <div
-                  image={scans.thumbnail}
+                id="gallery-scans"
-                  title={t("collectibles.scans.title")}
+                class:list={{ "when-no-print": true, "with-two": gallery && scans }}>
-                  subtitle={t("collectibles.scans.subtitle", { count: scans.count })}
+                {gallery && (
-                  href={getLocalizedUrl(`/collectibles/${slug}/scans`)}
+                  <ImageTile
-                />
+                    image={gallery.thumbnail}
-              )}
+                    title={t("collectibles.gallery.title")}
-            </div>
+                    subtitle={t("collectibles.gallery.subtitle", { count: gallery.count })}
-          )
+                    href={getLocalizedUrl(`/collectibles/${slug}/gallery`)}
-        }
+                  />
-      </div>
+                )}
+
+                {scans && (
+                  <ImageTile
+                    image={scans.thumbnail}
+                    title={t("collectibles.scans.title")}
+                    subtitle={t("collectibles.scans.subtitle", { count: scans.count })}
+                    href={getLocalizedUrl(`/collectibles/${slug}/scans`)}
+                  />
+                )}
+              </div>
+            )}
+          </div>
+        )
+      }
     </Fragment>
 
     <Fragment slot="aside">