Merge pull request #343 from AppQuality/campaign-dash-mobile-fixes

Campaign-dash-mobile-fixes

Author: cannarocks

src/pages/Campaign/index.tsx

@@ -81,7 +81,7 @@ const Campaign = () => {
             <EmptyState />
           ) : (
             <>
-              <Col xs={12} md={3}>
+              <Col xs={12} xl={3}>
                 {isLoadingCampaign ||
                 isFetchingCampaign ||
                 isLoadingReports ||
@@ -96,7 +96,7 @@ const Campaign = () => {
                   />
                 )}
               </Col>
-              <Col xs={12} md={9}>
+              <Col xs={12} xl={9}>
                 {campaign?.outputs?.includes('bugs') && (
                   <>
                     <WidgetSection id="campaign-overview">
@@ -107,13 +107,13 @@ const Campaign = () => {
                           )}
                         />
                       </Col>
-                      <Col xs={12} md={4}>
+                      <Col xs={12} sm={6} xl={4}>
                         <Progress campaign={campaign} />
                       </Col>
-                      <Col xs={12} md={4}>
+                      <Col xs={12} sm={6} xl={4}>
                         <UniqueBugs campaignId={campaign ? campaign.id : 0} />
                       </Col>
-                      <Col xs={12} md={4} lg={4}>
+                      <Col xs={12} sm={6} xl={4}>
                         {isFetchingCampaign ? undefined : (
                           <BugDistributionCard
                             campaignId={campaign ? campaign.id : 0}
@@ -130,10 +130,10 @@ const Campaign = () => {
                           )}
                         />
                       </Col>
-                      <Col xs={12} md={6}>
+                      <Col xs={12} xl={6}>
                         <UniqueBugs4UseCase height={firstRowHeight} />
                       </Col>
-                      <Col xs={12} md={6}>
+                      <Col xs={12} xl={6}>
                         <IncomingBugs
                           height={firstRowHeight}
                           campaignId={campaign.id ?? 0}
@@ -151,13 +151,13 @@ const Campaign = () => {
                           )}
                         />
                       </Col>
-                      <Col xs={12} md={6}>
+                      <Col xs={12} xl={6}>
                         <TotalBugsByOsAndDevices
                           height={secondRowHeight}
                           campaignId={campaign.id ?? 0}
                         />
                       </Col>
-                      <Col xs={12} md={6}>
+                      <Col xs={12} xl={6}>
                         <BugsByType
                           height={secondRowHeight}
                           campaignId={campaign.id ?? 0}

src/pages/Campaign/widgets/List/ListItem.tsx

@@ -1,18 +1,24 @@
-import { SM, Progress, MD, Span } from '@appquality/unguess-design-system';
+import {
+  SM,
+  Progress,
+  MD,
+  Span,
+  Ellipsis,
+} from '@appquality/unguess-design-system';
 import { theme as globalTheme } from 'src/app/theme';
 import styled from 'styled-components';
 import { ListItemProps } from './type';
 
 const ListItemTitle = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+  display: grid;
+  grid-template-columns: 9fr 1fr;
   padding-top: ${({ theme }) => theme.space.xs};
   padding-bottom: ${({ theme }) => theme.space.xxs};
 `;
 
 const ListItemWrapper = styled.div`
   margin-top: ${(p) => p.theme.space.xxs};
+  display: block;
 `;
 
 export const ListItem = ({
@@ -22,10 +28,14 @@ export const ListItem = ({
 }: ListItemProps) => (
   <ListItemWrapper>
     <ListItemTitle>
-      <MD isBold style={{ color: globalTheme.palette.blue[600] }}>
-        {children}
+      <MD
+        isBold
+        style={{ color: globalTheme.palette.blue[600], display: 'contents' }}
+      >
+        <Ellipsis style={{ width: '97%' }}>{children}</Ellipsis>
       </MD>
-      <SM style={{ color: globalTheme.palette.grey[600] }}>
+
+      <SM style={{ color: globalTheme.palette.grey[600], justifySelf: 'end' }}>
         <Span isBold style={{ color: globalTheme.palette.grey[700] }}>
           {numerator}
         </Span>