fix: interpretations modal height (DHIS2-15558)

dhis2 · Oct 16, 2023 · 014d43e · 014d43e
1 parent f27bc38
commit 014d43e
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git a/src/components/Interpretations/InterpretationModal/InterpretationModal.js b/src/components/Interpretations/InterpretationModal/InterpretationModal.js
@@ -24,21 +24,22 @@ 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%;
     }
 `
 
 function getModalContentCSS(width) {
     return css.resolve`
         div {
             width: ${width}px;
+            overflow-y: visible;
         }
     `
 }
@@ -216,12 +217,14 @@ const InterpretationModal = ({
                     .container {
                         display: flex;
                         flex-direction: column;
+                        height: 100%;
                     }
 
                     .row {
                         display: flex;
                         flex-direction: row;
                         gap: 16px;
+                        height: 100%;
                     }
 
                     .visualisation-wrap {
@@ -233,7 +236,6 @@ const InterpretationModal = ({
                         padding-right: ${spacers.dp4};
                         flex-basis: 300px;
                         flex-shrink: 0;
-                        overflow-y: auto;
                     }
                 `}</style>
             </Modal>

diff --git a/src/components/Interpretations/InterpretationModal/InterpretationThread.js b/src/components/Interpretations/InterpretationModal/InterpretationThread.js
@@ -80,9 +80,17 @@ const InterpretationThread = ({
                     )}
                 </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 {
@@ -117,11 +125,6 @@ const InterpretationThread = ({
                         rotation;
                 }
 
-                .scrollbox {
-                    overflow-y: auto;
-                    scroll-behavior: smooth;
-                }
-
                 .title {
                     display: flex;
                     align-items: center;