[DT-156] Fix broken breakpoint UI on workflow detail page header (#960)

* Fix UI at different breakpoints

* Center checked icon in toggle switch

Author: laurakwhit

Diff for: src/lib/components/auto-refresh-workflow.svelte

@@ -9,7 +9,9 @@
   $: checked = $autoRefreshWorkflow === 'on';
 </script>
 
-<label for="autorefresh" class="font-secondary text-sm">Auto refresh</label>
-<Tooltip bottomLeft text="15 second page refresh">
-  <ToggleSwitch id="autorefresh" {checked} on:change={onChange} />
-</Tooltip>
+<label for="autorefresh" class="flex items-center gap-4 font-secondary text-sm"
+  >Auto refresh
+  <Tooltip bottomLeft text="15 second page refresh">
+    <ToggleSwitch id="autorefresh" {checked} on:change={onChange} />
+  </Tooltip>
+</label>

Diff for: src/lib/holocene/toggle-switch.svelte

@@ -24,7 +24,7 @@
   input:checked + .slider {
     @apply border-gray-900 bg-gray-900;
     &:before {
-      @apply translate-x-4 bg-blue-100 text-center;
+      @apply flex translate-x-4 items-center justify-center bg-blue-100;
       content: url('data:image/svg+xml, %3Csvg%20width=%2212%22%20height=%2210%22%20viewBox=%220%200%2012%2010%22%20fill=%22none%22%20xmlns=%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%3Cpath%20d=%22M4.36831%209.00391L0.572266%205.20786L1.52128%204.25885L4.36831%207.10588L10.4786%200.995582L11.4276%201.94459L4.36831%209.00391Z%22%20fill=%22%231D4ED8%22%2F%3E%0A%3C%2Fsvg%3E%0A');
     }
   }

Diff for: src/lib/layouts/workflow-header.svelte

@@ -100,17 +100,23 @@
       </a>
     </div>
     <div
-      class="mb-8 flex flex-col items-center justify-between gap-4 xl:flex-row xl:gap-0"
+      class="mb-8 flex w-full flex-col items-center justify-between gap-4 lg:flex-row"
     >
-      <h1
-        data-cy="workflow-id-heading"
-        class="relative flex items-center gap-4 text-2xl"
+      <div
+        class="flex w-full items-center justify-start gap-4 overflow-hidden whitespace-nowrap lg:w-auto"
       >
         <WorkflowStatus status={workflow?.status} />
-        <span class="select-all font-medium">{workflow.id}</span>
-      </h1>
+        <h1
+          data-cy="workflow-id-heading"
+          class="select-all overflow-hidden text-ellipsis text-2xl font-medium"
+        >
+          {workflow.id}
+        </h1>
+      </div>
       {#if isRunning}
-        <div class="flex items-center justify-start gap-4 xl:justify-end">
+        <div
+          class="flex flex-col items-center justify-center gap-4 whitespace-nowrap sm:flex-row lg:justify-end"
+        >
           <AutoRefreshWorkflow onChange={onRefreshChange} />
           <WorkflowActions {cancelInProgress} {workflow} {namespace} />
         </div>