improve layout of settings dialog

dist/index.js

@@ -2352,7 +2352,7 @@
 
   // src/Views/settingsModal.tsx
   function SettingsModal() {
-    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresentingSettingsModal }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translation.settings), /* @__PURE__ */ createElement("div", { class: "flex-row width-input gap" }, /* @__PURE__ */ createElement("button", { class: "width-100 flex justify-start", "on:click": zoomOut }, /* @__PURE__ */ createElement("span", { class: "icon" }, "zoom_out"), translation.zoomOut), /* @__PURE__ */ createElement("button", { class: "width-100 flex justify-start", "on:click": zoomIn }, /* @__PURE__ */ createElement("span", { class: "icon" }, "zoom_in"), translation.zoomIn)), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column width-input" }, /* @__PURE__ */ createElement("button", { class: "width-100 flex-1", "on:click": repairApp }, translation.repairApp, /* @__PURE__ */ createElement("span", { class: "icon" }, "handyman"))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column width-input gap" }, /* @__PURE__ */ createElement("button", { class: "width-100 flex-1", "on:click": clearAddresses }, translation.clearAddresses, /* @__PURE__ */ createElement("span", { class: "icon" }, "cell_tower")), /* @__PURE__ */ createElement("button", { class: "width-100 flex-1", "on:click": clearCategories }, translation.clearCategories, /* @__PURE__ */ createElement("span", { class: "icon" }, icons.categoryName)), /* @__PURE__ */ createElement("button", { class: "width-100 flex-1", "on:click": clearStatuses }, translation.clearStatuses, /* @__PURE__ */ createElement("span", { class: "icon" }, icons.status)))), /* @__PURE__ */ createElement("button", { class: "width-100", "on:click": toggleSettings }, translation.close, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))));
+    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isPresentingSettingsModal }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translation.settings), /* @__PURE__ */ createElement("div", { class: "flex-row width-input gap" }, /* @__PURE__ */ createElement("button", { class: "width-100 flex justify-start", "on:click": zoomOut }, /* @__PURE__ */ createElement("span", { class: "icon" }, "zoom_out"), translation.zoomOut), /* @__PURE__ */ createElement("button", { class: "width-100 flex justify-start", "on:click": zoomIn }, /* @__PURE__ */ createElement("span", { class: "icon" }, "zoom_in"), translation.zoomIn)), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column width-input" }, /* @__PURE__ */ createElement("button", { class: "tile width-100 flex-1", "on:click": repairApp }, /* @__PURE__ */ createElement("span", { class: "icon" }, "handyman"), translation.repairApp)), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column width-input gap" }, /* @__PURE__ */ createElement("button", { class: "tile width-100 flex-1", "on:click": clearAddresses }, /* @__PURE__ */ createElement("span", { class: "icon" }, "cell_tower"), translation.clearAddresses), /* @__PURE__ */ createElement("button", { class: "tile width-100 flex-1", "on:click": clearCategories }, /* @__PURE__ */ createElement("span", { class: "icon" }, icons.categoryName), translation.clearCategories), /* @__PURE__ */ createElement("button", { class: "tile width-100 flex-1", "on:click": clearStatuses }, /* @__PURE__ */ createElement("span", { class: "icon" }, icons.status), translation.clearStatuses))), /* @__PURE__ */ createElement("button", { class: "width-100", "on:click": toggleSettings }, translation.close, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))));
   }
 
   // src/index.tsx

src/Views/settingsModal.tsx

@@ -35,26 +35,26 @@ export function SettingsModal() {
           <hr></hr>
 
           <div class="flex-column width-input">
-            <button class="width-100 flex-1" on:click={repairApp}>
+            <button class="tile width-100 flex-1" on:click={repairApp}>
-              {translation.repairApp}
               <span class="icon">handyman</span>
+              {translation.repairApp}
             </button>
           </div>
 
           <hr></hr>
 
           <div class="flex-column width-input gap">
-            <button class="width-100 flex-1" on:click={clearAddresses}>
+            <button class="tile width-100 flex-1" on:click={clearAddresses}>
-              {translation.clearAddresses}
               <span class="icon">cell_tower</span>
+              {translation.clearAddresses}
             </button>
-            <button class="width-100 flex-1" on:click={clearCategories}>
+            <button class="tile width-100 flex-1" on:click={clearCategories}>
-              {translation.clearCategories}
               <span class="icon">{icons.categoryName}</span>
+              {translation.clearCategories}
             </button>
-            <button class="width-100 flex-1" on:click={clearStatuses}>
+            <button class="tile width-100 flex-1" on:click={clearStatuses}>
-              {translation.clearStatuses}
               <span class="icon">{icons.status}</span>
+              {translation.clearStatuses}
             </button>
           </div>
         </main>