From a6996d9414f093e955c78d73a5025bbd0b7ba4f9 Mon Sep 17 00:00:00 2001
From: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
Date: Fri, 8 Jan 2021 09:36:19 +0100
Subject: [PATCH] Limit lightbox size (#923)

Signed-off-by: Tilman Vatteroth <tilman.vatteroth@tu-dortmund.de>
---
 .../replace-components/image/lightbox.scss            | 11 +++++++++++
 .../replace-components/image/lightboxedImageFrame.tsx |  3 ++-
 2 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 src/components/markdown-renderer/replace-components/image/lightbox.scss

diff --git a/src/components/markdown-renderer/replace-components/image/lightbox.scss b/src/components/markdown-renderer/replace-components/image/lightbox.scss
new file mode 100644
index 000000000..f61d8dddd
--- /dev/null
+++ b/src/components/markdown-renderer/replace-components/image/lightbox.scss
@@ -0,0 +1,11 @@
+/*!
+ * SPDX-FileCopyrightText: 2021 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+.lightbox img {
+  max-width: calc(100vw - 3.5rem);
+  max-height: calc(100vh - 3.5rem - 75px);
+  object-fit: contain;
+}
diff --git a/src/components/markdown-renderer/replace-components/image/lightboxedImageFrame.tsx b/src/components/markdown-renderer/replace-components/image/lightboxedImageFrame.tsx
index 19d164f2a..5a1a32a3b 100644
--- a/src/components/markdown-renderer/replace-components/image/lightboxedImageFrame.tsx
+++ b/src/components/markdown-renderer/replace-components/image/lightboxedImageFrame.tsx
@@ -7,6 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import React, { Fragment, useState } from 'react'
 import { Modal } from 'react-bootstrap'
 import { ForkAwesomeIcon } from '../../../common/fork-awesome/fork-awesome-icon'
+import "./lightbox.scss"
 
 export const LightboxedImageFrame: React.FC<React.ImgHTMLAttributes<HTMLImageElement>> = ({ alt, ...props }) => {
   const [showFullscreenImage, setShowFullscreenImage] = useState(false)
@@ -17,7 +18,7 @@ export const LightboxedImageFrame: React.FC<React.ImgHTMLAttributes<HTMLImageEle
       <Modal
         animation={true}
         centered={true}
-        dialogClassName={'text-dark'}
+        dialogClassName={'text-dark lightbox'}
         show={showFullscreenImage}
         onHide={() => setShowFullscreenImage(false)}
         size={'xl'}>