style Improvements

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

@@ -10,7 +10,7 @@ export const SearchHelp = (): JSX.Element => {
 
   return (
     <>
-      <button type="button" className="btn border-0 text-muted d-flex justify-content-center align-items-center ps-0" onClick={() => setIsOpen(!isOpen)}>
+      <button type="button" className="btn border-0 text-muted d-flex justify-content-center align-items-center ms-1 p-0" onClick={() => setIsOpen(!isOpen)}>
         <span className="material-symbols-outlined me-2">help</span>
         { t('search_help.title') }
         <span className="material-symbols-outlined ms-2">{isOpen ? 'expand_less' : 'expand_more'}</span>

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

@@ -20,7 +20,7 @@ export const SearchMenuItem = (props: Props): JSX.Element => {
       index,
       item: { url },
       style: { backgroundColor: isActive ? 'lightblue' : 'white', cursor: 'pointer' },
-      className: 'text-muted mb-2 d-flex',
+      className: 'text-muted d-flex p-1',
     })
   );
 

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

@@ -58,7 +58,7 @@ const SearchModal = (): JSX.Element => {
             setHighlightedIndex,
           }) => (
             <div {...getRootProps({}, { suppressRefError: true })}>
-              <div className="text-muted d-flex justify-content-center align-items-center">
+              <div className="text-muted d-flex justify-content-center align-items-center p-1">
                 <span className="material-symbols-outlined fs-4 me-3">search</span>
                 <SearchForm
                   searchKeyword={searchKeyword}
@@ -76,14 +76,14 @@ const SearchModal = (): JSX.Element => {
               </div>
 
               {/* see: https://github.com/downshift-js/downshift/issues/582#issuecomment-423592531 */}
-              <ul {...getMenuProps({ onMouseLeave: () => { setHighlightedIndex(-1) } })} className="list-group">
-                <div className="border-top mt-3 mb-3" />
+              <ul {...getMenuProps({ onMouseLeave: () => { setHighlightedIndex(-1) } })} className="list-unstyled">
+                <div className="border-top mt-3 mb-2" />
                 <SearchMethodMenuItem
                   activeIndex={highlightedIndex}
                   searchKeyword={searchKeyword}
                   getItemProps={getItemProps}
                 />
-                <div className="border-top mt-3 mb-3" />
+                <div className="border-top mt-2 mb-2" />
                 <SearchResultMenuItem
                   activeIndex={highlightedIndex}
                   searchKeyword={searchKeyword}

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

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