Reduce width so sidebar does not go offscren (#446)

oncokb · Oct 1, 2024 · 30df3be · 30df3be
1 parent d37c65a
commit 30df3be
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 3 deletions.
diff --git a/src/main/webapp/app/components/sidebar/OncoKBSidebar.tsx b/src/main/webapp/app/components/sidebar/OncoKBSidebar.tsx
@@ -152,7 +152,7 @@ const OncoKBSidebarExpanded = observer(
           onMouseOut={handleMouseOut}
           onMouseDown={handleMouseDown}
         />
-        <div style={{ marginTop: '2.25rem' }}>
+        <div style={{ marginTop: '2.25rem', display: 'flex', flexDirection: 'column' }}>
           {oncoKBSidebarWidth !== maxWidth && (
             <ActionIcon
               size="lg"
@@ -175,7 +175,9 @@ const OncoKBSidebarExpanded = observer(
             data-testid={CLOSE_SIDEBAR_BUTTON_ID}
           />
         </div>
-        <div style={{ marginTop: '2rem', display: 'flex', width: '100%' }}>{children}</div>
+        <div className="ps-3" style={{ marginTop: '2rem', display: 'flex', width: '100%', overflowX: 'hidden' }}>
+          {children}
+        </div>
       </div>
     );
   },

diff --git a/src/main/webapp/app/pages/curation/CurationPage.tsx b/src/main/webapp/app/pages/curation/CurationPage.tsx
@@ -246,6 +246,7 @@ export const CurationPage = (props: ICurationPageProps) => {
         />
         <OncoKBSidebar>
           <Tabs
+            className="pe-4 ps-2 mt-1"
             tabs={[
               {
                 title: 'Tools',

diff --git a/src/main/webapp/app/pages/curation/GeneListPage.tsx b/src/main/webapp/app/pages/curation/GeneListPage.tsx
@@ -147,7 +147,7 @@ const GeneListPage = (props: IGeneListPage) => {
                 </Col>
               </Row>
               <OncoKBSidebar>
-                <Tabs tabs={sidebarTabs} />
+                <Tabs className="pe-4 ps-2 mt-1" tabs={sidebarTabs} />
               </OncoKBSidebar>
             </>
           ) : (

diff --git a/...hots/baseline/desktop_chrome/data-import-data-table-after-import--1920x1080.png b/...hots/baseline/desktop_chrome/data-import-data-table-after-import--1920x1080.png
diff --git a/...ots/baseline/desktop_chrome/data-import-data-table-before-import--1920x1080.png b/...ots/baseline/desktop_chrome/data-import-data-table-before-import--1920x1080.png