feat: make app more mobile friendly

client/src/components/Browse/Sources/BrowseSources.scss

@@ -6,7 +6,7 @@
   padding: 15px;
   .sources-grid {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
     grid-template-rows: repeat(1, 1fr);
     grid-column-gap: 15px;
     grid-row-gap: 15px;
@@ -38,6 +38,7 @@
     }
   }
   .filter-buttons {
+    flex-wrap: wrap;
     .MuiButton-outlined {
       color: var(--theme-primary) !important;
       border-color: var(--theme-primary) !important;

client/src/components/Drug/DrugRecord/DrugRecord.scss

@@ -9,6 +9,7 @@
 
   .drug-record-header {
     display: flex;
+    flex-wrap: wrap;
     flex-direction: row;
     align-items: end; // isn't aligning name object correctly
     margin-bottom: 0.5em;

client/src/components/Drug/DrugRecord/DrugRecord.tsx

@@ -23,8 +23,10 @@ import { useGetDrugInteractions } from 'hooks/queries/useGetDrugInteractions';
 import { generateXrefLink } from 'utils/generateXrefLink';
 import { ResultTypes } from 'types/types';
 import { NotFoundError } from 'components/Shared/NotFoundError/NotFoundError';
+import { useGetIsMobile } from 'hooks/shared/useGetIsMobile';
 
 export const DrugRecord: React.FC = () => {
+  const isMobile = useGetIsMobile();
   const drugId = useParams().drug as string;
 
   // get drug attributes
@@ -217,8 +219,8 @@ export const DrugRecord: React.FC = () => {
           {generateXrefLink(drugId, ResultTypes.Drug, 'concept-id-link')}
         </Box>
       </Box>
-      <Box display="flex">
-        <Box display="block" width="35%">
+      <Box display={isMobile ? 'block' : 'flex'}>
+        <Box display="block" width={isMobile ? '100%' : '35%'}>
           {sectionsMap.map((section) => {
             return (
               <Accordion key={section.name} defaultExpanded>
@@ -246,7 +248,11 @@ export const DrugRecord: React.FC = () => {
             );
           })}
         </Box>
-        <Box ml={1} width="65%">
+        <Box
+          ml={isMobile ? 0 : 1}
+          mt={isMobile ? 2 : 0}
+          width={isMobile ? '100%' : '65%'}
+        >
           <Accordion defaultExpanded>
             <AccordionSummary
               style={{

client/src/components/Drug/DrugSummary/DrugSummary.scss

@@ -13,15 +13,33 @@
     color: var(--text-content);
   }
 
+  @media screen and (max-width: 768px) {
+    .drug-summary-content {
+      display: block !important;
+    }
+    .interaction-count-container {
+      max-width: 100% !important;
+      border: none !important;
+      margin-bottom: 20px;
+    }
+    .summary-infographic-container {
+      max-width: 100% !important;
+      border: none !important;
+      margin-bottom: 20px;
+      margin-left: 0 !important;
+    }
+    .chart-section {
+      flex-direction: column;
+    }
+  }
+
   .drug-summary-content {
     display: flex;
 
     .interaction-count-container {
       border: 1px var(--text-content) solid;
-      margin-right: 7px;
       padding: 10px;
-      min-height: 400px;
-      width: 100px;
+      max-width: fit-content;
       flex-grow: 1;
 
       .interaction-count-header {
@@ -50,16 +68,17 @@
     }
 
     .summary-infographic-container {
+      margin-left: 5px;
       border: 1px var(--text-content) solid;
       padding: 10px;
-      width: 80%;
-      justify-content: space-between;
       display: flex;
       flex-direction: column;
-      height: 500px;
+      width: 100%;
+      overflow-x: scroll;
 
       .tabbed-view {
         align-items: flex-start !important;
+        min-width: fit-content;
       }
 
       .chart-section {

client/src/components/Drug/DrugSummary/DrugSummary.tsx

@@ -13,14 +13,16 @@ import {
 import { InteractionTypeDrug } from 'components/Drug/DrugCharts';
 import { DirectionalityDrug } from 'components/Drug/DrugCharts';
 import { GeneCategories } from 'components/Drug/DrugCharts';
-import { Tab, Tabs } from '@mui/material';
+import { Alert, IconButton, Tab, Tabs } from '@mui/material';
 import TabPanel from 'components/Shared/TabPanel/TabPanel';
 
 // styles
 import './DrugSummary.scss';
 import Box from '@mui/material/Box';
 import InteractionTable from 'components/Shared/InteractionTable/InteractionTable';
 import TableDownloader from 'components/Shared/TableDownloader/TableDownloader';
+import CloseIcon from '@mui/icons-material/Close';
+import { useGetIsMobile } from 'hooks/shared/useGetIsMobile';
 
 ChartJS.register(
   CategoryScale,
@@ -42,6 +44,13 @@ const InteractionCountDrug: React.FC<CountProps> = ({
   selectedDrugs,
   setSelectedDrugs,
 }) => {
+  const [hideAlert, setHideAlert] = React.useState(
+    window.localStorage.getItem('interaction-filter-tip-alert')
+  );
+  const handleCloseAlertTip = () => {
+    setHideAlert('true');
+    window.localStorage.setItem('interaction-filter-tip-alert', 'true');
+  };
   const toggleFilter = (drugName: string) => {
     if (selectedDrugs.includes(drugName)) {
       setSelectedDrugs(
@@ -54,6 +63,23 @@ const InteractionCountDrug: React.FC<CountProps> = ({
 
   return (
     <div className="interaction-count-container">
+      {!hideAlert && (
+        <Alert
+          severity="info"
+          action={
+            <IconButton
+              aria-label="close"
+              color="inherit"
+              size="small"
+              onClick={handleCloseAlertTip}
+            >
+              <CloseIcon fontSize="inherit" />
+            </IconButton>
+          }
+        >
+          You can filter by selecting the rows below
+        </Alert>
+      )}
       <div className="interaction-count-header">
         <div className="interaction-count-drug">
           <h2>
@@ -91,6 +117,7 @@ const SummaryInfoDrug: React.FC<InfoProps> = ({
   drugMatches,
   selectedDrugs,
 }) => {
+  const isMobile = useGetIsMobile();
   const [windowSize, setWindowSize] = useState(getWindowSize());
   const [value, setValue] = useState(0);
 
@@ -134,7 +161,7 @@ const SummaryInfoDrug: React.FC<InfoProps> = ({
           <Tabs
             value={value}
             onChange={handleChange}
-            orientation="vertical"
+            orientation={isMobile ? 'horizontal' : 'vertical'}
             textColor="secondary"
             indicatorColor="secondary"
           >
@@ -221,7 +248,7 @@ export const DrugSummary: React.FC<SummaryProps> = ({ drugs, isLoading }) => {
         alignItems="center"
         justifyContent="space-between"
       >
-        <Box display="flex" alignItems="center">
+        <Box display="flex" alignItems="center" flexWrap="wrap" mb={1}>
           <h1>Interaction Results</h1>
           <Box id="interaction-count" ml={2}>
             {interactionResults.length} total interactions

client/src/components/Gene/GeneRecord/GeneRecord.scss

@@ -9,6 +9,7 @@
 
   .gene-record-header {
     display: flex;
+    flex-wrap: wrap;
     flex-direction: row;
     align-items: end; // isn't aligning name object correctly
     margin-bottom: 0.5em;

client/src/components/Gene/GeneRecord/GeneRecord.tsx

@@ -22,8 +22,10 @@ import { dropRedundantCites } from 'utils/dropRedundantCites';
 import { generateXrefLink } from 'utils/generateXrefLink';
 import { ResultTypes } from 'types/types';
 import { NotFoundError } from 'components/Shared/NotFoundError/NotFoundError';
+import { useGetIsMobile } from 'hooks/shared/useGetIsMobile';
 
 export const GeneRecord: React.FC = () => {
+  const isMobile = useGetIsMobile();
   const geneId: any = useParams().gene;
 
   // get gene attributes
@@ -215,8 +217,8 @@ export const GeneRecord: React.FC = () => {
           {generateXrefLink(geneId, ResultTypes.Gene, 'concept-id-link')}
         </Box>
       </Box>
-      <Box display="flex">
-        <Box display="block" width="35%">
+      <Box display={isMobile ? 'block' : 'flex'}>
+        <Box display="block" width={isMobile ? '100%' : '35%'}>
           {sectionsMap.map((section) => {
             return (
               <Accordion key={section.name} defaultExpanded>
@@ -244,7 +246,11 @@ export const GeneRecord: React.FC = () => {
             );
           })}
         </Box>
-        <Box ml={1} width="65%">
+        <Box
+          ml={isMobile ? 0 : 1}
+          mt={isMobile ? 2 : 0}
+          width={isMobile ? '100%' : '65%'}
+        >
           <Accordion defaultExpanded>
             <AccordionSummary
               style={{

client/src/components/Gene/GeneSummary/GeneSummary.scss

@@ -14,15 +14,34 @@
     color: var(--text-content);
   }
 
+  @media screen and (max-width: 768px) {
+    .gene-summary-content {
+      display: block !important;
+    }
+    .interaction-count-container {
+      max-width: 100% !important;
+      border: none !important;
+      margin-bottom: 20px;
+    }
+    .summary-infographic-container {
+      max-width: 100% !important;
+      border: none !important;
+      margin-bottom: 20px;
+      margin-left: 0 !important;
+    }
+    .chart-section {
+      flex-direction: column;
+    }
+  }
+
   .gene-summary-content {
     display: flex;
     background-color: var(--background);
 
     .interaction-count-container {
       border: 1px var(--text-content) solid;
-      margin-right: 7px;
       padding: 10px;
-      min-height: 400px;
+      max-width: fit-content;
       flex-grow: 1;
 
       .interaction-count-header {
@@ -52,17 +71,19 @@
     }
 
     .summary-infographic-container {
+      margin-left: 5px;
       border: 1px var(--text-content) solid;
       padding: 10px;
-      width: 80%;
-      justify-content: space-between;
       display: flex;
       flex-direction: column;
-      height: 500px;
+      min-height: 500px;
+      width: 100%;
+      overflow-x: scroll;
 
       .tabbed-view {
         align-items: flex-start !important;
         justify-content: center;
+        min-width: fit-content;
       }
 
       .chart-section {