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,9 +154,10 @@ if (price) {
     </Fragment>
 
     <Fragment slot="header-aside">
-      <div id="images">
       {
-          thumbnail && (
+        (thumbnail || gallery || scans) && (
+          <div id="images">
+            {thumbnail && (
               <a
                 id="thumbnail"
                 href={getLocalizedUrl(`/images/${thumbnail.id}`)}
@@ -169,11 +170,9 @@ if (price) {
                   height={thumbnail.height}
                 />
               </a>
-          )
+            )}
-        }
 
-        {
+            {(gallery || scans) && (
-          (gallery || scans) && (
               <div
                 id="gallery-scans"
                 class:list={{ "when-no-print": true, "with-two": gallery && scans }}>
@@ -195,9 +194,10 @@ if (price) {
                   />
                 )}
               </div>
+            )}
+          </div>
         )
       }
-      </div>
     </Fragment>
 
     <Fragment slot="aside">