fix(ui): Enhance UI Components and Update CornerstoneJS Dependencies and resizable panels (#4938)

Co-authored-by: Joe Boccanfuso <joe.boccanfuso@radicalimaging.com>

platform/ui-next/src/components/Numeric/Numeric.tsx

@@ -381,8 +381,8 @@ function NumberStepper({ className, children, direction, inputWidth }: NumberSte
           onChange={handleInputChange}
           onBlur={handleBlur}
           className={cn(
-            "h-6 appearance-none border-none p-0 text-center shadow-none focus:border-none focus:outline-none",
-            inputWidth ? inputWidth : "w-12 max-w-12"
+            'h-6 appearance-none border-none p-0 text-center shadow-none focus:border-none focus:outline-none',
+            inputWidth
           )}
         />
         {children}
@@ -410,16 +410,16 @@ function NumberStepper({ className, children, direction, inputWidth }: NumberSte
         onBlur={handleBlur}
         className={cn(
           'h-6 appearance-none border-none p-0 text-center shadow-none focus:border-none focus:outline-none',
-          inputWidth ? inputWidth : "w-12 max-w-12"
+          inputWidth ? inputWidth : 'max-w-12 min-w-0'
         )}
       />
-      <div className="ml-1 flex flex-col">
+      <div className="ml-1 flex flex-shrink-0 flex-col">
         <Button
           variant="ghost"
           size="icon"
           onClick={() => setSingleValue(singleValue + step)}
           disabled={singleValue >= max}
-          className="text-primary h-3 w-5 pr-px"
+          className="text-primary h-3 w-5"
         >
           <ChevronUp className="h-3 w-3" />
         </Button>
@@ -428,7 +428,7 @@ function NumberStepper({ className, children, direction, inputWidth }: NumberSte
           size="icon"
           onClick={() => setSingleValue(singleValue - step)}
           disabled={singleValue <= min}
-          className="text-primary h-3 w-5 pr-px"
+          className="text-primary h-3 w-5"
         >
           <ChevronDown className="h-3 w-3" />
         </Button>
@@ -483,4 +483,4 @@ export const Numeric = {
   NumberStepper,
 };
 
-export default Numeric;
+export default Numeric;

platform/ui-next/src/components/ViewportDialog/ViewportDialog.tsx

@@ -91,7 +91,7 @@ const ViewportDialog: React.FC<ViewportDialogProps> = ({
   return (
     <div
       ref={notificationRef}
-      className="border-input bg-muted mx-2 mt-2 flex flex-col rounded-md border p-2 outline-none"
+      className="border-input bg-muted mx-1.5 mt-2 flex flex-col rounded-md border p-2 outline-none"
       data-cy={id}
       onKeyDown={onKeyPress}
       tabIndex={0}

platform/ui-next/src/index.ts

@@ -1,6 +1,6 @@
 import * as utils from './utils';
+import { cn } from './utils';
 export * from './components';
 export * from './contextProviders';
 export * as Types from './types';
-
-export { utils };
+export { utils, cn };

platform/ui-next/src/utils/index.ts

@@ -1,4 +1,5 @@
 import { getToggledClassName } from './getToggledClassName';
 import roundNumber from './roundNumber';
+import { cn } from '../lib/utils';
 
-export { getToggledClassName, roundNumber };
+export { getToggledClassName, roundNumber, cn };