Make icon buttons fixed-width.

sybila · May 20, 2024 · cc202c4 · cc202c4
1 parent 57b1ff4
commit cc202c4
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 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
@@ -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
@@ -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
@@ -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>