chore(react/ribbon): fix alignment of help/close buttons

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) {

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);

apps/client/src/widgets/search_options/abstract_search_option.ts

@@ -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>;
-}