workflow and domain page responsiveness

Author: Assem-Hafez

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',
+    },
   })),
 };

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',

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}>

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',
+    display: 'none',
     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,
+    [theme.mediaQuery.large]: {
+      display: 'flex',
+    },
   }),
   compactCardContainer: (theme) => ({
     display: 'flex',

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,