From cc202c46d2a95c956c76dac0889532724f75b913 Mon Sep 17 00:00:00 2001
From: Samuel Pastva <sam.pastva@gmail.com>
Date: Mon, 20 May 2024 08:38:19 +0200
Subject: [PATCH] Make icon buttons fixed-width.

---
 .../component/functions-editor/editor-tile/editor-tile.less   | 4 ++++
 .../component/functions-editor/editor-tile/function-tile.ts   | 4 ++--
 .../component/functions-editor/editor-tile/variable-tile.ts   | 4 ++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/html/component/functions-editor/editor-tile/editor-tile.less b/src/html/component/functions-editor/editor-tile/editor-tile.less
index 10ed04e..0029e90 100644
--- a/src/html/component/functions-editor/editor-tile/editor-tile.less
+++ b/src/html/component/functions-editor/editor-tile/editor-tile.less
@@ -69,6 +69,10 @@
   color: @monotonicity-unspecified;
 }
 
+.icon-button {
+  width: 50px;
+}
+
 @media (prefers-color-scheme: dark) {
   .regulation:hover {
     background: rgba(0, 0, 0, 0.37);
diff --git a/src/html/component/functions-editor/editor-tile/function-tile.ts b/src/html/component/functions-editor/editor-tile/function-tile.ts
index 58e33a7..2cb1fbc 100644
--- a/src/html/component/functions-editor/editor-tile/function-tile.ts
+++ b/src/html/component/functions-editor/editor-tile/function-tile.ts
@@ -148,11 +148,11 @@ export class FunctionTile extends EditorTile {
           <input id="name-field" class="uk-input uk-text-center" .value="${this.functions[this.index].id}"
                  @input="${(e: InputEvent) => this.nameUpdated((e.target as HTMLInputElement).value)}"/>
           
-          <button class="uk-button uk-button-small uk-button-secondary" @click="${this.addVariable}">
+          <button class="icon-button uk-button uk-button-small uk-button-secondary" @click="${this.addVariable}">
             ${icon(faPlus).node}
           </button>
           
-          <button class="uk-button uk-button-small uk-button-secondary" @click="${this.removeVariable}">
+          <button class="icon-button uk-button uk-button-small uk-button-secondary" @click="${this.removeVariable}">
             ${icon(faTrash).node}
           </button>
           
diff --git a/src/html/component/functions-editor/editor-tile/variable-tile.ts b/src/html/component/functions-editor/editor-tile/variable-tile.ts
index faf2491..e9b7217 100644
--- a/src/html/component/functions-editor/editor-tile/variable-tile.ts
+++ b/src/html/component/functions-editor/editor-tile/variable-tile.ts
@@ -148,10 +148,10 @@ export class VariableTile extends EditorTile {
         <div class="uk-flex uk-flex-row">
           <input id="name-field" class="uk-input uk-text-center" .value="${this.variables[this.index].name}"
                  @input="${(e: InputEvent) => this.nameUpdated((e.target as HTMLInputElement).value)}"/>
-          <button class="uk-button uk-button-small uk-button-secondary" @click="${this.focusVariable}">
+          <button class="icon-button uk-button uk-button-small uk-button-secondary" @click="${this.focusVariable}">
             ${icon(faMagnifyingGlass).node}
           </button>
-          <button class="uk-button uk-button-small uk-button-secondary" @click="${this.removeVariable}">
+          <button class="icon-button uk-button uk-button-small uk-button-secondary" @click="${this.removeVariable}">
             ${icon(faTrash).node}
           </button>
         </div>