add col-12 only in SearchUsernameTypeahead

apps/app/src/components/Admin/AuditLog/DateRangePicker.tsx

@@ -17,22 +17,20 @@ const CustomInput = forwardRef<HTMLInputElement, CustomInputProps>((props: Custo
   const placeholder = `${format(date, dateFormat)} - ${format(addDays(date, 1), dateFormat)}`;
 
   return (
-    <div className="col-12">
-      <div className="input-group admin-audit-log">
-        <span className="input-group-text">
-          <i className="fa fa-fw fa-calendar" />
-        </span>
-        <input
-          ref={ref}
-          type="text"
-          value={props?.value}
-          onFocus={props?.onFocus}
-          onChange={props?.onChange}
-          placeholder={placeholder}
-          className="form-control date-range-picker"
-          aria-describedby="basic-addon1"
-        />
-      </div>
+    <div className="input-group admin-audit-log">
+      <span className="input-group-text">
+        <i className="fa fa-fw fa-calendar" />
+      </span>
+      <input
+        ref={ref}
+        type="text"
+        value={props?.value}
+        onFocus={props?.onFocus}
+        onChange={props?.onChange}
+        placeholder={placeholder}
+        className="form-control date-range-picker"
+        aria-describedby="basic-addon1"
+      />
     </div>
   );
 });

apps/app/src/components/Admin/AuditLog/SearchUsernameTypeahead.tsx

@@ -109,27 +109,25 @@ const SearchUsernameTypeaheadSubstance: ForwardRefRenderFunction<IClearable, Pro
   }));
 
   return (
-    <div className="col-12">
-      <div className="input-group me-2">
-        <span className="input-group-text">
-          <i className="icon-people" />
-        </span>
-        <AsyncTypeahead
-          ref={typeaheadRef}
-          id="search-username-typeahead-asynctypeahead"
-          multiple
-          delay={400}
-          minLength={0}
-          placeholder={t('admin:audit_log_management.username')}
-          caseSensitive={false}
-          isLoading={isLoading}
-          options={allUser}
-          onSearch={searchHandler}
-          onChange={changeHandler}
-          renderMenu={renderMenu}
-          labelKey={(option: UserDataType) => `${option.username}`}
-        />
-      </div>
+    <div className="input-group me-2">
+      <span className="input-group-text">
+        <i className="icon-people" />
+      </span>
+      <AsyncTypeahead
+        ref={typeaheadRef}
+        id="search-username-typeahead-asynctypeahead"
+        multiple
+        delay={400}
+        minLength={0}
+        placeholder={t('admin:audit_log_management.username')}
+        caseSensitive={false}
+        isLoading={isLoading}
+        options={allUser}
+        onSearch={searchHandler}
+        onChange={changeHandler}
+        renderMenu={renderMenu}
+        labelKey={(option: UserDataType) => `${option.username}`}
+      />
     </div>
   );
 });

apps/app/src/components/Admin/AuditLog/SelectActionDropdown.tsx

@@ -76,50 +76,48 @@ export const SelectActionDropdown: FC<Props> = (props: Props) => {
   }, [onChangeMultipleAction]);
 
   return (
-    <div className="col-12">
-      <div className="btn-group me-2 admin-audit-log">
-        <button className="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
-          <i className="fa fa-fw fa-bolt" />{t('admin:audit_log_management.action')}
-        </button>
-        <ul className="dropdown-menu select-action-dropdown" aria-labelledby="dropdownMenuButton">
-          {dropdownItems.map(item => (
-            <div key={item.actionCategory}>
-              <div className="dropdown-item">
-                <div className="px-2 m-0">
-                  <input
-                    type="checkbox"
-                    className="form-check-input"
-                    defaultChecked
-                    onChange={(e) => { multipleActionCheckboxChangedHandler(item.actions, e.target.checked) }}
-                  />
-                  <label className="form-label form-check-label">{t(`admin:audit_log_action_category.${item.actionCategory}`)}</label>
-                </div>
+    <div className="btn-group me-2 admin-audit-log">
+      <button className="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
+        <i className="fa fa-fw fa-bolt" />{t('admin:audit_log_management.action')}
+      </button>
+      <ul className="dropdown-menu select-action-dropdown" aria-labelledby="dropdownMenuButton">
+        {dropdownItems.map(item => (
+          <div key={item.actionCategory}>
+            <div className="dropdown-item">
+              <div className="px-2 m-0">
+                <input
+                  type="checkbox"
+                  className="form-check-input"
+                  defaultChecked
+                  onChange={(e) => { multipleActionCheckboxChangedHandler(item.actions, e.target.checked) }}
+                />
+                <label className="form-label form-check-label">{t(`admin:audit_log_action_category.${item.actionCategory}`)}</label>
               </div>
-              {
-                item.actions.map(action => (
-                  <div className="dropdown-item" key={action}>
-                    <div className="px-4 m-0">
-                      <input
-                        type="checkbox"
-                        className="form-check-input"
-                        id={`checkbox${action}`}
-                        onChange={() => { actionCheckboxChangedHandler(action) }}
-                        checked={actionMap.get(action)}
-                      />
-                      <label
-                        className="form-check-label"
-                        htmlFor={`checkbox${action}`}
-                      >
-                        {t(`admin:audit_log_action.${action}`)}
-                      </label>
-                    </div>
-                  </div>
-                ))
-              }
             </div>
-          ))}
-        </ul>
-      </div>
+            {
+              item.actions.map(action => (
+                <div className="dropdown-item" key={action}>
+                  <div className="px-4 m-0">
+                    <input
+                      type="checkbox"
+                      className="form-check-input"
+                      id={`checkbox${action}`}
+                      onChange={() => { actionCheckboxChangedHandler(action) }}
+                      checked={actionMap.get(action)}
+                    />
+                    <label
+                      className="form-check-label"
+                      htmlFor={`checkbox${action}`}
+                    >
+                      {t(`admin:audit_log_action.${action}`)}
+                    </label>
+                  </div>
+                </div>
+              ))
+            }
+          </div>
+        ))}
+      </ul>
     </div>
   );
 };

apps/app/src/components/Admin/AuditLogManagement.tsx

@@ -172,11 +172,13 @@ export const AuditLogManagement: FC = () => {
         <AuditLogSettings />
       ) : (
         <>
-          <div className="mb-3 row row-cols-lg-auto g-3 align-items-center">
-            <SearchUsernameTypeahead
-              ref={typeaheadRef}
-              onChange={setUsernamesHandler}
-            />
+          <div className="mb-3 row row-cols-lg-auto g-3">
+            <div className="col-12">
+              <SearchUsernameTypeahead
+                ref={typeaheadRef}
+                onChange={setUsernamesHandler}
+              />
+            </div>
 
             <DateRangePicker
               startDate={startDate}