Make LoopControls responsive (wrt. Web Design)

Author: ccjmne

src/lib/LoopControls.svelte

@@ -21,36 +21,34 @@
   let last = $derived(loop[0] === loop[1])
 </script>
 
-<div class="join w-full">
-  <div class="join-item flex flex-col">
-    <button
-      aria-label={last ? 'Repeat' : 'Do not repeat'}
-      class="btn join-item"
-      onclick={() => (loop[1] = last ? Infinity : loop[0])}
-    >
-      <div class={['swap', last && 'swap-active']}>
-        <Loop class="swap-off" />
-        <NoLoop class="swap-on" />
-      </div>
-    </button>
-  </div>
-  <div class="join-item flex flex-row shadow-md">
-    <div class="bg-base-100 ps-4 muted relative flex place-items-center">Loop</div>
+<div class="join grid grid-cols-[auto_1fr] md:grid-cols-[auto_auto_1fr_auto] grid-flow-col-dense">
+  <button
+    aria-label={last ? 'Repeat' : 'Do not repeat'}
+    class="btn join-item max-md:rounded-bl-none"
+    onclick={() => (loop[1] = last ? Infinity : loop[0])}
+  >
+    <div class={['swap', last && 'swap-active']}>
+      <Loop class="swap-off" />
+      <NoLoop class="swap-on" />
+    </div>
+  </button>
+  <div class="bg-base-100 flex flex-row shadow-md justify-center items-center max-md:rounded-tr-sm">
+    <div class="ps-4 muted">Loop</div>
     <EditableNumber
       min={1}
-      class="bg-base-100 px-3"
+      class="px-3"
       bind:value={() => loop[0], v => ((loop[0] = v), (loop[1] = Math.max(loop[0], loop[1])))}
     ></EditableNumber>
-    <div class="bg-base-100 muted relative flex place-items-center">of</div>
+    <div class="muted">of</div>
     <EditableNumber
-      class="bg-base-100 ps-3 pe-4"
+      class="ps-3 pe-4"
       bind:value={() => loop[1], v => ((loop[1] = v), (loop[0] = Math.min(loop[0], loop[1])))}
     ></EditableNumber>
   </div>
-  <StartStop bind:time bind:loop bind:running {beeping} />
+  <StartStop bind:time bind:loop bind:running {beeping} class="max-md:rounded-br-sm" />
   <button
     aria-label="Rewind"
-    class="btn join-item"
+    class="btn join-item max-md:col-start-1 max-md:row-start-2 max-md:rounded-none max-md:rounded-bl-sm"
     disabled={loop[0] === 1 && time[0] === 0}
     onclick={() => ((loop[0] = 1), (time[0] = 0))}
   >

src/lib/StartStop.svelte

@@ -9,11 +9,13 @@
     loop = $bindable([1, Infinity]),
     running = $bindable(false),
     beeping,
+    class: cls,
   }: {
     time: [current: number, goal: number]
     loop: [current: number, goal: number]
     running: boolean
     beeping: boolean
+    class?: string
   } = $props()
 
   let beep: HTMLAudioElement
@@ -52,7 +54,7 @@
   })
 </script>
 
-<button type="button" class="btn grow" disabled={!runnable} onclick={click}>
+<button type="button" class={[cls, 'btn grow']} disabled={!runnable} onclick={click}>
   {#if action === 'Start'}
     <Play />
   {:else if action === 'Resume'}