Improve responsiveness of WorkflowHeader

temporalio · Dec 20, 2024 · 221d471 · 221d471
1 parent 46fd440
commit 221d471
Showing 1 changed file with 22 additions and 5 deletions.
diff --git a/src/lib/layouts/workflow-header.svelte b/src/lib/layouts/workflow-header.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>