fix: send funds search input size overflow on ff (#1125)

TalismanSociety · Oct 23, 2023 · e4be24f · e4be24f
1 parent 414e958
commit e4be24f
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git a/apps/extension/src/@talisman/components/SearchInput.tsx b/apps/extension/src/@talisman/components/SearchInput.tsx
@@ -80,7 +80,7 @@ export const SearchInput: FC<SearchInputProps> = ({
       ref={ref}
       className={classNames("text-base", className)}
       containerProps={containerProps}
-      before={<SearchIcon className="text-body-disabled" />}
+      before={<SearchIcon className="text-body-disabled shrink-0" />}
       after={after}
       placeholder={placeholder}
       onChange={handleSearchChange}

diff --git a/apps/extension/src/ui/domains/SendFunds/SendFundsAccountPicker.tsx b/apps/extension/src/ui/domains/SendFunds/SendFundsAccountPicker.tsx
@@ -49,7 +49,7 @@ export const SendFundsAccountPicker = () => {
     <div className="flex h-full min-h-full w-full flex-col overflow-hidden">
       <div className="flex min-h-fit w-full items-center gap-8 px-12 pb-8">
         <div className="font-bold">{"From"}</div>
-        <div className="grow">
+        <div className="mx-1 grow overflow-hidden px-1">
           <SearchInput onChange={setSearch} placeholder={t("Search by account name")} />
         </div>
       </div>

diff --git a/apps/extension/src/ui/domains/SendFunds/SendFundsRecipientPicker.tsx b/apps/extension/src/ui/domains/SendFunds/SendFundsRecipientPicker.tsx
@@ -174,7 +174,7 @@ export const SendFundsRecipientPicker = () => {
     <div className="flex h-full min-h-full w-full flex-col overflow-hidden">
       <div className="flex min-h-fit w-full items-center gap-8 px-12 pb-8">
         <div className="font-bold">{t("To")}</div>
-        <div className="grow">
+        <div className="mx-1 grow overflow-hidden px-1">
           <SearchInput
             onValidate={handleValidate}
             // eslint-disable-next-line jsx-a11y/no-autofocus
@@ -183,7 +183,7 @@ export const SendFundsRecipientPicker = () => {
             placeholder={t("Enter address")}
             after={
               isEnsLookup && isEnsFetching ? (
-                <LoaderIcon className="text-body-disabled animate-spin-slow" />
+                <LoaderIcon className="text-body-disabled animate-spin-slow shrink-0" />
               ) : null
             }
           />