fix: mobile close icon and focus in issue

Author: canerakdas

packages/ui-components/src/Common/Search/Input/index.module.css

@@ -22,10 +22,11 @@
     py-4
     pr-4
     pl-9
-    text-sm
+    text-base
     text-neutral-900
     placeholder:text-neutral-500
     focus:outline-none
+    md:text-sm
     dark:border-neutral-900
     dark:text-neutral-200
     dark:placeholder:text-neutral-600;

packages/ui-components/src/Common/Search/Modal/index.module.css

@@ -117,3 +117,17 @@
     lg:border
     dark:border-neutral-900;
 }
+
+.modalCloseButton {
+  @apply absolute
+    top-2
+    right-4
+    z-10
+    cursor-pointer
+    bg-white
+    px-2
+    text-2xl
+    text-neutral-950
+    dark:bg-black
+    dark:text-neutral-200;
+}

packages/ui-components/src/Common/Search/Modal/index.tsx

@@ -46,6 +46,7 @@ const SearchModal: FC<PropsWithChildren<SearchModalProps>> = ({
                   placeholder={placeholder}
                   ariaLabel={placeholder}
                 />
+                <Modal.Close className={styles.modalCloseButton} />
                 {children}
               </Modal.Content>
             </Modal.Inner>