From 6fbbeccbc14a8e600a2b5b72fac57dc5d8750474 Mon Sep 17 00:00:00 2001
From: Assem Hafez <137278762+Assem-Uber@users.noreply.github.com>
Date: Thu, 14 Nov 2024 12:45:37 +0100
Subject: [PATCH] Workflow and domain page responsiveness (#728)

* workflow and domain page responsiveness

* retain ellipses in wraped workflow label

* fix review comments

---------

Co-authored-by: Assem-Hafez <assem.a.hafez@gmail.com>
---
 .../domain-page-header-info.styles.ts         |  7 +++-
 .../workflow-history-timeline-group.styles.ts | 20 ++++++++---
 .../workflow-history-timeline-group.tsx       |  8 +++--
 .../workflow-history.styles.ts                | 35 +++++++++++++------
 .../workflow-page-header.styles.ts            |  1 +
 5 files changed, 52 insertions(+), 19 deletions(-)

diff --git a/src/views/domain-page/domain-page-header-info/domain-page-header-info.styles.ts b/src/views/domain-page/domain-page-header-info/domain-page-header-info.styles.ts
index 5ba0ee4d1..d6a766db4 100644
--- a/src/views/domain-page/domain-page-header-info/domain-page-header-info.styles.ts
+++ b/src/views/domain-page/domain-page-header-info/domain-page-header-info.styles.ts
@@ -3,7 +3,12 @@ import { styled as createStyled } from 'baseui';
 export const styled = {
   DomainDetailsContainer: createStyled('div', ({ $theme }) => ({
     display: 'flex',
-    flexDirection: 'row',
+    flexDirection: 'column',
+    flexWrap: 'wrap',
     columnGap: $theme.sizing.scale850,
+    rowGap: $theme.sizing.scale500,
+    [$theme.mediaQuery.medium]: {
+      flexDirection: 'row',
+    },
   })),
 };
diff --git a/src/views/workflow-history/workflow-history-timeline-group/workflow-history-timeline-group.styles.ts b/src/views/workflow-history/workflow-history-timeline-group/workflow-history-timeline-group.styles.ts
index 4c8a8e216..f125c4b0b 100644
--- a/src/views/workflow-history/workflow-history-timeline-group/workflow-history-timeline-group.styles.ts
+++ b/src/views/workflow-history/workflow-history-timeline-group/workflow-history-timeline-group.styles.ts
@@ -24,12 +24,24 @@ const cssStylesObj = {
     display: 'flex',
     flexDirection: 'column',
   },
-  timelineEventHeader: {
+  timelineEventHeader: (theme) => ({
     display: 'flex',
     alignItems: 'center',
-    gap: '16px',
-    padding: '12px 0',
-  },
+    gap: theme.sizing.scale600,
+    padding: `${theme.sizing.scale500} 0`,
+  }),
+  timelineEventLabelAndTime: (theme) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 0,
+    overflow: 'hidden',
+    [theme.mediaQuery.medium]: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: theme.sizing.scale200,
+    },
+  }),
   timelineEventsLabel: (theme) => ({
     ...theme.typography.LabelLarge,
     whiteSpace: 'nowrap',
diff --git a/src/views/workflow-history/workflow-history-timeline-group/workflow-history-timeline-group.tsx b/src/views/workflow-history/workflow-history-timeline-group/workflow-history-timeline-group.tsx
index 00eeb9ceb..09b308263 100644
--- a/src/views/workflow-history/workflow-history-timeline-group/workflow-history-timeline-group.tsx
+++ b/src/views/workflow-history/workflow-history-timeline-group/workflow-history-timeline-group.tsx
@@ -27,9 +27,11 @@ export default function WorkflowHistoryTimelineGroup({
     <div className={cls.groupContainer}>
       <div className={cls.timelineEventHeader}>
         <WorkflowHistoryEventStatusBadge status={status} size="medium" />
-        <div className={cls.timelineEventsLabel}>{label}</div>
-        <div suppressHydrationWarning className={cls.timelineEventsTime}>
-          {timeLabel}
+        <div className={cls.timelineEventLabelAndTime}>
+          <div className={cls.timelineEventsLabel}>{label}</div>
+          <div suppressHydrationWarning className={cls.timelineEventsTime}>
+            {timeLabel}
+          </div>
         </div>
       </div>
       <div className={cls.timelineEventCardContainer}>
diff --git a/src/views/workflow-history/workflow-history.styles.ts b/src/views/workflow-history/workflow-history.styles.ts
index 911790b89..53d29165a 100644
--- a/src/views/workflow-history/workflow-history.styles.ts
+++ b/src/views/workflow-history/workflow-history.styles.ts
@@ -9,15 +9,25 @@ const cssStylesObj = {
     flexDirection: 'column',
     flex: 1,
   },
-  pageHeader: {
+  pageHeader: (theme) => ({
     display: 'flex',
-    alignItems: 'center',
+    flexDirection: 'column',
     justifyContent: 'space-between',
     flexWrap: 'wrap',
-  },
+    gap: theme.sizing.scale500,
+    [theme.mediaQuery.medium]: {
+      alignItems: 'center',
+      flexDirection: 'row',
+    },
+  }),
   headerActions: (theme) => ({
     display: 'flex',
+    flexDirection: 'column',
+    flexWrap: 'wrap',
     gap: theme.sizing.scale500,
+    [theme.mediaQuery.medium]: {
+      flexDirection: 'row',
+    },
   }),
   eventsContainer: (theme) => ({
     display: 'flex',
@@ -25,14 +35,17 @@ const cssStylesObj = {
     // gap: theme.sizing.scale400,
   }),
   compactSection: (theme) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    width: '362px',
-    maxHeight: `calc(100vh - ${theme.sizing.scale900})`, // fill page height excluding page bottom margin
-    overflow: 'auto',
-    position: 'sticky',
-    top: 0,
-    paddingRight: theme.sizing.scale800,
+    display: 'none',
+    [theme.mediaQuery.large]: {
+      display: 'flex',
+      flexDirection: 'column',
+      width: '362px',
+      maxHeight: `calc(100vh - ${theme.sizing.scale900})`, // fill page height excluding page bottom margin
+      overflow: 'auto',
+      position: 'sticky',
+      top: 0,
+      paddingRight: theme.sizing.scale800,
+    },
   }),
   compactCardContainer: (theme) => ({
     display: 'flex',
diff --git a/src/views/workflow-page/workflow-page-header/workflow-page-header.styles.ts b/src/views/workflow-page/workflow-page-header/workflow-page-header.styles.ts
index 9888ce3f1..cd4e2507c 100644
--- a/src/views/workflow-page/workflow-page-header/workflow-page-header.styles.ts
+++ b/src/views/workflow-page/workflow-page-header/workflow-page-header.styles.ts
@@ -28,6 +28,7 @@ export const overrides = {
         alignItems: 'center',
         marginBottom: $theme.sizing.scale200,
         ...$theme.typography.LabelSmall,
+        lineHeight: $theme.typography.LabelMedium.lineHeight,
       }),
     },
   } satisfies BreadcrumbsOverrides,