mobile actions

packages/excalidraw/components/Actions.scss

@@ -110,8 +110,8 @@
     --default-button-size: 2rem;
 
     .compact-action-button {
-      width: 2rem;
+      width: 1.625rem;
-      height: 2rem;
+      height: 1.625rem;
       border: none;
       border-radius: var(--border-radius-lg);
       background: transparent;
@@ -167,6 +167,11 @@
       }
     }
   }
+
+  .ToolIcon__icon {
+    width: 1.625rem;
+    height: 1.625rem;
+  }
 }
 
 .compact-shape-actions-island {
@@ -199,6 +204,17 @@
   }
 }
 
+.mobile-shape-actions {
+  z-index: 999;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  background: transparent;
+  border-radius: var(--border-radius-lg);
+  box-shadow: none;
+}
+
 .shape-actions-theme-scope {
   --button-border: transparent;
   --button-bg: var(--color-surface-mid);

packages/excalidraw/components/FontPicker/FontPicker.tsx

@@ -106,6 +106,7 @@ export const FontPicker = React.memo(
           <FontPickerTrigger
             selectedFontFamily={selectedFontFamily}
             isOpened={isOpened}
+            compactMode={compactMode}
           />
           {isOpened && (
             <FontPickerList

packages/excalidraw/components/FontPicker/FontPickerList.tsx

@@ -338,11 +338,13 @@ export const FontPickerList = React.memo(
         onKeyDown={onKeyDown}
         preventAutoFocusOnTouch={!!app.state.editingTextElement}
       >
-        <QuickSearch
+        {app.state.stylesPanelMode === "full" && (
-          ref={inputRef}
+          <QuickSearch
-          placeholder={t("quickSearch.placeholder")}
+            ref={inputRef}
-          onChange={debounce(setSearchTerm, 20)}
+            placeholder={t("quickSearch.placeholder")}
-        />
+            onChange={debounce(setSearchTerm, 20)}
+          />
+        )}
         <ScrollableList
           className="dropdown-menu fonts manual-hover"
           placeholder={t("fontList.empty")}

packages/excalidraw/components/FontPicker/FontPickerTrigger.tsx

@@ -11,11 +11,13 @@ import { useExcalidrawSetAppState } from "../App";
 interface FontPickerTriggerProps {
   selectedFontFamily: FontFamilyValues | null;
   isOpened?: boolean;
+  compactMode?: boolean;
 }
 
 export const FontPickerTrigger = ({
   selectedFontFamily,
   isOpened = false,
+  compactMode = false,
 }: FontPickerTriggerProps) => {
   const setAppState = useExcalidrawSetAppState();
 
@@ -37,6 +39,8 @@ export const FontPickerTrigger = ({
           }}
           style={{
             border: "none",
+            width: compactMode ? "1.625rem" : undefined,
+            height: compactMode ? "1.625rem" : undefined,
           }}
         />
       </div>