From 3218ab971be8ffe041c6a5026b648f6bc62fba48 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 24 Aug 2025 19:03:19 +0300
Subject: [PATCH] chore(react/ribbon): fix alignment of help/close buttons

---
 .../ribbon/SearchDefinitionOptions.tsx        |  6 ++-
 apps/client/src/widgets/ribbon/style.css      | 23 +++++++---
 .../search_options/abstract_search_option.ts  | 46 -------------------
 3 files changed, 21 insertions(+), 54 deletions(-)
 delete mode 100644 apps/client/src/widgets/search_options/abstract_search_option.ts

diff --git a/apps/client/src/widgets/ribbon/SearchDefinitionOptions.tsx b/apps/client/src/widgets/ribbon/SearchDefinitionOptions.tsx
index b7ded28a1..99e33c3e3 100644
--- a/apps/client/src/widgets/ribbon/SearchDefinitionOptions.tsx
+++ b/apps/client/src/widgets/ribbon/SearchDefinitionOptions.tsx
@@ -123,10 +123,14 @@ function SearchOption({ note, title, titleIcon, children, help, attributeName, a
       </td>
       <td>{children}</td>
       <td className="button-column">
-        {help && <Dropdown buttonClassName="bx bx-help-circle icon-action" hideToggleArrow>{help}</Dropdown>}
+        {help && <>
+            <Dropdown buttonClassName="bx bx-help-circle icon-action" hideToggleArrow>{help}</Dropdown>
+            {" "}
+        </>}            
         <ActionButton
           icon="bx bx-x"
           className="search-option-del"
+          text={t("abstract_search_option.remove_this_search_option")}
           onClick={() => {
             removeOwnedAttributesByNameOrType(note, attributeType, attributeName);
             if (additionalAttributesToDelete) {
diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css
index 81ad0e626..9e49abef0 100644
--- a/apps/client/src/widgets/ribbon/style.css
+++ b/apps/client/src/widgets/ribbon/style.css
@@ -402,23 +402,32 @@
     white-space: nowrap;
 }
 
-.search-setting-table .button-column {
-    /* minimal width so that table remains static sized and most space remains for middle column with settings */
-    width: 50px;
-    white-space: nowrap;
-    text-align: right;
-}
-
 .search-setting-table .title-column {
     /* minimal width so that table remains static sized and most space remains for middle column with settings */
     width: 50px;
     white-space: nowrap;
 }
 
+.search-setting-table .button-column {
+    /* minimal width so that table remains static sized and most space remains for middle column with settings */
+    width: 50px;
+    white-space: nowrap;
+    text-align: right;
+    vertical-align: middle;
+}
+
+.search-setting-table .button-column .dropdown {
+    display: inline-block !important;
+}
+
 .search-setting-table .button-column .dropdown-menu {
     white-space: normal;
 }
 
+.search-setting-table .button-column > * {
+    vertical-align: middle;
+}
+
 .attribute-list hr {
     height: 1px;
     border-color: var(--main-border-color);
diff --git a/apps/client/src/widgets/search_options/abstract_search_option.ts b/apps/client/src/widgets/search_options/abstract_search_option.ts
deleted file mode 100644
index 1efe83ed2..000000000
--- a/apps/client/src/widgets/search_options/abstract_search_option.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import server from "../../services/server.js";
-import ws from "../../services/ws.js";
-import Component from "../../components/component.js";
-import utils from "../../services/utils.js";
-import { t } from "../../services/i18n.js";
-import type FAttribute from "../../entities/fattribute.js";
-import type FNote from "../../entities/fnote.js";
-import type { AttributeType } from "../../entities/fattribute.js";
-
-export default abstract class AbstractSearchOption extends Component {
-
-    private attribute: FAttribute;
-    protected note: FNote;
-
-    constructor(attribute: FAttribute, note: FNote) {
-        super();
-
-        this.attribute = attribute;
-        this.note = note;
-    }
-
-    async setAttribute(type: AttributeType, name: string, value: string = "") {
-        // TODO: Find a better pattern.
-        await (this.constructor as any).setAttribute(this.note.noteId, type, name, value);
-    }
-
-    render() {
-        try {
-            const $rendered = this.doRender();
-
-            $rendered
-                .find(".search-option-del")
-                .on("click", () => this.deleteOption())
-                .attr("title", t("abstract_search_option.remove_this_search_option"));
-
-            utils.initHelpDropdown($rendered);
-
-            return $rendered;
-        } catch (e: any) {
-            logError(t("abstract_search_option.failed_rendering", { dto: JSON.stringify(this.attribute.dto), error: e.message, stack: e.stack }));
-            return null;
-        }
-    }
-
-    abstract doRender(): JQuery<HTMLElement>;
-}