sort control have static width

apps/app/src/components/SearchPage/SearchControl.tsx

@@ -100,7 +100,7 @@ const SearchControl = React.memo((props: Props): JSX.Element => {
       <div className="search-control d-flex align-items-center py-md-2 py-3 px-md-4 px-3 border-bottom border-gray">
         {/* sort option */}
         {isEnableSort && (
-          <div className="d-flex me-auto">
+          <div className="flex-grow-1">
             <SortControl
               sort={sort}
               order={order}
@@ -122,7 +122,7 @@ const SearchControl = React.memo((props: Props): JSX.Element => {
                 </span>
               </button>
             </div>
-            <div className="d-none d-lg-flex align-items-center ms-auto search-control-include-options">
+            <div className="d-none d-lg-flex align-items-center search-control-include-options">
               <div className="px-2 py-1">
                 <div className="form-check form-check-succsess">
                   <input

apps/app/src/components/SearchPage/SortControl.module.scss

@@ -0,0 +1,3 @@
+.sort-control {
+  width: 250px;
+}

apps/app/src/components/SearchPage/SortControl.tsx

@@ -5,6 +5,8 @@ import { useTranslation } from 'next-i18next';
 
 import { SORT_AXIS, SORT_ORDER } from '../../interfaces/search';
 
+import styles from './SortControl.module.scss';
+
 const { DESC, ASC } = SORT_ORDER;
 
 type Props = {
@@ -28,29 +30,32 @@ const SortControl: FC <Props> = (props: Props) => {
 
   return (
     <>
-      <div className="d-flex">
-        <div className="btn-group">
-          <button className="d-flex btn btn-sm btn-outline-neutral-secondary rounded-pill" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-            <span className="material-symbols-outlined text-secondary">sort</span>
-            <span className="ms-2 me-6 text-secondary">{t(`search_result.sort_axis.${sort}`)}</span>
-            <span className="material-symbols-outlined text-secondary">expand_more</span>
-          </button>
-          <ul className="dropdown-menu">
-            {Object.values(SORT_AXIS).map((sortAxis) => {
-              const nextOrder = (sort !== sortAxis || order === ASC) ? DESC : ASC;
-              return (
-                <button
-                  key={sortAxis}
-                  className="dropdown-item"
-                  type="button"
-                  onClick={() => { onClickChangeSort(sortAxis, nextOrder) }}
-                >
-                  <span>{t(`search_result.sort_axis.${sortAxis}`)}</span>
-                </button>
-              );
-            })}
-          </ul>
-        </div>
+      <div className={`btn-group ${styles['sort-control']}`}>
+        <button
+          className="d-flex align-items-center btn btn-sm btn-outline-neutral-secondary rounded-pill"
+          type="button"
+          data-bs-toggle="dropdown"
+          aria-expanded="false"
+        >
+          <span className="material-symbols-outlined py-0">sort</span>
+          <span className="ms-2 me-auto">{t(`search_result.sort_axis.${sort}`)}</span>
+          <span className="material-symbols-outlined py-0">expand_more</span>
+        </button>
+        <ul className="dropdown-menu">
+          {Object.values(SORT_AXIS).map((sortAxis) => {
+            const nextOrder = (sort !== sortAxis || order === ASC) ? DESC : ASC;
+            return (
+              <button
+                key={sortAxis}
+                className="dropdown-item"
+                type="button"
+                onClick={() => { onClickChangeSort(sortAxis, nextOrder) }}
+              >
+                <span>{t(`search_result.sort_axis.${sortAxis}`)}</span>
+              </button>
+            );
+          })}
+        </ul>
       </div>
     </>
   );