Handle tiny images & fix layout

Honestly there's just too many possibilities

src/components/media.jsx

@@ -362,6 +362,13 @@ function Media({
                       naturalWidth &&
                       naturalHeight
                     ) {
+                      const minDimension = 88;
+                      if (
+                        naturalWidth < minDimension ||
+                        naturalHeight < minDimension
+                      ) {
+                        $media.dataset.hasSmallDimension = true;
+                      } else {
                         const naturalAspectRatio = (
                           naturalWidth / naturalHeight
                         ).toFixed(2);
@@ -379,6 +386,7 @@ function Media({
                         // $media.dataset.aspectRatios = `${naturalAspectRatio} ${displayAspectRatio}`;
                       }
                     }
+                  }
                 }}
                 onError={(e) => {
                   const { src } = e.target;

src/components/status.css

@@ -1074,6 +1074,11 @@
   &[data-has-natural-aspect-ratio] {
     --media-radius: 4px;
   }
+
+  &[data-has-small-dimension] img {
+    object-fit: contain;
+    image-rendering: pixelated;
+  }
 }
 .status .media-container.media-eq1 .media[data-orientation='portrait'] {
   /* width: auto;
@@ -1349,22 +1354,27 @@ body:has(#modal-container .carousel) .status .media img:hover {
   background-color: var(--outline-color);
 }
 
-.status.large .media-large-container {
+.status .media-large-container {
   width: 100%;
   max-width: 100%;
   display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
+  flex-direction: row;
+  /* align-items: center;
+  justify-content: center; */
   column-gap: 8px;
   flex-wrap: wrap;
-  text-align: center;
+
+  .media[data-has-small-dimension] {
+    width: auto !important;
+  }
 
   figure {
-    justify-content: center;
+    flex-direction: column;
 
     figcaption {
-      text-align: center;
+      flex-grow: 0 !important;
+      flex-basis: auto !important;
+      align-self: flex-start !important;
     }
   }
 }