feat: Use list on mobile

Author: d-beezee

src/pages/Campaign/widgets/TotalBugsByOsAndDevices/index.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from 'react-i18next';
+import useWindowSize from 'src/hooks/useWindowSize';
 import FlipCard from '../widgetCards/FlipCard';
 import { ChartTotalBugsByDevice } from './ChartTotalBugsByDevice';
 import { ListTotalBugsByDevice } from './ListTotalBugsByDevice';
@@ -11,14 +12,26 @@ const TotalBugsByOsAndDevices = ({
   campaignId: number;
 }) => {
   const { t } = useTranslation();
+  const { isMobile } = useWindowSize();
+
   return (
     <FlipCard height={height}>
-      <FlipCard.Header>
+      <FlipCard.Header hasBack={!isMobile}>
         {t('__CAMPAIGN_PAGE_WIDGET_BUGS_BY_OS_AND_DEVICE_CARD_TITLE')}
       </FlipCard.Header>
       <FlipCard.Body
-        front={<ChartTotalBugsByDevice campaignId={campaignId} />}
-        back={<ListTotalBugsByDevice campaignId={campaignId} />}
+        front={
+          isMobile ? (
+            <ListTotalBugsByDevice campaignId={campaignId} />
+          ) : (
+            <ChartTotalBugsByDevice campaignId={campaignId} />
+          )
+        }
+        back={
+          isMobile ? undefined : (
+            <ListTotalBugsByDevice campaignId={campaignId} />
+          )
+        }
       />
     </FlipCard>
   );

src/pages/Campaign/widgets/UniqueBugs4UseCase/index.tsx

@@ -1,23 +1,36 @@
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
+import useWindowSize from 'src/hooks/useWindowSize';
 import FlipCard from '../widgetCards/FlipCard';
 import { ChartUniqueBugs4UseCase } from './Chart';
 import { ListUniqueBugs4UseCase } from './List';
 
 const UniqueBugs4UseCase = ({ height }: { height: string }) => {
   const { t } = useTranslation();
+  const { isMobile } = useWindowSize();
   const { campaignId } = useParams();
   if (!campaignId) {
     return null;
   }
+
   return (
     <FlipCard height={height}>
-      <FlipCard.Header>
+      <FlipCard.Header hasBack={!isMobile}>
         {t('__CAMPAIGN_PAGE_WIDGET_BUGS_BY_USECASE_CARD_TITLE')}
       </FlipCard.Header>
       <FlipCard.Body
-        front={<ChartUniqueBugs4UseCase campaignId={campaignId} />}
-        back={<ListUniqueBugs4UseCase campaignId={campaignId} />}
+        front={
+          isMobile ? (
+            <ListUniqueBugs4UseCase campaignId={campaignId} />
+          ) : (
+            <ChartUniqueBugs4UseCase campaignId={campaignId} />
+          )
+        }
+        back={
+          isMobile ? undefined : (
+            <ListUniqueBugs4UseCase campaignId={campaignId} />
+          )
+        }
       />
     </FlipCard>
   );