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>

extensions/cornerstone-dicom-seg/src/panels/PanelSegmentation.tsx

@@ -196,7 +196,7 @@ export default function PanelSegmentation({
   );
 
   return (
-    <div className="flex flex-col justify-between mt-1">
+    <div className="flex flex-col flex-auto min-h-0 justify-between mt-1">
       {/* show segmentation table */}
       {segmentations?.length ? (
         <SegmentationGroupTable

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',
       }}

platform/ui/tailwind.config.js

@@ -230,6 +230,7 @@ module.exports = {
       auto: '1 1 auto',
       initial: '0 1 auto',
       none: 'none',
+      static: '0 0 auto',
     },
     flexGrow: {
       '0': '0',

platform/viewer/tailwind.config.js

@@ -238,6 +238,7 @@ module.exports = {
       auto: '1 1 auto',
       initial: '0 1 auto',
       none: 'none',
+      static: '0 0 auto',
     },
     flexGrow: {
       '0': '0',
@@ -302,6 +303,7 @@ module.exports = {
       ...theme('spacing'),
       full: '100%',
       screen: '100vh',
+      inherit: 'inherit',
     }),
     inset: {
       '0': '0',
@@ -311,6 +313,12 @@ module.exports = {
       '1/2': '50%',
       'viewport-scrollbar': '1.3rem',
     },
+    minHeight: theme => ({
+      ...theme('spacing'),
+      '0': '0',
+      full: '100%',
+      screen: '100vh',
+    }),
     letterSpacing: {
       tighter: '-0.05em',
       tight: '-0.025em',
@@ -366,12 +374,6 @@ module.exports = {
       ...breakpoints(theme('screens')),
       ...theme('spacing'),
     }),
-    minHeight: theme => ({
-      ...theme('spacing'),
-      '0': '0',
-      full: '100%',
-      screen: '100vh',
-    }),
     minWidth: theme => ({
       ...theme('spacing'),
       '0': '0',