fix: fix diff bubbles in side-by-side fit screen mode (#614)

gemini-testing · Nov 14, 2024 · 569d4a2 · 569d4a2
1 parent f70e78b
commit 569d4a2
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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);
 }