From c32b94c709e4635d2b4af09c2fc463372141eb04 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Wed, 4 Dec 2024 14:25:31 -0700
Subject: [PATCH 1/4] Merge className prop in href in Button component

---
 src/lib/holocene/button.svelte | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/lib/holocene/button.svelte b/src/lib/holocene/button.svelte
index ced4059a1..e3da3c633 100644
--- a/src/lib/holocene/button.svelte
+++ b/src/lib/holocene/button.svelte
@@ -126,11 +126,14 @@
     type="button"
     target={target ? '_blank' : null}
     rel={target ? 'noreferrer' : null}
-    class={buttonStyles({
-      variant,
-      size,
-      borderRadiusModifier,
-    })}
+    class={merge(
+      buttonStyles({
+        variant,
+        size,
+        borderRadiusModifier,
+      }),
+      className,
+    )}
     on:click|stopPropagation={onLinkClick}
     tabindex={href ? null : 0}
     {...$$restProps}

From b5347462d3ebd96a6f25572aeb0163f03f839507 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Wed, 4 Dec 2024 14:27:12 -0700
Subject: [PATCH 2/4] Update action buttons on schedule form

---
 src/lib/components/schedule/schedule-form-view.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/schedule/schedule-form-view.svelte b/src/lib/components/schedule/schedule-form-view.svelte
index baf3dbda5..1e3045e8f 100644
--- a/src/lib/components/schedule/schedule-form-view.svelte
+++ b/src/lib/components/schedule/schedule-form-view.svelte
@@ -165,7 +165,7 @@
   onDestroy(() => ($error = ''));
 </script>
 
-<div class="pb-20">
+<div class="pb-10">
   {#if $loading}
     <Loading title={loadingText} />
   {:else}
@@ -246,13 +246,13 @@
         bind:phase
         bind:cronString
       >
-        <div class="mt-8 flex items-center gap-2">
+        <div class="mt-4 flex flex-row items-center gap-4 max-sm:flex-col">
           <Button
             disabled={isDisabled(preset) || !writeActionsAreAllowed()}
             on:click={() => handleConfirm(preset, schedule)}
-            >{confirmText}</Button
+            class="max-sm:w-full">{confirmText}</Button
           >
-          <Button variant="ghost" href={backHref}
+          <Button variant="ghost" href={backHref} class="max-sm:w-full"
             >{translate('common.cancel')}</Button
           >
         </div>

From b1cb8f3f23fa4a3c0aecc655bc218a1a858089d4 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Wed, 4 Dec 2024 14:27:43 -0700
Subject: [PATCH 3/4] Update action buttons on nexus forms

---
 src/lib/pages/nexus-create-endpoint.svelte |  8 +++--
 src/lib/pages/nexus-edit-endpoint.svelte   | 42 +++++++++++++---------
 2 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/src/lib/pages/nexus-create-endpoint.svelte b/src/lib/pages/nexus-create-endpoint.svelte
index c75a37eca..2dd904dfb 100644
--- a/src/lib/pages/nexus-create-endpoint.svelte
+++ b/src/lib/pages/nexus-create-endpoint.svelte
@@ -40,14 +40,18 @@
     {callerNamespaceList}
     {isCloud}
   />
-  <div class="flex items-center gap-4">
+  <div class="flex flex-row items-center gap-4 max-sm:flex-col">
     <Button
       variant="primary"
       on:click={onCreate}
       disabled={createDisabled}
+      class="max-sm:w-full"
       {loading}>{translate('nexus.create-endpoint')}</Button
     >
-    <Button variant="ghost" on:click={() => goto(routeForNexus())}
+    <Button
+      variant="ghost"
+      class="max-sm:w-full"
+      on:click={() => goto(routeForNexus())}
       >{translate('common.cancel')}</Button
     >
   </div>
diff --git a/src/lib/pages/nexus-edit-endpoint.svelte b/src/lib/pages/nexus-edit-endpoint.svelte
index fd4a20c53..5ae498ce1 100644
--- a/src/lib/pages/nexus-edit-endpoint.svelte
+++ b/src/lib/pages/nexus-edit-endpoint.svelte
@@ -34,20 +34,9 @@
     </Link>
   </div>
   <div class="flex flex-col gap-1">
-    <div class="flex items-center justify-between">
-      <h1 data-testid="namespace-selector-title">
-        {endpoint.spec.name}
-      </h1>
-      <div class="flex items-center gap-2">
-        <Button
-          variant="destructive"
-          on:click={() => (deleteConfirmationModalOpen = true)}
-          >{translate('nexus.delete-endpoint')}</Button
-        >
-        <Button on:click={onUpdate} {loading}>{translate('common.save')}</Button
-        >
-      </div>
-    </div>
+    <h1 data-testid="namespace-selector-title">
+      {endpoint.spec.name}
+    </h1>
   </div>
   <NexusForm
     {endpoint}
@@ -59,9 +48,30 @@
     {isCloud}
     nameDisabled
   />
-  <div class="flex items-center gap-4">
-    <Button on:click={onUpdate} {loading}>{translate('common.save')}</Button>
+  <div
+    class="flex w-full flex-row items-center justify-between gap-4 max-sm:flex-col xl:w-1/2"
+  >
+    <div
+      class="items-centeritems-center flex w-full flex-row gap-4 max-sm:flex-col"
+    >
+      <Button class="max-sm:w-full" on:click={onUpdate} {loading}
+        >{translate('common.save')}</Button
+      >
+      <Button
+        class="max-sm:hidden"
+        variant="ghost"
+        on:click={() => goto(routeForNexusEndpoint($page.params.id))}
+        >{translate('common.cancel')}</Button
+      >
+    </div>
+    <Button
+      class="max-sm:w-full"
+      variant="destructive"
+      on:click={() => (deleteConfirmationModalOpen = true)}
+      >{translate('common.delete')}</Button
+    >
     <Button
+      class="w-full sm:hidden"
       variant="ghost"
       on:click={() => goto(routeForNexusEndpoint($page.params.id))}
       >{translate('common.cancel')}</Button

From 20f858c01ce9ba69e04ff0bce53b4d8b77bb42b8 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Wed, 4 Dec 2024 14:30:39 -0700
Subject: [PATCH 4/4] Update action buttons on start workflow form

---
 src/lib/pages/start-workflow.svelte | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/lib/pages/start-workflow.svelte b/src/lib/pages/start-workflow.svelte
index 10b20c5f8..8d141ce8c 100644
--- a/src/lib/pages/start-workflow.svelte
+++ b/src/lib/pages/start-workflow.svelte
@@ -193,7 +193,7 @@
   $: checkTaskQueue(taskQueueParam);
 </script>
 
-<div class="flex w-full flex-col items-center pb-24">
+<div class="flex w-full flex-col items-center pb-10">
   <div class="mb-6 flex w-full items-start">
     <Link
       href={`${routeForWorkflows({
@@ -295,9 +295,12 @@
       </Card>
       <AddSearchAttributes bind:attributesToAdd={searchAttributes} />
     {/if}
-    <div class="mt-4 flex w-full justify-between">
+    <div
+      class="mt-4 flex w-full flex-row justify-between gap-4 max-sm:flex-col"
+    >
       <Button
         variant="ghost"
+        class="max-sm:w-full"
         trailingIcon={viewAdvancedOptions ? 'chevron-up' : 'chevron-down'}
         on:click={() => (viewAdvancedOptions = !viewAdvancedOptions)}
         >{translate('common.more-options')}</Button
@@ -306,7 +309,7 @@
         disabled={!enableStart}
         on:click={onWorkflowStart}
         data-testid="start-workflow-button"
-        >{translate('workflows.start-workflow')}</Button
+        class="max-sm:w-full">{translate('workflows.start-workflow')}</Button
       >
     </div>
     {#if error}