Handle tiny images & fix layout

Honestly there's just too many possibilities

src/components/media.jsx

@@ -362,21 +362,29 @@ function Media({
                       naturalWidth &&
                       naturalHeight
                     ) {
-                      const naturalAspectRatio = (
+                      const minDimension = 88;
-                        naturalWidth / naturalHeight
-                      ).toFixed(2);
-                      const displayAspectRatio = (
-                        clientWidth / clientHeight
-                      ).toFixed(2);
-                      const similarThreshold = 0.05;
                       if (
-                        naturalAspectRatio === displayAspectRatio ||
+                        naturalWidth < minDimension ||
-                        Math.abs(naturalAspectRatio - displayAspectRatio) <
+                        naturalHeight < minDimension
-                          similarThreshold
                       ) {
-                        $media.dataset.hasNaturalAspectRatio = true;
+                        $media.dataset.hasSmallDimension = true;
+                      } else {
+                        const naturalAspectRatio = (
+                          naturalWidth / naturalHeight
+                        ).toFixed(2);
+                        const displayAspectRatio = (
+                          clientWidth / clientHeight
+                        ).toFixed(2);
+                        const similarThreshold = 0.05;
+                        if (
+                          naturalAspectRatio === displayAspectRatio ||
+                          Math.abs(naturalAspectRatio - displayAspectRatio) <
+                            similarThreshold
+                        ) {
+                          $media.dataset.hasNaturalAspectRatio = true;
+                        }
+                        // $media.dataset.aspectRatios = `${naturalAspectRatio} ${displayAspectRatio}`;
                       }
-                      // $media.dataset.aspectRatios = `${naturalAspectRatio} ${displayAspectRatio}`;
                     }
                   }
                 }}

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;
+  flex-direction: row;
-  align-items: center;
+  /* align-items: center;
-  justify-content: 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;
     }
   }
 }