Reduce column widths

src/components/LogList/__tests__/LogList.test.cypress.tsx

@@ -32,8 +32,6 @@ function generateLines(amount: number) {
 const LIST_CONTAINER_CLASS = 'ReactVirtualized__List';
 
 describe('LogActionBar', () => {
-
-
   it('Should render message about empty preload when preload was empty or error and final fetch is not started', () => {
     mount(
       <TestWrapper>

src/components/StatusIndicator/index.tsx

@@ -16,6 +16,7 @@ const StatusIndicator: React.FC<{ status: keyof RunStatus | TaskStatus }> = ({ s
 const StatusColorIndicator = styled.div<{ status: string }>`
   display: flex;
   color: ${(p) => (p.status === 'failed' ? 'white' : colorByStatus(p.theme, p.status))};
+  justify-content: center;
 `;
 
 export default StatusIndicator;

src/components/Structure/index.tsx

@@ -7,7 +7,7 @@ import styled, { css } from 'styled-components';
 export const Page = styled.div`
   max-width: ${(p) => p.theme.layout.maxWidth}px;
   margin: 0 auto 0 auto;
-  padding: 0 ${(p) => p.theme.layout.pagePaddingX}rem ${(p) => p.theme.layout.pagePaddingY}rem;
+  padding: 0 0 ${(p) => p.theme.layout.pagePaddingY}rem ${(p) => p.theme.layout.pagePaddingX}rem;
   min-height: 100vh;
   display: flex;
   flex-direction: column;

src/components/Trigger/index.tsx

@@ -48,7 +48,7 @@ const Trigger: React.FC<Props> = ({ triggerEventsValue, className, showToolTip =
       {link ? (
         <TriggerLink to={link}>
           <StyledIcon name="arrow" linkToRun={linkToRun} />
-          {showToolTip ? displayLabel : id}
+          <LabelWrapper>{showToolTip ? displayLabel : id}</LabelWrapper>
         </TriggerLink>
       ) : (
         <>
@@ -86,4 +86,17 @@ const StyledIcon = styled(Icon)<ArrowIconProps>`
   }
 `;
 
+const LabelWrapper = styled.div`
+  vertical-align: middle;
+  display: inline-block;
+  white-space: nowrap;
+
+  @media (max-width: ${(p) => p.theme.breakpoint.sm}) {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 0;
+    min-width: 100%;
+  }
+`;
+
 export default Trigger;

src/pages/Home/Content/index.tsx

@@ -91,7 +91,10 @@ export default HomeContentArea;
 
 const Content = styled.div`
   position: relative;
-  margin-left: ${(p) => p.theme.layout.sidebarWidth + 1}rem;
+  margin-left: ${(p) => p.theme.layout.sidebarWidth.md + 1}rem;
+  @media (max-width: ${(p) => p.theme.breakpoint.sm}) {
+    margin-left: ${(p) => p.theme.layout.sidebarWidth.sm + 1}rem;
+  }
   max-width: 100%;
   display: flex;
   flex-direction: column;

src/pages/Home/ResultGroup/StartedAtCell.tsx

@@ -41,17 +41,18 @@ const StartedAtCell: React.FC<Props> = ({ run, link, timezone }) => {
     fetchAllData: true,
   });
 
-  const hasTrigger = Boolean(metadataRecord?.['execution-triggers']);
+  const triggerEventsValue = JSON.parse(metadataRecord?.['execution-triggers'] ?? '[]');
+  const hasTrigger = Boolean(triggerEventsValue);
   const displayTime = getRunStartTime(run, timezone);
   const [date, time] = displayTime ? displayTime.split(' ') : [null, null];
 
   return (
     <TDWithLink link={hasTrigger ? undefined : link}>
-      <DisplayDate>{date}</DisplayDate>
-      <DisplayTime>{time}</DisplayTime>
-      {hasTrigger ? (
-        <Triggers showMultiple triggerEventsValue={JSON.parse(metadataRecord?.['execution-triggers'] ?? '')} />
-      ) : null}
+      <StartedAtWrapper>
+        <DisplayDate>{date}</DisplayDate>
+        <DisplayTime>{time}</DisplayTime>
+        {hasTrigger ? <Triggers showMultiple triggerEventsValue={triggerEventsValue} /> : null}
+      </StartedAtWrapper>
     </TDWithLink>
   );
 };
@@ -65,4 +66,8 @@ const DisplayTime = styled.div`
   word-break: break-word;
 `;
 
+const StartedAtWrapper = styled.div`
+  display: inline-block;
+`;
+
 export default StartedAtCell;

src/pages/Home/ResultGroup/index.tsx

@@ -86,9 +86,9 @@ const ResultGroup: React.FC<Props> = React.memo(
         hidden: queryParams._group === 'user',
         maxWidth: '12.5%',
       },
-      { label: t('fields.started-at'), sortable: true, key: 'ts_epoch', maxWidth: '170' },
-      { label: t('fields.finished-at'), sortable: true, key: 'finished_at', maxWidth: '170' },
-      { label: t('fields.duration'), sortable: true, key: 'duration', maxWidth: '130' },
+      { label: t('fields.started-at'), sortable: true, key: 'ts_epoch' },
+      { label: t('fields.finished-at'), sortable: true, key: 'finished_at' },
+      { label: t('fields.duration'), sortable: true, key: 'duration' },
       { label: t('fields.user-tags'), key: 'tags' },
     ].filter((item) => !item.hidden);
 

src/pages/Home/Sidebar/index.tsx

@@ -42,10 +42,7 @@ const HomeSidebar: React.FC<Props> = ({ handleParamChange, updateListValue, para
   return (
     <Sidebar className="sidebar">
       {/* Add sidebar size to be 100% viewheight - (header size + 1 rem for padding) */}
-      <Scrollbars
-        style={{ height: `calc(100vh - ${HEADER_SIZE_REM + 1}rem)`, width: '15rem', paddingTop: '0.25rem' }}
-        autoHide
-      >
+      <StyledScrollbars autoHide>
         <SidebarContent>
           {FEATURE_FLAGS.RUN_GROUPS && (
             <SidebarSectionWrapper>
@@ -161,7 +158,7 @@ const HomeSidebar: React.FC<Props> = ({ handleParamChange, updateListValue, para
             </div>
           )}
         </SidebarContent>
-      </Scrollbars>
+      </StyledScrollbars>
     </Sidebar>
   );
 };
@@ -191,18 +188,33 @@ const ButtonResetAll = styled(Button)`
 
 const Sidebar = styled.div`
   position: fixed;
-  width: ${(p) => p.theme.layout.sidebarWidth}rem;
+  width: ${(p) => p.theme.layout.sidebarWidth.md}rem;
+  @media (max-width: ${(p) => p.theme.breakpoint.sm}) {
+    width: ${(p) => p.theme.layout.sidebarWidth.sm}rem;
+  }
   top: ${(p) => p.theme.layout.appbarHeight}rem;
   font-size: 0.875rem;
   padding-top: 6px;
 `;
 
 const SidebarContent = styled.div`
-  width: 14rem;
+  width: ${(p) => p.theme.layout.sidebarWidth.md}rem;
+  @media (max-width: ${(p) => p.theme.breakpoint.sm}) {
+    width: ${(p) => p.theme.layout.sidebarWidth.sm}rem;
+  }
   padding-top: 0.5rem;
   padding-left: 0.25rem;
 `;
 
+const StyledScrollbars = styled(Scrollbars)`
+  height: calc(100vh - ${HEADER_SIZE_REM + 1}rem) !important;
+  width: ${(p) => p.theme.layout.sidebarWidth.md + 1}rem !important;
+  @media (max-width: ${(p) => p.theme.breakpoint.sm}) {
+    width: ${(p) => p.theme.layout.sidebarWidth.sm + 1}rem !important;
+  }
+  padding-top: 0.25rem;
+`;
+
 export const SidebarSectionWrapper = styled.div`
   margin: 0 0 1rem;
 `;

src/styled.d.ts

@@ -22,7 +22,14 @@ declare module 'styled-components' {
       /** This value is used for horizontal padding in pages and pagewide floating elements (rem) */
       pagePaddingX: number;
       pagePaddingY: number;
-      sidebarWidth: number;
+      sidebarWidth: {
+        sm: number;
+        md: number;
+      };
+    };
+
+    breakpoint: {
+      sm: string;
     };
 
     spacer: {

src/theme/index.tsx

@@ -104,11 +104,18 @@ const defaultTheme: DefaultTheme = {
     appbarLogoHeight: 1.5,
     pagePaddingX: spacer.ml,
     pagePaddingY: spacer.lg,
-    sidebarWidth: 14,
+    sidebarWidth: {
+      md: 14,
+      sm: 12,
+    },
   },
 
   spacer,
 
+  breakpoint: {
+    sm: '1280px',
+  },
+
   color: {
     text: textColor,
     bg: bgColor,

src/translations/en.ts

@@ -46,13 +46,13 @@ const en = {
       tag: 'Tag',
       project: 'Project',
       branch: 'Branch',
-      'user-tags': 'User tags',
+      'user-tags': 'Tags',
       tasks: 'Tasks',
       'filter-by': 'Filter by',
       flow_id: 'Flow',
 
       id: 'ID',
-      status: 'Status',
+      status: '',
       'triggered-by': 'Triggered by',
       'started-at': 'Started at',
       'finished-at': 'Finished at',