fix(Worklist): use the flexbox gap style property for spacing between mode buttons (#3532)

platform/app/src/routes/WorkList/WorkList.tsx

@@ -336,6 +336,7 @@ function WorkList({
               : []
           }
         >
+          <div className="flex flex-row gap-2">
             {appConfig.loadedModes.map((mode, i) => {
               const isFirst = i === 0;
 
@@ -358,9 +359,17 @@ function WorkList({
               query.append('StudyInstanceUIDs', studyInstanceUid);
               return (
                 <Link
+                  className={isValidMode ? '' : 'cursor-not-allowed'}
                   key={i}
                   to={`${dataPath ? '../../' : ''}${mode.routeName}${dataPath ||
                     ''}?${query.toString()}`}
+                  onClick={event => {
+                    // In case any event bubbles up for an invalid mode, prevent the navigation.
+                    // For example, the event bubbles up when the icon embedded in the disabled button is clicked.
+                    if (!isValidMode) {
+                      event.preventDefault();
+                    }
+                  }}
                   // to={`${mode.routeName}/dicomweb?StudyInstanceUIDs=${studyInstanceUid}`}
                 >
                   {/* TODO revisit the completely rounded style of buttons used for launching a mode from the worklist later - for now use LegacyButton*/}
@@ -369,7 +378,6 @@ function WorkList({
                     variant={isValidMode ? 'contained' : 'disabled'}
                     disabled={!isValidMode}
                     endIcon={<Icon name="launch-arrow" />} // launch-arrow | launch-info
-                  className={classnames({ 'ml-2': !isFirst })}
                     onClick={() => {}}
                   >
                     {t(`Modes:${mode.displayName}`)}
@@ -377,6 +385,7 @@ function WorkList({
                 </Link>
               );
             })}
+          </div>
         </StudyListExpandedRow>
       ),
       onClickRow: () =>