From 763d1ae2e3f6d495c989d0218691a0b2e15ac4fc Mon Sep 17 00:00:00 2001
From: borys_krutskykh <borys_krutskykh@epam.com>
Date: Fri, 19 Jan 2024 14:31:31 +0200
Subject: [PATCH] Bug fix - https://jira.epam.com/jira/browse/EPMUII-9032 -
 Vertical align meta data popup

---
 src/ui/Button/Button.module.css    |  2 +-
 src/ui/Modals/ModalInfo.jsx        |  4 ++--
 src/ui/Modals/ModalInfo.module.css | 17 +++++++++++++++++
 src/ui/Modals/Modals.module.css    |  3 +--
 4 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/ui/Button/Button.module.css b/src/ui/Button/Button.module.css
index 9da35b8c..9b8900d3 100644
--- a/src/ui/Button/Button.module.css
+++ b/src/ui/Button/Button.module.css
@@ -235,4 +235,4 @@ button:hover,
 
 .button_select_file svg {
   margin-right: 10px;
-}
\ No newline at end of file
+}
diff --git a/src/ui/Modals/ModalInfo.jsx b/src/ui/Modals/ModalInfo.jsx
index 9f52cd1d..2535641f 100644
--- a/src/ui/Modals/ModalInfo.jsx
+++ b/src/ui/Modals/ModalInfo.jsx
@@ -125,8 +125,8 @@ const ModalInfo = (props) => {
     return getVolInfo(volumeSet, volume);
   }, [volumeSet, volumeIndex]);
 
-  const slicesInfo = dicomInfo.m_sliceInfo || [];
-  const tagsList = slicesInfo[currentSlice].m_tags || [];
+  const slicesInfo = dicomInfo?.m_sliceInfo || [];
+  const tagsList = slicesInfo[currentSlice]?.m_tags || [];
 
   return (
     <Modal isOpen={stateVis} close={onHide}>
diff --git a/src/ui/Modals/ModalInfo.module.css b/src/ui/Modals/ModalInfo.module.css
index 5f842994..c4f0d745 100644
--- a/src/ui/Modals/ModalInfo.module.css
+++ b/src/ui/Modals/ModalInfo.module.css
@@ -81,6 +81,9 @@
   width: 100%;
   border-collapse: collapse;
   border: 1px solid var(--light);
+  display: block;
+  overflow-y: scroll;
+  height: 50vh;
 }
 
 .thead {
@@ -106,4 +109,18 @@
   font-size: 14px;
   border: 1px dashed var(--light);
   word-break: break-word;
+  width: 172px;
+}
+
+::-webkit-scrollbar
+{
+  width: 10px;
+  background-color: #F5F5F5;
+}
+
+::-webkit-scrollbar-thumb
+{
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
+  background-color: #dc5e47;
 }
diff --git a/src/ui/Modals/Modals.module.css b/src/ui/Modals/Modals.module.css
index 007e2aff..70d9c9f2 100644
--- a/src/ui/Modals/Modals.module.css
+++ b/src/ui/Modals/Modals.module.css
@@ -36,7 +36,7 @@
   z-index: 1004;
   position: absolute;
   width: 93%;
-  top: 15vh;
+  top: 9vh;
   left: 49%;
   margin: 0 5px;
   transform: translateX(-50%);
@@ -187,7 +187,6 @@
 @media screen and (min-width: 768px) {
   .modal {
     width: 600px;
-    top: calc(50vh - 180px);
   }
 
   .cards {