fix: Measurement Tracking: Various UI and functionality improvements (#4481)

extensions/default/src/Panels/StudyBrowser/PanelStudyBrowserHeader.tsx

@@ -19,7 +19,18 @@ function PanelStudyBrowserHeader({
       <div className="bg-muted flex h-[40px] select-none rounded-t p-2">
         <div className={'flex h-[24px] w-full select-none justify-center self-center text-[14px]'}>
           <div className="flex w-full items-center gap-[10px]">
-            <div className="flex h-full items-center justify-center">
+            <div className="flex items-center justify-center">
+              <div className="text-primary-active flex items-center space-x-1">
+                {actionIcons.map((icon: actionIcon, index) =>
+                  React.createElement(Icons[icon.iconName] || Icons.MissingIcon, {
+                    key: index,
+                    onClick: () => updateActionIconValue(icon),
+                    className: `cursor-pointer`,
+                  })
+                )}
+              </div>
+            </div>
+            <div className="ml-auto flex h-full items-center justify-center">
               <ToggleGroup
                 type="single"
                 value={viewPresets.filter(preset => preset.selected)[0].id}
@@ -40,18 +51,6 @@ function PanelStudyBrowserHeader({
                 ))}
               </ToggleGroup>
             </div>
-
-            <div className="flex items-center justify-center">
-              <div className="text-primary-active flex items-center space-x-1">
-                {actionIcons.map((icon: actionIcon, index) =>
-                  React.createElement(Icons[icon.iconName] || Icons.MissingIcon, {
-                    key: index,
-                    onClick: () => updateActionIconValue(icon),
-                    className: `cursor-pointer`,
-                  })
-                )}
-              </div>
-            </div>
           </div>
         </div>
       </div>

extensions/default/src/index.ts

@@ -35,6 +35,7 @@ import colorPickerDialog from './utils/colorPickerDialog';
 import promptSaveReport from './utils/promptSaveReport';
 import promptLabelAnnotation from './utils/promptLabelAnnotation';
 import usePatientInfo from './hooks/usePatientInfo';
+import { PanelStudyBrowserHeader } from './Panels/StudyBrowser/PanelStudyBrowserHeader';
 import * as utils from './utils';
 
 const defaultExtension: Types.Extensions.Extension = {
@@ -99,5 +100,6 @@ export {
   promptLabelAnnotation,
   colorPickerDialog,
   usePatientInfo,
+  PanelStudyBrowserHeader,
   utils,
 };