fix: fullscreen images getting cropped a bit

Closes #4320
deltachat · Dec 11, 2024 · 696aa74 · 696aa74
1 parent 16c1906
commit 696aa74
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,7 @@
 - handle double escape on Dialog #4365
 - fix random crashes on quote reply #4337
 - avoid drafts in readonly chats #4349
+- fullscreen images getting cropped a little #4402, #4385
 
 <a id="1_49_0"></a>
 

diff --git a/packages/frontend/src/components/dialogs/FullscreenAvatar.tsx b/packages/frontend/src/components/dialogs/FullscreenAvatar.tsx
@@ -53,7 +53,14 @@ export default function FullscreenAvatar(
                     onContextMenu={openMenu}
                     tabIndex={0}
                   >
-                    <img src={runtime.transformBlobURL(imagePath)} />
+                    <img
+                      // Otherwise it's 'inline' and the parent gets
+                      // stretched a few pixels taller than the image itself,
+                      // resulting in the image overflowing the window.
+                      // See https://github.com/deltachat/deltachat-desktop/issues/4320
+                      style={{ display: 'block' }}
+                      src={runtime.transformBlobURL(imagePath)}
+                    />
                   </div>
                 </TransformComponent>
               )

diff --git a/packages/frontend/src/components/dialogs/FullscreenMedia.tsx b/packages/frontend/src/components/dialogs/FullscreenMedia.tsx
@@ -143,7 +143,14 @@ export default function FullscreenMedia(props: Props & DialogProps) {
                   onContextMenu={openMenu}
                   tabIndex={0}
                 >
-                  <img src={runtime.transformBlobURL(file)} />
+                  <img
+                    // Otherwise it's 'inline' and the parent gets
+                    // stretched a few pixels taller than the image itself,
+                    // resulting in the image overflowing the window.
+                    // See https://github.com/deltachat/deltachat-desktop/issues/4320
+                    style={{ display: 'block' }}
+                    src={runtime.transformBlobURL(file)}
+                  />
                 </div>
               </TransformComponent>
             )