fix(react): alignment and size of search/bulk action buttons

apps/client/src/widgets/bulk_actions/BulkAction.tsx

@@ -1,6 +1,7 @@
 import { ComponentChildren } from "preact";
 import { memo } from "preact/compat";
 import AbstractBulkAction from "./abstract_bulk_action";
+import HelpRemoveButtons from "../react/HelpRemoveButtons";
 
 interface BulkActionProps {
     label: string | ComponentChildren;   
@@ -24,19 +25,11 @@ const BulkAction = memo(({ label, children, helpText, bulkAction }: BulkActionPr
                     {children}
                 </div>
             </td>
-            <td className="button-column">
+            <HelpRemoveButtons
-                {helpText && <div className="dropdown help-dropdown">
+                help={helpText}
-                    <span className="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
+                removeText="Delete"
-                    <div className="dropdown-menu dropdown-menu-right p-4">
+                onRemove={() => bulkAction?.deleteAction()}
-                        {helpText}
+            />
-                    </div>
-                </div>}
-
-                <span
-                    className="bx bx-x icon-action action-conf-del"
-                    onClick={() => bulkAction?.deleteAction()}
-                />
-            </td>
         </tr>
     );
 });

apps/client/src/widgets/react/HelpRemoveButtons.tsx

@@ -0,0 +1,30 @@
+import type { ComponentChildren } from "preact";
+import ActionButton from "./ActionButton";
+import Dropdown from "./Dropdown";
+
+interface HelpRemoveButtonsProps {
+    help?: ComponentChildren;
+    removeText?: string;
+    onRemove?: () => void;
+}
+
+export default function HelpRemoveButtons({ help, removeText, onRemove }: HelpRemoveButtonsProps) {
+    return (
+        <td className="button-column">
+            {help && <>
+                <Dropdown
+                    className="help-dropdown"
+                    buttonClassName="bx bx-help-circle icon-action"                    
+                    hideToggleArrow
+                >{help}</Dropdown>
+                {" "}
+            </>}            
+            <ActionButton
+                icon="bx bx-x"
+                className="search-option-del"
+                text={removeText ?? ""}
+                onClick={onRemove}
+            />
+        </td>
+    );
+}

apps/client/src/widgets/ribbon/SearchDefinitionOptions.tsx

@@ -1,5 +1,3 @@
-import Dropdown from "../react/Dropdown";
-import ActionButton from "../react/ActionButton";
 import FormTextArea from "../react/FormTextArea";
 import NoteAutocomplete from "../react/NoteAutocomplete";
 import FormSelect from "../react/FormSelect";
@@ -14,6 +12,7 @@ import { t } from "../../services/i18n";
 import { useEffect, useMemo, useRef } from "preact/hooks";
 import appContext from "../../components/app_context";
 import server from "../../services/server";
+import HelpRemoveButtons from "../react/HelpRemoveButtons";
 
 export interface SearchOption {
   attributeName: string;
@@ -122,25 +121,18 @@ function SearchOption({ note, title, titleIcon, children, help, attributeName, a
         {title}
       </td>
       <td>{children}</td>
-      <td className="button-column">
+      <HelpRemoveButtons
-        {help && <>
+        help={help}
-            <Dropdown buttonClassName="bx bx-help-circle icon-action" hideToggleArrow>{help}</Dropdown>
+        removeText={t("abstract_search_option.remove_this_search_option")}
-            {" "}
+        onRemove={() => {
-        </>}            
+          removeOwnedAttributesByNameOrType(note, attributeType, attributeName);
-        <ActionButton
+          if (additionalAttributesToDelete) {
-          icon="bx bx-x"
+            for (const { type, name } of additionalAttributesToDelete) {
-          className="search-option-del"
+              removeOwnedAttributesByNameOrType(note, type, name);
-          text={t("abstract_search_option.remove_this_search_option")}
-          onClick={() => {
-            removeOwnedAttributesByNameOrType(note, attributeType, attributeName);
-            if (additionalAttributesToDelete) {
-              for (const { type, name } of additionalAttributesToDelete) {
-                removeOwnedAttributesByNameOrType(note, type, name);
-              }
             }
-          }}
+          }
-        />
+        }}
-      </td>
+      />
     </tr>
   )
 }