Create and edit responsive improvements (#2457)

* Merge className prop in href in Button component * Update action buttons on schedule form * Update action buttons on nexus forms * Update action buttons on start workflow form
temporalio · Dec 5, 2024 · 7447294 · 7447294
1 parent 7c14110
commit 7447294
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 30 deletions.
diff --git 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>

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

diff --git 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
@@ -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

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