fix(general): enhancements and bug fixes (#4018)

platform/ui/src/assets/styles/styles.css

@@ -4,6 +4,10 @@
   overflow-y: auto;
 }
 
+.ohif-scrollbar-stable-gutter {
+  scrollbar-gutter: stable;
+}
+
 .study-min-height {
   min-height: 450px;
 }

platform/ui/src/components/Notification/Notification.tsx

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import Button, { ButtonEnums } from '../Button';
 import Icon from '../Icon';
 
-const Notification = ({ id, type, message, actions, onSubmit, onOutsideClick }) => {
+const Notification = ({ id, type, message, actions, onSubmit, onOutsideClick, onKeyPress }) => {
   const notificationRef = useRef(null);
 
   useEffect(() => {
@@ -29,6 +29,10 @@ const Notification = ({ id, type, message, actions, onSubmit, onOutsideClick })
     };
   }, [onOutsideClick]);
 
+  useEffect(() => {
+    notificationRef.current.focus();
+  }, []);
+
   const iconsByType = {
     error: {
       icon: 'info',
@@ -64,6 +68,8 @@ const Notification = ({ id, type, message, actions, onSubmit, onOutsideClick })
       ref={notificationRef}
       className="border-customblue-10 bg-customblue-400 mx-2 mt-2 flex flex-col rounded-md border-2 p-2"
       data-cy={id}
+      onKeyDown={onKeyPress}
+      tabIndex={0}
     >
       <div className="flex grow items-center">
         <Icon
@@ -112,6 +118,7 @@ Notification.propTypes = {
   onSubmit: PropTypes.func.isRequired,
   /** Can be used as a callback to dismiss the notification for clicks that occur outside of it */
   onOutsideClick: PropTypes.func,
+  onKeyPress: PropTypes.func,
 };
 
 export default Notification;

platform/ui/src/contextProviders/ViewportDialogProvider.tsx

@@ -17,6 +17,9 @@ const DEFAULT_STATE = {
   onDismiss: () => {
     console.log('dismiss? -1');
   },
+  onKeyPress: () => {
+    console.log('key pressed?');
+  },
 };
 
 const ViewportDialogContext = createContext(null);