Detail view responsive improvements (#2483)

* Remove unnecessary WorkflowCountStatus component

* Improve responsiveness of WorkflowHeader

* Improve responsiveness of Schedule details header

* Update tests

Author: laurakwhit

src/lib/components/workflow/workflow-count-status.svelte

@@ -24,7 +24,7 @@
   import { getExponentialBackoffSeconds } from '$lib/utilities/refresh-rate';
   import { updateQueryParameters } from '$lib/utilities/update-query-parameters';
 
-  import WorkflowCountStatus from './workflow-count-status.svelte';
+  import WorkflowCountStatus from '../workflow-status.svelte';
 
   export let staticQuery = '';
   $: namespace = $page.params.namespace;
@@ -167,6 +167,7 @@
           newCount={newStatusGroups.find((g) => g.status === status)
             ? newStatusGroups.find((g) => g.status === status).count - count
             : 0}
+          test-id="workflow-status-{status}"
         />
       </button>
     {:else}

src/lib/components/workflow/workflow-counts.svelte

@@ -99,25 +99,42 @@
 </div>
 <header class="flex flex-col gap-2">
   <div class="flex flex-col items-center justify-between gap-4 lg:flex-row">
-    <div class="flex flex-col items-center gap-4 lg:flex-row">
-      <WorkflowStatus status={workflow?.status} big />
+    <div
+      class="flex w-full flex-col items-start gap-4 lg:flex-row lg:items-center"
+    >
+      <div
+        class="flex flex-wrap items-center justify-between gap-4 max-lg:w-full"
+      >
+        <WorkflowStatus status={workflow?.status} big />
+        <div class="lg:hidden">
+          <WorkflowActions
+            {isRunning}
+            {cancelInProgress}
+            {workflow}
+            {namespace}
+          />
+        </div>
+      </div>
       <div class="flex flex-col flex-wrap gap-0">
-        <h1 data-testid="workflow-id-heading" class="gap-0 overflow-hidden">
+        <h1
+          data-testid="workflow-id-heading"
+          class="gap-0 overflow-hidden max-sm:text-xl sm:max-md:text-2xl"
+        >
           <Copyable
             copyIconTitle={translate('common.copy-icon-title')}
             copySuccessIconTitle={translate('common.copy-success-icon-title')}
             content={workflow?.id}
             clickAllToCopy
             container-class="w-full"
-            class="overflow-hidden text-ellipsis"
+            class="overflow-hidden text-ellipsis text-left"
           />
         </h1>
         {#if workflowUsesVersioning}
           <WorkflowVersioningHeader {workflow} />
         {/if}
       </div>
     </div>
-    <div class="px-2">
+    <div class="max-lg:hidden">
       <WorkflowActions {isRunning} {cancelInProgress} {workflow} {namespace} />
     </div>
   </div>

src/lib/layouts/workflow-header.svelte

@@ -266,7 +266,7 @@
   {#if $loading}
     <Loading title={translate('schedules.deleting')} class="my-2" />
   {:else}
-    <header class="mb-8 flex flex-row justify-between gap-4">
+    <header class="mb-8 flex flex-row flex-wrap justify-between gap-4">
       <div class="relative flex flex-col gap-4">
         <Link href={routeForSchedules({ namespace })} icon="chevron-left">
           {translate('schedules.back-to-schedules')}
@@ -276,23 +276,21 @@
             {scheduleId}
           </span>
         </h1>
-        <div class="flex items-center gap-2 text-lg">
+        <div class="flex flex-wrap items-center gap-2 text-lg">
           <WorkflowStatus
             status={schedule?.schedule.state.paused ? 'Paused' : 'Running'}
           />
           <p>
             {schedule?.schedule?.action?.startWorkflow?.workflowType?.name}
           </p>
         </div>
-        <div class="flex items-center gap-2 text-sm">
-          <p>
-            {translate('common.created', {
-              created: formatDate(schedule?.info?.createTime, $timeFormat, {
-                relative: $relativeTime,
-              }),
-            })}
-          </p>
-        </div>
+        <p class="flex items-center gap-2 text-sm">
+          {translate('common.created', {
+            created: formatDate(schedule?.info?.createTime, $timeFormat, {
+              relative: $relativeTime,
+            }),
+          })}
+        </p>
         {#if schedule?.info?.updateTime}
           <div class="flex items-center gap-2 text-sm">
             <p>

src/lib/pages/schedule-view.svelte

@@ -14,9 +14,9 @@ test.describe('Enable write actions by default', () => {
   });
 
   test('Cancel workflow button enabled', async ({ page }) => {
-    const workflowActionButton = page.locator(
-      '#workflow-actions-primary-button',
-    );
+    const workflowActionButton = page
+      .locator('#workflow-actions-primary-button')
+      .locator('visible=true');
     await expect(workflowActionButton).toBeEnabled();
   });
 });
@@ -29,9 +29,9 @@ test.describe('Disable write actions on workflow actions', () => {
   });
 
   test('Cancel workflow button disabled', async ({ page }) => {
-    const workflowActionButton = page.locator(
-      '#workflow-actions-primary-button',
-    );
+    const workflowActionButton = page
+      .locator('#workflow-actions-primary-button')
+      .locator('visible=true');
     await expect(workflowActionButton).toBeDisabled();
   });
 });