Experiment reduce radius for uncropped images

src/components/media.jsx

@@ -338,19 +338,46 @@ function Media({
                 onLoad={(e) => {
                   // e.target.closest('.media-image').style.backgroundImage = '';
                   e.target.dataset.loaded = true;
-                  if (!hasDimensions) {
                   const $media = e.target.closest('.media');
-                    if ($media) {
+                  if (!hasDimensions && $media) {
                     const { naturalWidth, naturalHeight } = e.target;
                     $media.dataset.orientation =
                       naturalWidth > naturalHeight ? 'landscape' : 'portrait';
                     $media.style.setProperty('--width', `${naturalWidth}px`);
-                      $media.style.setProperty(
+                    $media.style.setProperty('--height', `${naturalHeight}px`);
-                        '--height',
-                        `${naturalHeight}px`,
-                      );
                     $media.style.aspectRatio = `${naturalWidth}/${naturalHeight}`;
                   }
+
+                  // Check natural aspect ratio vs display aspect ratio
+                  if ($media) {
+                    const {
+                      clientWidth,
+                      clientHeight,
+                      naturalWidth,
+                      naturalHeight,
+                    } = e.target;
+                    if (
+                      clientWidth &&
+                      clientHeight &&
+                      naturalWidth &&
+                      naturalHeight
+                    ) {
+                      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.classList.add('has-natural-aspect-ratio');
+                      }
+                      // $media.dataset.aspectRatios = `${naturalAspectRatio} ${displayAspectRatio}`;
+                    }
                   }
                 }}
                 onError={(e) => {

src/components/status.css

@@ -1070,6 +1070,10 @@
   --aspectWidth: calc(--width / --height * var(--maxAspectHeight)); */
   width: min(var(--aspectWidth), var(--width), 100%);
   max-height: min(var(--height), 33vh);
+
+  &.has-natural-aspect-ratio {
+    --media-radius: 4px;
+  }
 }
 .status .media-container.media-eq1 .media[data-orientation='portrait'] {
   /* width: auto;