From a600ceaa48c15db60f6e6cb3faac36ed22f42c0e Mon Sep 17 00:00:00 2001
From: Lucas Nogueira <lucas@tauri.app>
Date: Tue, 23 May 2023 17:07:07 -0300
Subject: [PATCH] adjust layout [skip ci]

---
 examples/api/src/views/Window.svelte | 138 ++++++++++++++-------------
 1 file changed, 73 insertions(+), 65 deletions(-)

diff --git a/examples/api/src/views/Window.svelte b/examples/api/src/views/Window.svelte
index 352ec7e2..c8c1a20b 100644
--- a/examples/api/src/views/Window.svelte
+++ b/examples/api/src/views/Window.svelte
@@ -512,75 +512,83 @@
     <br />
 
     {#if isWindows || isMacOS}
-      <div class="flex gap-1">
-        <label>
-          Effect
-          <select class="input" bind:value={selectedEffect}>
-            {#each effectOptions as effect}
-              <option value={effect}>{effect}</option>
-            {/each}
-          </select>
-        </label>
-
-        <label>
-          State
-          <select class="input" bind:value={effectState}>
-            {#each effectStateOptions as state}
-              <option value={state}>{state}</option>
-            {/each}
-          </select>
-        </label>
-
-        <label>
-          Radius
-          <input class="input" type="number" bind:value={effectRadius} />
-        </label>
-
-        <label>
-          Color
-          <div class="flex">
-            <input
-              style="max-width: 120px;"
-              class="input"
-              type="number"
-              placeholder="R"
-              bind:value={effectR}
-            />
-            <input
-              style="max-width: 120px;"
-              class="input"
-              type="number"
-              placeholder="G"
-              bind:value={effectG}
-            />
-            <input
-              style="max-width: 120px;"
-              class="input"
-              type="number"
-              placeholder="B"
-              bind:value={effectB}
-            />
-            <input
-              style="max-width: 120px;"
-              class="input"
-              type="number"
-              placeholder="A"
-              bind:value={effectA}
-            />
-          </div>
-        </label>
+      <div class="flex flex-col gap-1">
+        <div class="flex">
+          <label>
+            Effect
+            <select class="input" bind:value={selectedEffect}>
+              {#each effectOptions as effect}
+                <option value={effect}>{effect}</option>
+              {/each}
+            </select>
+          </label>
+
+          <label>
+            State
+            <select class="input" bind:value={effectState}>
+              {#each effectStateOptions as state}
+                <option value={state}>{state}</option>
+              {/each}
+            </select>
+          </label>
+
+          <label>
+            Radius
+            <input class="input" type="number" bind:value={effectRadius} />
+          </label>
+        </div>
 
-        <button class="btn" style="width: 80px;" on:click={addEffect}
-          >Add</button
-        >
+        <div class="flex">
+          <label>
+            Color
+            <div class="flex">
+              <input
+                style="max-width: 120px;"
+                class="input"
+                type="number"
+                placeholder="R"
+                bind:value={effectR}
+              />
+              <input
+                style="max-width: 120px;"
+                class="input"
+                type="number"
+                placeholder="G"
+                bind:value={effectG}
+              />
+              <input
+                style="max-width: 120px;"
+                class="input"
+                type="number"
+                placeholder="B"
+                bind:value={effectB}
+              />
+              <input
+                style="max-width: 120px;"
+                class="input"
+                type="number"
+                placeholder="A"
+                bind:value={effectA}
+              />
+            </div>
+          </label>
+        </div>
 
-        <div>
-          Applied effects: {effects.length ? effects.join(",") : "None"}
+        <div class="flex">
+          <button class="btn" style="width: 80px;" on:click={addEffect}
+            >Add</button
+          >
         </div>
 
-        <button class="btn" style="width: 80px;" on:click={clearEffects}
-          >Clear</button
-        >
+        <div class="flex">
+          <div>
+            Applied effects: {effects.length ? effects.join(",") : "None"}
+          </div>
+
+          <button class="btn" style="width: 80px;" on:click={clearEffects}
+            >Clear</button
+          >
+        </div>
       </div>
     {/if}
   {/if}