fix: QR dialog being scrollable

Closes #4413.

I have tested it in both "New Chat" and "Join Group".

On even shorter screens the QR is probably gonna become unreadable,
but there is not much we can do, other than decreasing paddings.

CHANGELOG.md

@@ -15,6 +15,7 @@
 - fix random crashes on quote reply #4337
 - avoid drafts in readonly chats #4349
 - fullscreen images getting cropped a little #4402, #4385
+- QR code dialog now showing the QR code in full if window is short, and being scrollable instead #4416
 - settings: chat background preview element not working for the default background image #4403
 - macOS: make area under traffic lights dragable and fix the bug that its size changed based on profile acount and window height #4408
 - fix chat "scrolls up" right after switching #4404

packages/frontend/scss/dialogs/_qr-code.scss

@@ -27,3 +27,18 @@
     }
   }
 }
+
+// Ensure that the QR code image is always shown in full,
+// and doesn't cause scroll.
+.show-qr-dialog-body {
+  display: flex;
+  flex-direction: column;
+  .show-qr-dialog-content {
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+  img.show-qr-dialog-qr-image {
+    min-height: 0;
+  }
+}

packages/frontend/src/components/dialogs/QrCode.tsx

@@ -165,8 +165,8 @@ export function QrCodeShowQrInner({
 
   return (
     <>
-      <DialogBody>
-        <DialogContent>
+      <DialogBody className='show-qr-dialog-body'>
+        <DialogContent className='show-qr-dialog-content'>
           {svgUrl && (
             <img
               style={{
@@ -175,6 +175,7 @@ export function QrCodeShowQrInner({
                 userSelect: 'none',
                 paddingTop: '16px',
               }}
+              className='show-qr-dialog-qr-image'
               src={svgUrl}
               onContextMenu={imageContextMenu}
               tabIndex={0}