fix panel width

platform/ui/src/components/SidePanel/SidePanel.jsx

@@ -5,8 +5,8 @@ import classnames from 'classnames';
 import { Button, Icon } from '@ohif/ui';
 
 const borderSize = 4;
-const expandedWidth = 320;
+const expandedWidth = 248;
-const collapsedWidth = 60;
+const collapsedWidth = 56;
 
 const baseStyle = {
   maxWidth: `${expandedWidth}px`,
@@ -26,7 +26,7 @@ const styleMap = {
 };
 
 const baseClasses =
-  'transition-all duration-300 ease-in-out h-100 bg-primary-dark border-black flex flex-col justify-start';
+  'transition-all duration-300 ease-in-out h-100 bg-primary-dark border-black flex flex-col justify-start box-content';
 
 const classesMap = {
   open: {

platform/ui/src/components/StudyBrowser/StudyBrowser.jsx

@@ -11,7 +11,7 @@ const studyGroup = {
   All: [studySimple, studyWithSR],
 };
 
-const buttonClasses = 'text-white text-base border-none bg-black';
+const buttonClasses = 'text-white text-base border-none bg-black p-2 min-w-18';
 const activeButtonClasses = 'bg-primary-main';
 
 const StudyBrowser = () => {
@@ -35,7 +35,7 @@ const StudyBrowser = () => {
                   buttonClasses,
                   isActive && activeButtonClasses
                 )}
-                size="small"
+                size="initial"
                 onClick={() => {
                   setStudyGroupSelected(studyGroup);
                   setStudyActive(null);

platform/ui/src/components/StudyItem/StudyItem.jsx

@@ -5,7 +5,7 @@ import classnames from 'classnames';
 import { Icon } from '@ohif/ui';
 
 const baseClasses =
-  'first:border-0 border-t border-secondary-light cursor-pointer';
+  'first:border-0 border-t border-secondary-light cursor-pointer outline-none';
 
 const StudyItem = ({
   studyDate,

platform/ui/src/components/Thumbnail/Thumbnail.jsx

@@ -17,20 +17,20 @@ const Thumbnail = ({
 
   return (
     <div
-      className="flex flex-row flex-1 px-4 py-2 showExcludeButtonOnHover cursor-pointer"
+      className="flex flex-row flex-1 px-3 py-2 showExcludeButtonOnHover cursor-pointer outline-none"
       onClick={onClick}
       onKeyDown={onClick}
       role="button"
       tabIndex="0"
     >
-      <div className="flex flex-col flex-2 px-2 items-center">
+      <div className="flex flex-col flex-2 items-center">
         <div
           className={classnames(
             'flex flex-col items-center justify-start p-2 mb-2 relative cursor-pointer',
             isTracked && 'rounded-sm hover:bg-gray-900 showTooltipOnHover'
           )}
         >
-          <Icon name={trackedIcon} className="text-primary-light mb-2 w-5" />
+          <Icon name={trackedIcon} className="text-primary-light mb-2 w-4" />
           <div className="text-white text-xl leading-tight h-5">
             {viewportIdentificator}
           </div>
@@ -74,13 +74,16 @@ const Thumbnail = ({
           </div>
         </div>
         {isTracked && (
-          <Icon name="cancel" className="text-primary-active excludeButton" />
+          <Icon
+            name="cancel"
+            className="text-primary-active excludeButton w-4"
+          />
         )}
       </div>
-      <div className="flex flex-col flex-1 px-4">
+      <div className="flex flex-col flex-1 px-3">
         <div
           className={classnames(
-            'flex flex-1 items-center justify-center rounded-md bg-black text-white mb-2',
+            'flex flex-1 items-center justify-center rounded-md bg-black text-base text-white mb-2',
             isActive
               ? 'border-2 border-primary-light'
               : 'border border-secondary-light hover:border-blue-300'

platform/ui/src/components/ThumbnailList/ThumbnailList.jsx

@@ -29,6 +29,7 @@ const ThumbnailList = ({ thumbnails }) => {
                 modality={modality}
                 seriesDate={seriesDate}
                 seriesDescription={seriesDescription}
+                onClick={() => {}}
               />
             );
           } else {

platform/ui/src/components/ThumbnailSR/ThumbnailSR.jsx

@@ -3,10 +3,13 @@ import PropTypes from 'prop-types';
 
 import { Icon } from '@ohif/ui';
 
-const ThumbnailSR = ({ seriesDescription, seriesDate }) => {
+const ThumbnailSR = ({ seriesDescription, seriesDate, onClick }) => {
   return (
-    <div className="flex flex-row flex-1 px-4 py-3">
+    <div
-      <div className="flex flex-2 pl-4 pr-6">
+      className="flex flex-row flex-1 px-4 py-3 cursor-pointer"
+      onClick={onClick}
+    >
+      <div className="flex flex-2 pl-2 pr-3">
         <Icon name="list-bullets" className="text-secondary-light" />
       </div>
       <div className="flex flex-col flex-1">
@@ -26,6 +29,7 @@ const ThumbnailSR = ({ seriesDescription, seriesDate }) => {
 ThumbnailSR.propTypes = {
   seriesDescription: PropTypes.string,
   seriesDate: PropTypes.string,
+  onClick: PropTypes.func.isRequired,
 };
 
 export default ThumbnailSR;

platform/ui/src/views/Viewer/Viewer.mdx

@@ -50,7 +50,7 @@ import ViewportToolbar from './components/ViewportToolBar';
             iconName="group-layers"
             iconLabel="Studies"
             componentLabel="Studies"
-            defaultIsOpen={false}
+            defaultIsOpen={true}
           >
             <StudyBrowser />
           </SidePanel>

platform/ui/tailwind.config.js

@@ -161,7 +161,9 @@ module.exports = {
       '8': '2rem',
       '10': '2.5rem',
       '12': '3rem',
+      '14': '3.5rem',
       '16': '4rem',
+      '18': '4.5rem',
       '20': '5rem',
       '24': '6rem',
       '32': '8rem',
@@ -374,7 +376,8 @@ module.exports = {
       full: '100%',
       screen: '100vh',
     },
-    minWidth: {
+    minWidth: (theme) => ({
+      ...theme('spacing'),
       '0': '0',
       xs: '2rem',
       sm: '4rem',
@@ -382,7 +385,7 @@ module.exports = {
       lg: '8rem',
       xl: '10rem',
       full: '100%',
-    },
+    }),
     objectPosition: {
       bottom: 'bottom',
       center: 'center',