From 810fb5e891f2f89e65dfba3ef20dd9cfbb8f7c45 Mon Sep 17 00:00:00 2001
From: Assem-Hafez <assem.a.hafez@gmail.com>
Date: Wed, 13 Nov 2024 17:42:56 +0000
Subject: [PATCH] workflow and domain page responsiveness

---
 .../domain-page-header-info.styles.ts         |  7 ++++++-
 .../workflow-history-timeline-group.styles.ts | 19 +++++++++++++----
 .../workflow-history-timeline-group.tsx       |  8 ++++---
 .../workflow-history.styles.ts                | 21 +++++++++++++++----
 .../workflow-page-header.styles.ts            |  1 +
 5 files changed, 44 insertions(+), 12 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..519ffc55e 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,23 @@ 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`,
+  }),
+  timelineEventLableAndTime: (theme) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 0,
+    [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..2739d4d91 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.timelineEventLableAndTime}>
+          <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..b08ff3912 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,7 +35,7 @@ const cssStylesObj = {
     // gap: theme.sizing.scale400,
   }),
   compactSection: (theme) => ({
-    display: 'flex',
+    display: 'none',
     flexDirection: 'column',
     width: '362px',
     maxHeight: `calc(100vh - ${theme.sizing.scale900})`, // fill page height excluding page bottom margin
@@ -33,6 +43,9 @@ const cssStylesObj = {
     position: 'sticky',
     top: 0,
     paddingRight: theme.sizing.scale800,
+    [theme.mediaQuery.large]: {
+      display: 'flex',
+    },
   }),
   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,