fix small defects

platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx

@@ -93,7 +93,7 @@ const ViewportActionBar = ({ studyData, onSeriesChange }) => {
             </span>
           </div>
           <div className="flex">
-            <p className="text-base truncate max-w-sm text-primary-light">
+            <p className="text-base truncate max-w-72 text-primary-light">
               {seriesDescription}
             </p>
           </div>

platform/ui/src/components/ViewportGrid/ViewportGrid.jsx

@@ -9,7 +9,7 @@ const ViewportGrid = ({ rows, cols, viewportContents }) => {
       <div
         key={index}
         className={classnames(
-          'rounded-lg hover:border-primary-light transition duration-300 outline-none',
+          'rounded-lg hover:border-primary-light transition duration-300 outline-none overflow-hidden',
           {
             'border-2 border-primary-light -m-px': isActive,
             'border border-secondary-light': !isActive,

platform/ui/tailwind.config.js

@@ -179,7 +179,7 @@ module.exports = {
       '112': '28rem',
       '250px': '250px',
     },
-    backgroundColor: (theme) => theme('colors'),
+    backgroundColor: theme => theme('colors'),
     backgroundPosition: {
       bottom: 'bottom',
       center: 'center',
@@ -196,7 +196,7 @@ module.exports = {
       cover: 'cover',
       contain: 'contain',
     },
-    borderColor: (theme) => ({
+    borderColor: theme => ({
       ...theme('colors'),
       default: theme('colors.gray.300', 'currentColor'),
     }),
@@ -310,7 +310,7 @@ module.exports = {
       extrabold: '800',
       black: '900',
     },
-    height: (theme) => ({
+    height: theme => ({
       auto: 'auto',
       ...theme('spacing'),
       full: '100%',
@@ -355,7 +355,7 @@ module.exports = {
       ...theme('spacing'),
       ...negative(theme('spacing')),
     }),
-    maxHeight: (theme) => ({
+    maxHeight: theme => ({
       full: '100%',
       screen: '100vh',
       ...theme('spacing'),
@@ -374,14 +374,15 @@ module.exports = {
       '6xl': '72rem',
       full: '100%',
       ...breakpoints(theme('screens')),
+      ...theme('spacing'),
     }),
-    minHeight: (theme) => ({
+    minHeight: theme => ({
       ...theme('spacing'),
       '0': '0',
       full: '100%',
       screen: '100vh',
     }),
-    minWidth: (theme) => ({
+    minWidth: theme => ({
       ...theme('spacing'),
       '0': '0',
       xs: '2rem',
@@ -442,9 +443,9 @@ module.exports = {
       '11': '11',
       '12': '12',
     },
-    padding: (theme) => theme('spacing'),
+    padding: theme => theme('spacing'),
-    placeholderColor: (theme) => theme('colors'),
+    placeholderColor: theme => theme('colors'),
-    stroke: (theme) => ({
+    stroke: theme => ({
       ...theme('colors'),
       current: 'currentColor',
     }),
@@ -453,8 +454,8 @@ module.exports = {
       '1': '1',
       '2': '2',
     },
-    textColor: (theme) => theme('colors'),
+    textColor: theme => theme('colors'),
-    width: (theme) => ({
+    width: theme => ({
       auto: 'auto',
       ...theme('spacing'),
       '1/2': '50%',
@@ -519,7 +520,7 @@ module.exports = {
       '40': '40',
       '50': '50',
     },
-    gap: (theme) => theme('spacing'),
+    gap: theme => theme('spacing'),
     gridTemplateColumns: {
       none: 'none',
       '1': 'repeat(1, minmax(0, 1fr))',