From 28d850c374c32955990a14b5660b575c6e1b926b Mon Sep 17 00:00:00 2001
From: martinkrulltott <martin@moid.se>
Date: Thu, 6 Jul 2023 09:51:41 +0200
Subject: [PATCH 1/4] fix: set height to 100%

---
 .../InterpretationModal/InterpretationModal.js              | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/Interpretations/InterpretationModal/InterpretationModal.js b/src/components/Interpretations/InterpretationModal/InterpretationModal.js
index f2d693838..2bb67fc55 100644
--- a/src/components/Interpretations/InterpretationModal/InterpretationModal.js
+++ b/src/components/Interpretations/InterpretationModal/InterpretationModal.js
@@ -24,14 +24,14 @@ const modalCSS = css.resolve`
         max-width: calc(100vw - 128px) !important;
         max-height: calc(100vh - 128px) !important;
         width: auto !important;
-        height: auto !important;
+        height: calc(100vw - 128px) !important;
         overflow-y: hidden;
     }
     aside.hidden {
         display: none;
     }
     aside > :global(div) > :global(div) {
-        max-height: none;
+        height: 100%;
     }
 `
 
@@ -216,12 +216,14 @@ const InterpretationModal = ({
                     .container {
                         display: flex;
                         flex-direction: column;
+                        height: 100%;
                     }
 
                     .row {
                         display: flex;
                         flex-direction: row;
                         gap: 16px;
+                        height: 100%;
                     }
 
                     .visualisation-wrap {

From ae89d7b1d8e06750d883e4e4860547914682e562 Mon Sep 17 00:00:00 2001
From: martinkrulltott <martin@moid.se>
Date: Thu, 6 Jul 2023 09:51:55 +0200
Subject: [PATCH 2/4] fix: avoid double scrollbar

---
 .../Interpretations/InterpretationModal/InterpretationModal.js  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Interpretations/InterpretationModal/InterpretationModal.js b/src/components/Interpretations/InterpretationModal/InterpretationModal.js
index 2bb67fc55..87daf1335 100644
--- a/src/components/Interpretations/InterpretationModal/InterpretationModal.js
+++ b/src/components/Interpretations/InterpretationModal/InterpretationModal.js
@@ -39,6 +39,7 @@ function getModalContentCSS(width) {
     return css.resolve`
         div {
             width: ${width}px;
+            overflow-y: visible;
         }
     `
 }
@@ -235,7 +236,6 @@ const InterpretationModal = ({
                         padding-right: ${spacers.dp4};
                         flex-basis: 300px;
                         flex-shrink: 0;
-                        overflow-y: auto;
                     }
                 `}</style>
             </Modal>

From a33113dfaa0bbe78dc1d6cd086983694a672477c Mon Sep 17 00:00:00 2001
From: martinkrulltott <martin@moid.se>
Date: Thu, 6 Jul 2023 11:23:43 +0200
Subject: [PATCH 3/4] fix: only scroll thread of messages

---
 .../InterpretationThread.js                   | 71 +++++++++----------
 1 file changed, 33 insertions(+), 38 deletions(-)

diff --git a/src/components/Interpretations/InterpretationModal/InterpretationThread.js b/src/components/Interpretations/InterpretationModal/InterpretationThread.js
index cf352317b..861a1d2ae 100644
--- a/src/components/Interpretations/InterpretationModal/InterpretationThread.js
+++ b/src/components/Interpretations/InterpretationModal/InterpretationThread.js
@@ -28,44 +28,44 @@ const InterpretationThread = ({
 
     return (
         <div className={cx('container', { fetching })}>
-            <div className={'scrollbox'}>
-                <div className={'title'}>
-                    <IconClock16 color={colors.grey700} />
-                    {moment(interpretation.created).format('LLL')}
-                </div>
-                {DownloadMenu && (
-                    <DownloadMenu relativePeriodDate={interpretation.created} />
-                )}
-                <div className={'thread'}>
-                    <Interpretation
-                        currentUser={currentUser}
-                        interpretation={interpretation}
-                        onReplyIconClick={() => focusRef.current?.focus()}
-                        onUpdated={() => onThreadUpdated(true)}
-                        onDeleted={onInterpretationDeleted}
-                    />
-                    <div className={'comments'}>
-                        {interpretation.comments.map((comment) => (
-                            <Comment
-                                key={comment.id}
-                                comment={comment}
-                                currentUser={currentUser}
-                                interpretationId={interpretation.id}
-                                onThreadUpdated={onThreadUpdated}
-                            />
-                        ))}
-                    </div>
-                    <CommentAddForm
-                        currentUser={currentUser}
-                        interpretationId={interpretation.id}
-                        onSave={() => onThreadUpdated(true)}
-                        focusRef={focusRef}
-                    />
+            <div className={'title'}>
+                <IconClock16 color={colors.grey700} />
+                {moment(interpretation.created).format('LLL')}
+            </div>
+            {DownloadMenu && (
+                <DownloadMenu relativePeriodDate={interpretation.created} />
+            )}
+            <div className={'thread'}>
+                <Interpretation
+                    currentUser={currentUser}
+                    interpretation={interpretation}
+                    onReplyIconClick={() => focusRef.current?.focus()}
+                    onUpdated={() => onThreadUpdated(true)}
+                    onDeleted={onInterpretationDeleted}
+                />
+                <div className={'comments'}>
+                    {interpretation.comments.map((comment) => (
+                        <Comment
+                            key={comment.id}
+                            comment={comment}
+                            currentUser={currentUser}
+                            interpretationId={interpretation.id}
+                            onThreadUpdated={onThreadUpdated}
+                        />
+                    ))}
                 </div>
             </div>
+            <CommentAddForm
+                currentUser={currentUser}
+                interpretationId={interpretation.id}
+                onSave={() => onThreadUpdated(true)}
+                focusRef={focusRef}
+            />
             <style jsx>{`
                 .thread {
                     margin-top: var(--spacers-dp16);
+                    overflow-y: auto;
+                    scroll-behavior: smooth;
                 }
 
                 .container {
@@ -100,11 +100,6 @@ const InterpretationThread = ({
                         rotation;
                 }
 
-                .scrollbox {
-                    overflow-y: auto;
-                    scroll-behavior: smooth;
-                }
-
                 .title {
                     display: flex;
                     align-items: center;

From 3f334229699a7ef20cb1c964f6349148c5658f6b Mon Sep 17 00:00:00 2001
From: martinkrulltott <martin@moid.se>
Date: Fri, 6 Oct 2023 09:22:06 +0200
Subject: [PATCH 4/4] fix: use vh in height

---
 .../Interpretations/InterpretationModal/InterpretationModal.js  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Interpretations/InterpretationModal/InterpretationModal.js b/src/components/Interpretations/InterpretationModal/InterpretationModal.js
index 6853ed4ed..5cc5050bd 100644
--- a/src/components/Interpretations/InterpretationModal/InterpretationModal.js
+++ b/src/components/Interpretations/InterpretationModal/InterpretationModal.js
@@ -24,7 +24,7 @@ const modalCSS = css.resolve`
         max-width: calc(100vw - 128px) !important;
         max-height: calc(100vh - 128px) !important;
         width: auto !important;
-        height: calc(100vw - 128px) !important;
+        height: calc(100vh - 128px) !important;
         overflow-y: hidden;
     }
     aside.hidden {