From 6cb36075125deec9e92020ee7cce6f05d0c94d16 Mon Sep 17 00:00:00 2001
From: boriskovar-m2ms <boris.kovar@m2ms.sk>
Date: Tue, 27 Feb 2024 09:20:06 +0100
Subject: [PATCH] #1341 "pin" edit tag row outside of tag list (#410)

Co-authored-by: matej <matej.vavrek@m2ms.sk>
---
 js/components/preview/tags/details/tagDetails.js | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/js/components/preview/tags/details/tagDetails.js b/js/components/preview/tags/details/tagDetails.js
index 33277de87..ee044bd8c 100644
--- a/js/components/preview/tags/details/tagDetails.js
+++ b/js/components/preview/tags/details/tagDetails.js
@@ -53,7 +53,6 @@ const useStyles = makeStyles(theme => ({
     display: 'flex',
     flexDirection: 'column',
     overflow: 'auto',
-    height: '100%',
     width: '100%',
     marginTop: -theme.spacing(),
     justifyContent: 'space-between',
@@ -199,8 +198,8 @@ const TagDetails = memo(() => {
   const moleculesToEditIds = useSelector(state => state.selectionReducers.moleculesToEdit);
   const moleculesToEdit =
     moleculesToEditIds &&
-    moleculesToEditIds.length > 0 &&
-    !(moleculesToEditIds.length === 1 && moleculesToEditIds[0] === null)
+      moleculesToEditIds.length > 0 &&
+      !(moleculesToEditIds.length === 1 && moleculesToEditIds[0] === null)
       ? moleculesToEditIds.map(id => dispatch(getMoleculeForId(id)))
       : [];
 
@@ -442,7 +441,7 @@ const TagDetails = memo(() => {
           </Grid>
         </Grid>
       </div>
-      <div ref={elementRef} className={classes.containerExpanded}>
+      <div ref={elementRef} className={classes.containerExpanded} style={{ height: tagDetailView ? "80%" : "87%" }}>
         {tagDetailView ? (
           <>
             <div className={classes.container} id="tagName">
@@ -604,9 +603,9 @@ const TagDetails = memo(() => {
             )}
           </div>
         )}
-        <div style={{ paddingBottom: resizableLayout === true ? '17px' : '0px' }}>
-          <NewTagDetailRow moleculesToEditIds={moleculesToEditIds} moleculesToEdit={moleculesToEdit} />
-        </div>
+      </div>
+      <div style={{ paddingBottom: resizableLayout === true ? '17px' : '0px' }}>
+        <NewTagDetailRow moleculesToEditIds={moleculesToEditIds} moleculesToEdit={moleculesToEdit} />
       </div>
     </Panel>
   );