Merge pull request #338 from visdesignlab/335-title-collapse

Hide title on narrower screens
visdesignlab · Apr 5, 2024 · 31ac50b · 31ac50b
2 parents 9830e41 + 6272508
commit 31ac50b
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 1 deletion.
diff --git a/packages/app/src/components/Header/index.tsx b/packages/app/src/components/Header/index.tsx
@@ -153,7 +153,7 @@ const Header = ({ data }: { data: any }) => {
       }}>
         <Box sx={{display: 'flex', flexGrow: '1', justifyContent: 'start', alignItems: 'center', margin: 0, padding: 0}}>
           <img className="logo" id="multinet-logo" src="https://raw.githubusercontent.com/multinet-app/multinet-components/main/src/assets/multinet_logo.svg" alt="Multinet Logo"/>
-          <Typography variant="h1" noWrap component="div" sx={{ marginRight: '5px', lineHeight: '1.5', fontWeight: 'normal', fontSize: '1.3em' }}>
+          <Typography id="upset-title" variant="h1" noWrap component="div" sx={{ marginRight: '5px', lineHeight: '1.5', fontWeight: 'normal', fontSize: '1.3em' }}>
             Upset - Visualizing Intersecting Sets
           </Typography>
           <ButtonGroup>

diff --git a/packages/app/src/index.css b/packages/app/src/index.css
@@ -17,3 +17,10 @@ code {
   width: 32px;
   margin-right: 10px;
 }
+
+/* Ensure that the Upset title is hidden on smaller screens to not compete with other menu bar items */
+@media only screen and (max-width: 1060px) {
+  #upset-title {
+    display: none;
+  }
+}