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 <[email protected]>
cadence-workflow · Nov 14, 2024 · 6fbbecc · 6fbbecc
1 parent 42d7886
commit 6fbbecc
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 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
@@ -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/...orkflow-history/workflow-history-timeline-group/workflow-history-timeline-group.styles.ts b/...orkflow-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/...iews/workflow-history/workflow-history-timeline-group/workflow-history-timeline-group.tsx b/...iews/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
@@ -9,30 +9,43 @@ 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',
     marginTop: theme.sizing.scale500,
     // 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
@@ -28,6 +28,7 @@ export const overrides = {
         alignItems: 'center',
         marginBottom: $theme.sizing.scale200,
         ...$theme.typography.LabelSmall,
+        lineHeight: $theme.typography.LabelMedium.lineHeight,
       }),
     },
   } satisfies BreadcrumbsOverrides,