setting cancel button

apps/app/src/features/search/client/components/SearchForm.module.scss

@@ -0,0 +1,16 @@
+
+.search-form :global {
+  position: relative;
+  width: 100%;
+
+  .search-cancel {
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    z-index: 3;
+    width: auto;
+    height: 100%;
+    line-height: 0;
+    border: none;
+  }
+}

apps/app/src/features/search/client/components/SearchForm.tsx

@@ -2,7 +2,9 @@ import React, {
   useCallback, useRef, useEffect, useMemo,
 } from 'react';
 
-import { GetInputProps } from '../interfaces/downshift';
+import type { GetInputProps } from '../interfaces/downshift';
+
+import styles from './SearchForm.module.scss';
 
 type Props = {
   searchKeyword: string,
@@ -52,11 +54,18 @@ export const SearchForm = (props: Props): JSX.Element => {
 
   return (
     <form
-      className="w-100"
+      className={`${styles['search-form']}`}
       onSubmit={submitHandler}
       data-testid="search-form"
     >
       <input {...inputOptions} />
+      <button
+        type="button"
+        className="btn btn-neutral-secondary search-cancel"
+        onClick={() => { onChange?.('') }}
+      >
+        <span className="material-symbols-outlined p-0">cancel</span>
+      </button>
     </form>
   );
 };

apps/app/src/features/search/client/components/SearchHelp.module.scss

@@ -0,0 +1,5 @@
+@use '@growi/core/scss/bootstrap/init' as bs;
+
+.search-helper tr:last-child {
+  border-color: var(--bs-table-bg);
+}

apps/app/src/features/search/client/components/SearchHelp.tsx

@@ -3,6 +3,8 @@ import React, { useState } from 'react';
 import { useTranslation } from 'next-i18next';
 import { Collapse } from 'reactstrap';
 
+import styles from './SearchHelp.module.scss';
+
 export const SearchHelp = (): JSX.Element => {
   const { t } = useTranslation();
 
@@ -16,7 +18,7 @@ export const SearchHelp = (): JSX.Element => {
         <span className="material-symbols-outlined ms-2">{isOpen ? 'expand_less' : 'expand_more'}</span>
       </button>
       <Collapse isOpen={isOpen}>
-        <table className="table m-0">
+        <table className={`table m-0 ${styles['search-helper']}`}>
           <tbody>
             <tr>
               <th className="py-2">

apps/app/src/features/search/client/components/SearchModal.tsx

@@ -56,7 +56,7 @@ const SearchModal = (): JSX.Element => {
 
   return (
     <Modal size="lg" isOpen={searchModalData?.isOpened ?? false} toggle={closeSearchModal} data-testid="search-modal">
-      <ModalBody>
+      <ModalBody className="pb-2">
         <Downshift
           onSelect={selectSearchMenuItemHandler}
           stateReducer={stateReducer}
@@ -100,6 +100,7 @@ const SearchModal = (): JSX.Element => {
                   searchKeyword={searchKeyword}
                   getItemProps={getItemProps}
                 />
+                <div className="border-top mt-2" />
               </ul>
             </div>
           )}

apps/app/src/features/search/client/components/SearchResultMenuItem.tsx

@@ -69,7 +69,6 @@ export const SearchResultMenuItem = (props: Props): JSX.Element => {
           </SearchMenuItem>
         ))
       }
-      <div className="border-top mt-2 mb-2" />
     </>
   );
 };