Update schedule spec form responsiveness

temporalio · Dec 5, 2024 · 4ea76ba · 4ea76ba
1 parent 416d00a
commit 4ea76ba
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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