fix(Panels): dicom seg panel sizing issue (#3125)

* Fix dicom seg panel sizing issue

* Set unecessary changes back

Co-authored-by: Rodolfo <rodolfo@radicalimaging.com>

platform/ui/src/components/SegmentationGroupTable/SegmentationGroup.tsx

@@ -58,7 +58,7 @@ const SegmentGroupHeader = ({
   return (
     <div
       className={classnames(
-        'flex items-center pr-2 pl-[3px] h-[27px] gap-2 rounded-t-md border-b border-secondary-light cursor-pointer text-[12px]',
+        'flex flex-static items-center pr-2 pl-[3px] h-[27px] gap-2 rounded-t-md border-b border-secondary-light cursor-pointer text-[12px]',
         {
           'bg-secondary-main': isActive,
           'bg-secondary-dark': !isActive,
@@ -149,7 +149,7 @@ const SegmentationGroup = ({
   onSegmentEdit,
 }) => {
   return (
-    <div className="flex flex-col">
+    <div className="flex flex-col flex-auto min-h-0">
       <SegmentGroupHeader
         id={id}
         label={label}
@@ -162,7 +162,7 @@ const SegmentationGroup = ({
         onSegmentationDelete={onSegmentationDelete}
       />
       {!isMinimized && (
-        <div className="">
+        <div className="flex flex-col flex-auto min-h-0">
           <AddNewSegmentRow
             onConfigChange={onSegmentationConfigChange}
             onSegmentAdd={onSegmentAdd}
@@ -172,8 +172,7 @@ const SegmentationGroup = ({
             showAddSegment={showAddSegment}
           />
           <div
-            className="ohif-scrollbar overflow-y-hidden"
-            style={{ maxHeight: '40rem' }}
+            className="flex flex-col min-h-0 ohif-scrollbar overflow-y-hidden"
           >
             {!!segments.length &&
               segments.map(segment => {

platform/ui/src/components/SegmentationGroupTable/SegmentationGroupTable.tsx

@@ -55,7 +55,7 @@ const SegmentationGroupTable = ({
   setRenderOutline,
 }) => {
   return (
-    <div className="font-inter font-[300]">
+    <div className="flex flex-col min-h-0 font-inter font-[300]">
       <GetSegmentationConfig
         // showAddSegmentation={showAddSegmentation}
         // onSegmentationAdd={onSegmentationAdd}
@@ -68,7 +68,7 @@ const SegmentationGroupTable = ({
         setRenderInactiveSegmentations={setRenderInactiveSegmentations}
         setRenderOutline={setRenderOutline}
       />
-      <div className="flex flex-col pr-[1px] mt-1">
+      <div className="flex flex-col min-h-0 pr-[1px] mt-1">
         {!!segmentations.length &&
           segmentations.map((segmentation, index) => {
             const {
@@ -82,7 +82,6 @@ const SegmentationGroupTable = ({
               activeSegmentIndex,
             } = segmentation;
             return (
-              <>
                 <SegmentationGroup
                   id={id}
                   label={label}
@@ -107,8 +106,6 @@ const SegmentationGroupTable = ({
                   onSegmentAdd={onSegmentAdd}
                   showSegmentDelete={false}
                 />
-                <div className="h-2 bg-black"></div>
-              </>
             );
           })}
       </div>

platform/ui/src/components/SidePanel/SidePanel.tsx

@@ -176,7 +176,7 @@ const SidePanel = ({
           {/** Panel Header with Arrow and Close Actions */}
           <div
             className={classnames(
-              'px-[10px] bg-primary-dark h-9 cursor-pointer flex shrink-0',
+              'flex flex-static px-[10px] bg-primary-dark h-9 cursor-pointer',
               tabs.length === 1 && 'mb-1'
             )}
             onClick={() => {
@@ -190,7 +190,7 @@ const SidePanel = ({
               color="inherit"
               border="none"
               rounded="none"
-              className="flex flex-row items-center px-3 relative w-full"
+              className="flex flex-row flex-static items-center px-3 relative w-full"
               name={tabs.length === 1 ? `${tabs[activeTabIndex].name}` : ''}
             >
               <Icon
@@ -278,7 +278,7 @@ function _getMoreThanOneTabLayout(
 ) {
   return (
     <div
-      className="collapse-sidebar relative"
+      className="flex-static collapse-sidebar relative"
       style={{
         backgroundColor: '#06081f',
       }}