From 697691589e1472da8f198fbde65080bc6a30f30b Mon Sep 17 00:00:00 2001
From: evazion <noizave@gmail.com>
Date: Tue, 6 Dec 2022 02:08:01 -0600
Subject: [PATCH] uploads: fix stretched images on Safari.

Fix images on the upload page appearing stretched (having the incorrect aspect ratio) when the image
is enlarged on Safari.

The fix is to set `aspect-ratio` and `height: intrinsic` to ensure the image is the right size. I
have no idea how this works or why it's necessary on Safari.

Fixes https://danbooru.donmai.us/forum_posts/227099.
---
 .../media_asset_component.html.erb                 | 10 +++++-----
 .../media_asset_component.scss                     | 14 ++++++++++++++
 app/views/media_assets/show.html.erb               |  2 +-
 3 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/app/components/media_asset_component/media_asset_component.html.erb b/app/components/media_asset_component/media_asset_component.html.erb
index 18145815a..d1f0c59e0 100644
--- a/app/components/media_asset_component/media_asset_component.html.erb
+++ b/app/components/media_asset_component/media_asset_component.html.erb
@@ -1,4 +1,4 @@
-<div class="media-asset-container media-asset-container-fit-height flex flex-col <%= outer_classes %>" data-dynamic-height="<%= dynamic_height %>" style="--header-visible-height: 0px">
+<div class="media-asset-container media-asset-container-fit-height flex flex-col <%= outer_classes %>" data-dynamic-height="<%= dynamic_height %>" style="--header-visible-height: 0px; --media-asset-width: <%= image_width %>; --media-asset-height: <%= image_height %>;">
   <%= header %>
 
   <div class="media-asset-component relative max-h-inherit overflow-hidden <%= inner_classes %>">
@@ -15,13 +15,13 @@
     <% elsif !media_asset.active? || !policy(media_asset).can_see_image? %>
       <p>Image unavailable.</p>
     <% elsif is_image? %>
-      <%= tag.img src: variant(:original).file_url, width: image_width, height: image_height, draggable: "false", class: "media-asset-image max-h-inherit max-w-full h-full w-auto select-none" -%>
+      <%= tag.img src: variant(:original).file_url, width: image_width, height: image_height, draggable: "false", class: "media-asset-image" -%>
     <% elsif is_video? %>
-      <%= tag.video src: variant(:original).file_url, width: image_width, height: image_height, autoplay: true, loop: true, controls: "controls", class: "media-asset-image max-h-inherit max-w-full h-full w-auto select-none" %>
+      <%= tag.video src: variant(:original).file_url, width: image_width, height: image_height, autoplay: true, loop: true, controls: "controls", class: "media-asset-image" %>
     <% elsif is_ugoira? %>
-      <%= tag.video src: variant(:sample).file_url, width: image_width, height: image_height, autoplay: true, loop: true, controls: "controls", class: "media-asset-image max-h-inherit max-w-full h-full w-auto select-none" %>
+      <%= tag.video src: variant(:sample).file_url, width: image_width, height: image_height, autoplay: true, loop: true, controls: "controls", class: "media-asset-image" %>
     <% elsif is_flash? %>
-      <%= tag.div "data-swf": variant(:original).file_url, class: "media-asset-image ruffle-container max-h-inherit max-w-full h-full w-auto select-none" %>
+      <%= tag.div "data-swf": variant(:original).file_url, class: "media-asset-image ruffle-container" %>
     <% end %>
   </div>
 
diff --git a/app/components/media_asset_component/media_asset_component.scss b/app/components/media_asset_component/media_asset_component.scss
index dcaa5ad90..4a72c7e65 100644
--- a/app/components/media_asset_component/media_asset_component.scss
+++ b/app/components/media_asset_component/media_asset_component.scss
@@ -34,8 +34,22 @@
     }
   }
 
+  .media-asset-image {
+    user-select: none;
+    width: auto;
+    height: auto;
+    max-width: 100%;
+    max-height: inherit;
+  }
+
   &.media-asset-container-fit-height {
     max-height: calc(100vh - var(--header-visible-height));
     justify-content: center;
+
+    .media-asset-component {
+      aspect-ratio: var(--media-asset-width) / var(--media-asset-height);
+      height: max-content;
+      height: intrinsic; // XXX Safari-only hack to make images correct height on upload page. I have no idea how this works.
+    }
   }
 }
diff --git a/app/views/media_assets/show.html.erb b/app/views/media_assets/show.html.erb
index e295cff4d..7ba6c7bd0 100644
--- a/app/views/media_assets/show.html.erb
+++ b/app/views/media_assets/show.html.erb
@@ -99,7 +99,7 @@
         <% end %>
       </div>
 
-      <div class="media-asset-sidebar md:w-360px">
+      <div class="media-asset-sidebar flex-none md:w-360px">
         <% if @media_asset.ai_tags.present? %>
           <div>
             <h3>Tags</h3>