From 87f43e931b48ac515ba2b797ce3348af1c643bfe Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Thu, 5 Dec 2024 14:10:25 -0700
Subject: [PATCH 1/6] Move Start a Workflow form to Card

---
 src/lib/pages/start-workflow.svelte | 34 +++++++++++++----------------
 1 file changed, 15 insertions(+), 19 deletions(-)

diff --git a/src/lib/pages/start-workflow.svelte b/src/lib/pages/start-workflow.svelte
index 10b20c5f8..c527a83b4 100644
--- a/src/lib/pages/start-workflow.svelte
+++ b/src/lib/pages/start-workflow.svelte
@@ -193,24 +193,20 @@
   $: checkTaskQueue(taskQueueParam);
 </script>
 
-<div class="flex w-full flex-col items-center pb-24">
-  <div class="mb-6 flex w-full items-start">
-    <Link
-      href={`${routeForWorkflows({
-        namespace,
-      })}?${$workflowsSearchParams}`}
-      data-testid="back-to-workflows"
-      icon="chevron-left"
-    >
-      {translate('workflows.back-to-workflows')}
-    </Link>
-  </div>
-  <div class="flex w-full flex-col gap-4 lg:w-2/3 2xl:w-1/2">
-    <h1 class="mb-4 overflow-hidden" data-testid="start-workflow">
-      Start a Workflow
-    </h1>
+<div class="flex w-full flex-col gap-4 pb-20">
+  <Link
+    href={`${routeForWorkflows({
+      namespace,
+    })}?${$workflowsSearchParams}`}
+    data-testid="back-to-workflows"
+    icon="chevron-left"
+  >
+    {translate('workflows.back-to-workflows')}
+  </Link>
+  <h1 data-testid="start-workflow">Start a Workflow</h1>
+  <Card class="flex w-full flex-col gap-4 xl:w-3/4 2xl:w-1/2">
     <div
-      class="flex w-full flex-col items-center justify-between gap-2 md:flex-row md:gap-4"
+      class="flex w-full flex-col justify-between gap-2 sm:items-center md:flex-row md:gap-4"
     >
       <Input
         id="workflowId"
@@ -268,7 +264,7 @@
     {/key}
     {#if viewAdvancedOptions}
       <Card class="flex flex-col gap-2">
-        <div class="flex justify-between">
+        <div class="flex flex-wrap justify-between">
           <h3>{translate('workflows.user-metadata')}</h3>
           <p class="flex items-center gap-1 text-sm text-subtle">
             {translate('workflows.markdown-supported')}
@@ -312,5 +308,5 @@
     {#if error}
       <Alert intent="error" title={error} />
     {/if}
-  </div>
+  </Card>
 </div>

From 3277593f96e1b29e406e5d76b38c2b1ab61c86f1 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Thu, 5 Dec 2024 14:21:26 -0700
Subject: [PATCH 2/6] Move schedule form to Card

---
 .../schedule/schedule-form-view.svelte        | 179 +++++++++---------
 1 file changed, 90 insertions(+), 89 deletions(-)

diff --git a/src/lib/components/schedule/schedule-form-view.svelte b/src/lib/components/schedule/schedule-form-view.svelte
index baf3dbda5..c7ac1d2fa 100644
--- a/src/lib/components/schedule/schedule-form-view.svelte
+++ b/src/lib/components/schedule/schedule-form-view.svelte
@@ -8,6 +8,7 @@
   import SchedulesCalendarView from '$lib/components/schedule/schedules-calendar-view.svelte';
   import Alert from '$lib/holocene/alert.svelte';
   import Button from '$lib/holocene/button.svelte';
+  import Card from '$lib/holocene/card.svelte';
   import Input from '$lib/holocene/input/input.svelte';
   import Link from '$lib/holocene/link.svelte';
   import Loading from '$lib/holocene/loading.svelte';
@@ -165,99 +166,99 @@
   onDestroy(() => ($error = ''));
 </script>
 
-<div class="pb-20">
+<div class="flex flex-col gap-4 pb-20">
   {#if $loading}
     <Loading title={loadingText} />
   {:else}
-    <header class="mb-12 flex flex-col gap-4">
-      <Link href={backHref} icon="chevron-left">
-        {backTitle}
-      </Link>
-      <h1>{title}</h1>
-    </header>
-    <form class="mb-4 flex w-full flex-col gap-4 md:w-2/3 xl:w-1/2">
-      <div class="w-full">
-        <Input
-          id="name"
-          bind:value={name}
-          label={translate('schedules.name-label')}
-          error={errors['name']}
-          maxLength={232}
-          disabled={Boolean(scheduleId)}
-          on:input={onInput}
-          on:blur={onBlur}
-          required
-        />
-      </div>
-      <div class="w-full">
-        <Input
-          id="workflowType"
-          bind:value={workflowType}
-          label={translate('schedules.workflow-type-label')}
-          error={errors['workflowType']}
-          on:input={onInput}
-          on:blur={onBlur}
-          required
-        />
-      </div>
-      <div class="w-full">
-        <Input
-          id="workflowId"
-          bind:value={workflowId}
-          label={translate('schedules.workflow-id-label')}
-          error={errors['workflowId']}
-          on:input={onInput}
-          on:blur={onBlur}
-          required
+    <Link href={backHref} icon="chevron-left">
+      {backTitle}
+    </Link>
+    <h1>{title}</h1>
+    <Card class="w-full xl:w-3/4 2xl:w-1/2">
+      <form class="flex w-full flex-col gap-4">
+        <div class="w-full">
+          <Input
+            id="name"
+            bind:value={name}
+            label={translate('schedules.name-label')}
+            error={errors['name']}
+            maxLength={232}
+            disabled={Boolean(scheduleId)}
+            on:input={onInput}
+            on:blur={onBlur}
+            required
+          />
+        </div>
+        <div class="w-full">
+          <Input
+            id="workflowType"
+            bind:value={workflowType}
+            label={translate('schedules.workflow-type-label')}
+            error={errors['workflowType']}
+            on:input={onInput}
+            on:blur={onBlur}
+            required
+          />
+        </div>
+        <div class="w-full">
+          <Input
+            id="workflowId"
+            bind:value={workflowId}
+            label={translate('schedules.workflow-id-label')}
+            error={errors['workflowId']}
+            on:input={onInput}
+            on:blur={onBlur}
+            required
+          />
+        </div>
+        <div class="w-full">
+          <Input
+            id="taskQueue"
+            bind:value={taskQueue}
+            label={translate('schedules.task-queue-label')}
+            error={errors['taskQueue']}
+            on:input={onInput}
+            on:blur={onBlur}
+            required
+          />
+        </div>
+        <ScheduleInputPayload
+          bind:input
+          bind:editInput
+          bind:encoding
+          payloads={schedule?.action?.startWorkflow?.input}
+          showEditActions={Boolean(schedule)}
         />
-      </div>
-      <div class="w-full">
-        <Input
-          id="taskQueue"
-          bind:value={taskQueue}
-          label={translate('schedules.task-queue-label')}
-          error={errors['taskQueue']}
-          on:input={onInput}
-          on:blur={onBlur}
-          required
+        <AddSearchAttributes
+          bind:attributesToAdd={searchAttributesInput}
+          class="w-full"
         />
-      </div>
-      <ScheduleInputPayload
-        bind:input
-        bind:editInput
-        bind:encoding
-        payloads={schedule?.action?.startWorkflow?.input}
-        showEditActions={Boolean(schedule)}
-      />
-      <AddSearchAttributes
-        bind:attributesToAdd={searchAttributesInput}
-        class="w-full"
-      />
-      <SchedulesCalendarView
-        let:preset
-        {schedule}
-        bind:daysOfWeek
-        bind:daysOfMonth
-        bind:months
-        bind:days
-        bind:hour
-        bind:minute
-        bind:second
-        bind:phase
-        bind:cronString
-      >
-        <div class="mt-8 flex items-center gap-2">
-          <Button
-            disabled={isDisabled(preset) || !writeActionsAreAllowed()}
-            on:click={() => handleConfirm(preset, schedule)}
-            >{confirmText}</Button
-          >
-          <Button variant="ghost" href={backHref}
-            >{translate('common.cancel')}</Button
-          >
-        </div>
-      </SchedulesCalendarView>
-      <Alert intent="error" title={$error} hidden={!$error} />
-    </form>
+        <SchedulesCalendarView
+          let:preset
+          {schedule}
+          bind:daysOfWeek
+          bind:daysOfMonth
+          bind:months
+          bind:days
+          bind:hour
+          bind:minute
+          bind:second
+          bind:phase
+          bind:cronString
+        >
+          <div class="mt-8 flex items-center gap-2">
+            <Button
+              disabled={isDisabled(preset) || !writeActionsAreAllowed()}
+              on:click={() => handleConfirm(preset, schedule)}
+              >{confirmText}</Button
+            >
+            <Button variant="ghost" href={backHref}
+              >{translate('common.cancel')}</Button
+            >
+          </div>
+        </SchedulesCalendarView>
+        <Alert intent="error" title={$error} hidden={!$error} />
+      </form>
+    </Card>
   {/if}
 </div>

From 26c24ac0fa46f38ca851907f261ebb04c5cbedc0 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Thu, 5 Dec 2024 14:22:32 -0700
Subject: [PATCH 3/6] Update custom search attribute form for responsiveness

---
 .../workflow/add-search-attributes.svelte     |  3 +-
 .../search-attribute-input/index.svelte       | 43 +++++++++++--------
 2 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/src/lib/components/workflow/add-search-attributes.svelte b/src/lib/components/workflow/add-search-attributes.svelte
index da270491d..49d51d2b3 100644
--- a/src/lib/components/workflow/add-search-attributes.svelte
+++ b/src/lib/components/workflow/add-search-attributes.svelte
@@ -27,13 +27,14 @@
   };
 </script>
 
-<div class="flex flex-col gap-2 {className}">
+<div class="flex flex-col gap-4 {className}">
   {#each attributesToAdd as attribute}
     <SearchAttributeInput {attributesToAdd} bind:attribute {onRemove} />
   {/each}
   <Button
     variant="ghost"
     leadingIcon="add"
+    class="max-sm:w-full"
     on:click={addSearchAttribute}
     disabled={!searchAttributes.length ||
       attributesToAdd.length === searchAttributes.length ||
diff --git a/src/lib/components/workflow/search-attribute-input/index.svelte b/src/lib/components/workflow/search-attribute-input/index.svelte
index a107e69be..3a91178da 100644
--- a/src/lib/components/workflow/search-attribute-input/index.svelte
+++ b/src/lib/components/workflow/search-attribute-input/index.svelte
@@ -38,22 +38,31 @@
   };
 </script>
 
-<div class="flex items-end gap-2">
-  <div class="min-w-fit">
-    <Select
-      id="search-attribute"
-      label={translate('workflows.custom-search-attribute')}
-      class="w-full"
-      placeholder={translate('workflows.select-attribute')}
-      bind:value={attribute.label}
-      onChange={handleAttributeChange}
-    >
-      {#each $customSearchAttributeOptions as { value, label, type }}
-        <Option disabled={isDisabled(value)} {value} description={type}
-          >{label}</Option
-        >
-      {/each}
-    </Select>
+<div
+  class="flex flex-col gap-2 border-b border-subtle pb-4 sm:flex-row sm:gap-4"
+>
+  <div class="flex min-w-fit justify-between gap-2 sm:gap-4">
+    <div class="grow [&_button]:w-full">
+      <Select
+        id="search-attribute"
+        label={translate('workflows.custom-search-attribute')}
+        placeholder={translate('workflows.select-attribute')}
+        bind:value={attribute.label}
+        onChange={handleAttributeChange}
+      >
+        {#each $customSearchAttributeOptions as { value, label, type }}
+          <Option disabled={isDisabled(value)} {value} description={type}
+            >{label}</Option
+          >
+        {/each}
+      </Select>
+    </div>
+    <Button
+      variant="ghost"
+      leadingIcon="close"
+      class="mt-6 w-10 rounded-full sm:hidden"
+      on:click={() => onRemove(attribute.label)}
+    />
   </div>
   {#if attribute.type === SEARCH_ATTRIBUTE_TYPE.BOOL}
     <Select
@@ -102,7 +111,7 @@
   <Button
     variant="ghost"
     leadingIcon="close"
-    class="mt-6 w-10 rounded-full"
+    class="mt-6 w-10 rounded-full max-sm:hidden"
     on:click={() => onRemove(attribute.label)}
   />
 </div>

From 4ea76baa0ece216c5e447df1824ab9b70dd32d8a Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Thu, 5 Dec 2024 15:29:12 -0700
Subject: [PATCH 4/6] Update schedule spec form responsiveness

---
 .../schedule-day-of-month-view.svelte         |  6 ++--
 .../schedule/schedules-interval-view.svelte   |  8 ++---
 src/lib/holocene/day-of-month-picker.svelte   | 31 +++++++++----------
 src/lib/holocene/day-of-week-picker.svelte    |  2 +-
 4 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/src/lib/components/schedule/schedule-day-of-month-view.svelte b/src/lib/components/schedule/schedule-day-of-month-view.svelte
index 96b9757e6..1f00a6824 100644
--- a/src/lib/components/schedule/schedule-day-of-month-view.svelte
+++ b/src/lib/components/schedule/schedule-day-of-month-view.svelte
@@ -16,9 +16,7 @@
     {translate('schedules.recurring-dates-heading')}
   </h3>
   <p>{translate('schedules.recurring-dates-description')}</p>
-  <div class="flex w-full flex-col gap-4">
-    <DayOfMonthPicker bind:daysOfMonth />
-    <MonthPicker bind:months />
-  </div>
+  <DayOfMonthPicker bind:daysOfMonth />
+  <MonthPicker bind:months />
 </div>
 <SchedulesTimeView bind:hour bind:minute />
diff --git a/src/lib/components/schedule/schedules-interval-view.svelte b/src/lib/components/schedule/schedules-interval-view.svelte
index 3d117c6ff..39014bf63 100644
--- a/src/lib/components/schedule/schedules-interval-view.svelte
+++ b/src/lib/components/schedule/schedules-interval-view.svelte
@@ -41,7 +41,7 @@
   <p>
     {translate('schedules.interval-view-description')}
   </p>
-  <div class="flex flex-col items-center gap-2 lg:flex-row">
+  <div class="flex flex-col gap-2 md:flex-row md:items-center">
     <Input
       id="days"
       class="w-28"
@@ -54,7 +54,7 @@
       maxLength={3}
       error={error(days)}
     />
-    <div class="hidden lg:block">:</div>
+    <div class="hidden md:block">:</div>
     <Input
       id="hour-interval"
       class="w-24"
@@ -67,7 +67,7 @@
       maxLength={2}
       error={error(hour)}
     />
-    <div class="hidden lg:block">:</div>
+    <div class="hidden md:block">:</div>
     <Input
       id="minute-interval"
       class="w-24"
@@ -80,7 +80,7 @@
       maxLength={2}
       error={error(minute)}
     />
-    <div class="hidden lg:block">:</div>
+    <div class="hidden md:block">:</div>
     <Input
       id="second"
       class="w-24"
diff --git a/src/lib/holocene/day-of-month-picker.svelte b/src/lib/holocene/day-of-month-picker.svelte
index 1cd9b9021..91770b2eb 100644
--- a/src/lib/holocene/day-of-month-picker.svelte
+++ b/src/lib/holocene/day-of-month-picker.svelte
@@ -18,25 +18,24 @@
   };
 </script>
 
-<div class="text-center">
-  <div
-    class="surface-primary grid gap-x-4 gap-y-4 rounded border border-subtle px-0 py-4 text-center md:gap-x-8 md:px-2 xl:gap-x-16 xl:px-4"
-  >
-    {#each daysInMonth as day}
-      {@const active = daysOfMonth.includes(day)}
-      <Button
-        variant="secondary"
-        class={active && 'bg-interactive-secondary-active'}
-        on:click={(e) => onClick(e, day)}
-      >
-        {day}
-      </Button>
-    {/each}
-  </div>
+<div
+  class="surface-primary grid place-items-center gap-1 rounded border border-subtle px-0 py-4 text-center sm:gap-4 md:gap-x-8 md:px-2 xl:gap-x-16 xl:px-4"
+>
+  {#each daysInMonth as day}
+    {@const active = daysOfMonth.includes(day)}
+    <Button
+      variant="secondary"
+      class="max-md:h-9 max-md:px-4 max-md:py-1.5 max-md:text-sm max-sm:h-8 max-sm:px-2 max-sm:py-1 max-sm:text-xs {active &&
+        'bg-interactive-secondary-active'}"
+      on:click={(e) => onClick(e, day)}
+    >
+      {day}
+    </Button>
+  {/each}
 </div>
 
 <style lang="postcss">
   .grid {
-    grid-template-columns: repeat(7, minmax(45px, 1fr));
+    grid-template-columns: repeat(7, minmax(32px, 1fr));
   }
 </style>
diff --git a/src/lib/holocene/day-of-week-picker.svelte b/src/lib/holocene/day-of-week-picker.svelte
index be5e49445..ba2a7d8a2 100644
--- a/src/lib/holocene/day-of-week-picker.svelte
+++ b/src/lib/holocene/day-of-week-picker.svelte
@@ -28,7 +28,7 @@
 </script>
 
 <div class="flex flex-col gap-4 text-center">
-  <div class="flex gap-2 text-center">
+  <div class="flex flex-wrap gap-2 text-center">
     {#each genericWeekDays as { label, value }}
       {@const active = daysOfWeek.includes(value)}
       <Button

From dd25bd950a5c1bad985146c193d06880184dfb33 Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Fri, 6 Dec 2024 15:41:03 -0700
Subject: [PATCH 5/6] Remove unnecessary divs

---
 .../schedule/schedule-form-view.svelte        | 84 +++++++++----------
 1 file changed, 38 insertions(+), 46 deletions(-)

diff --git a/src/lib/components/schedule/schedule-form-view.svelte b/src/lib/components/schedule/schedule-form-view.svelte
index 38852e890..6e4176a44 100644
--- a/src/lib/components/schedule/schedule-form-view.svelte
+++ b/src/lib/components/schedule/schedule-form-view.svelte
@@ -176,52 +176,44 @@
     <h1>{title}</h1>
     <Card class="w-full xl:w-3/4 2xl:w-1/2">
       <form class="mb-4 flex w-full flex-col gap-4">
-        <div class="w-full">
-          <Input
-            id="name"
-            bind:value={name}
-            label={translate('schedules.name-label')}
-            error={errors['name']}
-            maxLength={232}
-            disabled={Boolean(scheduleId)}
-            on:input={onInput}
-            on:blur={onBlur}
-            required
-          />
-        </div>
-        <div class="w-full">
-          <Input
-            id="workflowType"
-            bind:value={workflowType}
-            label={translate('schedules.workflow-type-label')}
-            error={errors['workflowType']}
-            on:input={onInput}
-            on:blur={onBlur}
-            required
-          />
-        </div>
-        <div class="w-full">
-          <Input
-            id="workflowId"
-            bind:value={workflowId}
-            label={translate('schedules.workflow-id-label')}
-            error={errors['workflowId']}
-            on:input={onInput}
-            on:blur={onBlur}
-            required
-          />
-        </div>
-        <div class="w-full">
-          <Input
-            id="taskQueue"
-            bind:value={taskQueue}
-            label={translate('schedules.task-queue-label')}
-            error={errors['taskQueue']}
-            on:input={onInput}
-            on:blur={onBlur}
-            required
-          />
-        </div>
+        <Input
+          id="name"
+          bind:value={name}
+          label={translate('schedules.name-label')}
+          error={errors['name']}
+          maxLength={232}
+          disabled={Boolean(scheduleId)}
+          on:input={onInput}
+          on:blur={onBlur}
+          required
+        />
+        <Input
+          id="workflowType"
+          bind:value={workflowType}
+          label={translate('schedules.workflow-type-label')}
+          error={errors['workflowType']}
+          on:input={onInput}
+          on:blur={onBlur}
+          required
+        />
+        <Input
+          id="workflowId"
+          bind:value={workflowId}
+          label={translate('schedules.workflow-id-label')}
+          error={errors['workflowId']}
+          on:input={onInput}
+          on:blur={onBlur}
+          required
+        />
+        <Input
+          id="taskQueue"
+          bind:value={taskQueue}
+          label={translate('schedules.task-queue-label')}
+          error={errors['taskQueue']}
+          on:input={onInput}
+          on:blur={onBlur}
+          required
+        />
         <ScheduleInputPayload
           bind:input
           bind:editInput

From 0f4ada7588badbc9b4f3fbc06f6c218887f1e8dd Mon Sep 17 00:00:00 2001
From: Laura Whitaker <laura.whitaker@temporal.io>
Date: Fri, 6 Dec 2024 15:41:34 -0700
Subject: [PATCH 6/6] Fix input error and disabled classes

---
 src/lib/holocene/input/input.svelte | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/lib/holocene/input/input.svelte b/src/lib/holocene/input/input.svelte
index 4ca7b965b..6e26e7a36 100644
--- a/src/lib/holocene/input/input.svelte
+++ b/src/lib/holocene/input/input.svelte
@@ -94,6 +94,7 @@
     <slot name="before-input" {disabled} />
     <div
       class={merge(
+        'input-container',
         'surface-primary relative box-border inline-flex h-10 w-full items-center rounded-lg border border-subtle text-sm focus-within:outline-none focus-within:ring-2 focus-within:ring-primary/70',
       )}
       class:disabled
@@ -187,8 +188,6 @@
 <style lang="postcss">
   /* Base styles */
   .input-container {
-    /* @apply ; */
-
     &.error,
     &.invalid {
       @apply border-danger focus-within:ring-danger/70;