From 569d4a2c435b121cfc41e0fd27a07a3dab323028 Mon Sep 17 00:00:00 2001
From: shadowusr <58862284+shadowusr@users.noreply.github.com>
Date: Thu, 14 Nov 2024 13:37:25 +0300
Subject: [PATCH] fix: fix diff bubbles in side-by-side fit screen mode (#614)

---
 .../components/DiffViewer/SideBySideToFitMode.module.css      | 2 ++
 lib/static/new-ui/components/DiffViewer/utils.ts              | 4 +++-
 lib/static/new-ui/components/Screenshot/index.module.css      | 4 +---
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/lib/static/new-ui/components/DiffViewer/SideBySideToFitMode.module.css b/lib/static/new-ui/components/DiffViewer/SideBySideToFitMode.module.css
index f3cff1b8b..4e500a4c9 100644
--- a/lib/static/new-ui/components/DiffViewer/SideBySideToFitMode.module.css
+++ b/lib/static/new-ui/components/DiffViewer/SideBySideToFitMode.module.css
@@ -12,4 +12,6 @@
 
 .image {
     max-height: max(var(--desired-height), calc(var(--natural-height) * 1px / 2));
+    width: var(--img-width);
+    height: var(--img-height);
 }
diff --git a/lib/static/new-ui/components/DiffViewer/utils.ts b/lib/static/new-ui/components/DiffViewer/utils.ts
index 744eaaa80..f94b1fee3 100644
--- a/lib/static/new-ui/components/DiffViewer/utils.ts
+++ b/lib/static/new-ui/components/DiffViewer/utils.ts
@@ -3,7 +3,9 @@ import {ImageSize} from '@/types';
 
 export const getImageSizeCssVars = (size: ImageSize): React.CSSProperties => ({
     '--natural-width': size.width,
-    '--natural-height': size.height
+    '--natural-height': size.height,
+    '--img-width': size.width > size.height ? '100%' : 'auto',
+    '--img-height': size.width > size.height ? 'auto' : '100%'
 } as React.CSSProperties);
 
 export const getDisplayedDiffPercentValue = (diffRatio: number): string => {
diff --git a/lib/static/new-ui/components/Screenshot/index.module.css b/lib/static/new-ui/components/Screenshot/index.module.css
index 42d4cb6ee..b0dfe5a9f 100644
--- a/lib/static/new-ui/components/Screenshot/index.module.css
+++ b/lib/static/new-ui/components/Screenshot/index.module.css
@@ -9,9 +9,7 @@
 
 .image {
     aspect-ratio: var(--natural-width) / var(--natural-height);
-    max-width: calc(var(--natural-width) * 1px);
+    max-width: calc(min(var(--natural-width) * 1px, 100%));
     width: 100%;
-    object-fit: contain;
-    object-position: top left;
     filter: drop-shadow(1px 0 0 #ccc) drop-shadow(-1px 0 0 #ccc) drop-shadow(0 1px 0 #ccc) drop-shadow(0 -1px 0 #ccc);
 }