From 9fcbbe0d27278b7df5ec01012a207002d6c814ef Mon Sep 17 00:00:00 2001
From: David Luzar <5153846+dwelle@users.noreply.github.com>
Date: Mon, 29 Sep 2025 12:06:17 +0200
Subject: [PATCH] fix: library search UI fixes/tweaks (#10032)

* fix library icon height in command palette

* add clear button when no results
---
 packages/excalidraw/components/InlineIcon.tsx |  3 ++-
 .../components/LibraryMenuItems.tsx           | 20 ++++++++++++++++++-
 packages/excalidraw/locales/en.json           |  3 ++-
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/packages/excalidraw/components/InlineIcon.tsx b/packages/excalidraw/components/InlineIcon.tsx
index f2fe9d5252..04c04fb688 100644
--- a/packages/excalidraw/components/InlineIcon.tsx
+++ b/packages/excalidraw/components/InlineIcon.tsx
@@ -12,8 +12,9 @@ export const InlineIcon = ({
       className={className}
       style={{
         width: size,
+        height: "100%",
         margin: "0 0.5ex 0 0.5ex",
-        display: "inline-block",
+        display: "inline-flex",
         lineHeight: 0,
         verticalAlign: "middle",
         flex: "0 0 auto",
diff --git a/packages/excalidraw/components/LibraryMenuItems.tsx b/packages/excalidraw/components/LibraryMenuItems.tsx
index 3a78bbec4e..2d111b7f7b 100644
--- a/packages/excalidraw/components/LibraryMenuItems.tsx
+++ b/packages/excalidraw/components/LibraryMenuItems.tsx
@@ -34,6 +34,8 @@ import { TextField } from "./TextField";
 
 import { useDevice } from "./App";
 
+import { Button } from "./Button";
+
 import type { ExcalidrawLibraryIds } from "../data/types";
 
 import type {
@@ -319,7 +321,14 @@ export default function LibraryMenuItems({
       <div className="library-menu-items-container__header">
         {t("library.search.heading")}
         {!isLoading && (
-          <div className="library-menu-items-container__header__hint">
+          <div
+            className="library-menu-items-container__header__hint"
+            style={{ cursor: "pointer" }}
+            onPointerDown={(e) => e.preventDefault()}
+            onClick={(event) => {
+              setSearchInputValue("");
+            }}
+          >
             <kbd>esc</kbd> to clear
           </div>
         )}
@@ -341,6 +350,15 @@ export default function LibraryMenuItems({
           <div className="library-menu-items__no-items__hint">
             {t("library.search.noResults")}
           </div>
+          <Button
+            onPointerDown={(e) => e.preventDefault()}
+            onSelect={() => {
+              setSearchInputValue("");
+            }}
+            style={{ width: "auto", marginTop: "1rem" }}
+          >
+            {t("library.search.clearSearch")}
+          </Button>
         </div>
       )}
     </>
diff --git a/packages/excalidraw/locales/en.json b/packages/excalidraw/locales/en.json
index 9a9a7b9cac..8279cb4344 100644
--- a/packages/excalidraw/locales/en.json
+++ b/packages/excalidraw/locales/en.json
@@ -185,7 +185,8 @@
     "search": {
       "inputPlaceholder": "Search library",
       "heading": "Library matches",
-      "noResults": "No matching items found..."
+      "noResults": "No matching items found...",
+      "clearSearch": "Clear search"
     }
   },
   "search": {