diff --git a/src/components/quickTools/footer.js b/src/components/quickTools/footer.js
index f95eedd41..fcb133035 100644
--- a/src/components/quickTools/footer.js
+++ b/src/components/quickTools/footer.js
@@ -45,6 +45,7 @@ export const SearchRow1 = ({ inputRef }) => (
+
);
diff --git a/src/components/quickTools/style.scss b/src/components/quickTools/style.scss
index 1a28e83b2..e14616ae3 100644
--- a/src/components/quickTools/style.scss
+++ b/src/components/quickTools/style.scss
@@ -1,6 +1,17 @@
@use '../../styles/mixins.scss';
#quick-tools {
+ #search_row1 {
+ [data-id="close"] {
+ display: none;
+ flex: 0 0 40px;
+ }
+
+ &.inline-close [data-id="close"] {
+ display: inline-flex;
+ }
+ }
+
.icon.click:not([disabled]) {
@include mixins.active-icon;
transition: all 0.3s ease-in-out;
diff --git a/src/handlers/quickTools.js b/src/handlers/quickTools.js
index f1cbf27fc..aff8f9009 100644
--- a/src/handlers/quickTools.js
+++ b/src/handlers/quickTools.js
@@ -33,6 +33,8 @@ let input;
/** @type {number} */
let quickToolUsedTimeout = null;
let activeSearchState = null;
+/** @type {MutationObserver | null} */
+let searchCloseVisibilityObserver = null;
const state = {
shift: false,
@@ -438,6 +440,7 @@ function toggleSearch() {
activeSearchState = { className, content: $content, footerHeight };
$toggler.className = "floating icon clearclose";
+ startSearchCloseVisibilitySync();
$footer.content = [$searchRow1, $searchRow2];
clearSearchQuickToolsState($content);
setRefValue($searchInput, selectedText || "");
@@ -469,6 +472,7 @@ function toggleSearch() {
content: $content,
footerHeight,
};
+ stopSearchCloseVisibilitySync();
clearSearchQuickToolsState(restoreState.content);
removeSearch();
clearQuickToolsButtonFeedback(restoreState.content);
@@ -493,6 +497,36 @@ function toggleSearch() {
$searchInput.focus();
}
+function startSearchCloseVisibilitySync() {
+ stopSearchCloseVisibilitySync();
+ syncSearchCloseVisibility();
+
+ const { $toggler } = quickTools;
+ searchCloseVisibilityObserver = new MutationObserver(
+ syncSearchCloseVisibility,
+ );
+ searchCloseVisibilityObserver.observe(root, { childList: true });
+ searchCloseVisibilityObserver.observe($toggler, {
+ attributes: true,
+ attributeFilter: ["class"],
+ });
+}
+
+function stopSearchCloseVisibilitySync() {
+ searchCloseVisibilityObserver?.disconnect();
+ searchCloseVisibilityObserver = null;
+ quickTools.$searchRow1.classList.remove("inline-close");
+}
+
+function syncSearchCloseVisibility() {
+ const { $searchRow1, $toggler } = quickTools;
+ const hasVisibleFloatingClose =
+ appSettings.value.floatingButton &&
+ $toggler.isConnected &&
+ !$toggler.classList.contains("hide");
+ $searchRow1.classList.toggle("inline-close", !hasVisibleFloatingClose);
+}
+
function toggle() {
// if search is active, remove it
const searchBar = actionStack.get("search-bar");