add grid

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

@@ -17,22 +17,22 @@ const CustomInput = forwardRef<HTMLInputElement, CustomInputProps>((props: Custo
   const placeholder = `${format(date, dateFormat)} - ${format(addDays(date, 1), dateFormat)}`;
 
   return (
-    <div className="input-group admin-audit-log">
-      <div>
+    <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>
-      <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,27 @@ const SearchUsernameTypeaheadSubstance: ForwardRefRenderFunction<IClearable, Pro
   }));
 
   return (
-    <div className="input-group me-2">
-      <div>
+    <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>
-      <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,7 +76,7 @@ export const SelectActionDropdown: FC<Props> = (props: Props) => {
   }, [onChangeMultipleAction]);
 
   return (
-    <div className="btn-group me-2 admin-audit-log">
+    <div className="btn-group me-2 admin-audit-log col-12">
       <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>

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

@@ -172,7 +172,7 @@ export const AuditLogManagement: FC = () => {
         <AuditLogSettings />
       ) : (
         <>
-          <div className="mb-3">
+          <div className="mb-3 row row-cols-lg-auto g-3 align-items-center">
             <SearchUsernameTypeahead
               ref={typeaheadRef}
               onChange={setUsernamesHandler}
@@ -191,7 +191,7 @@ export const AuditLogManagement: FC = () => {
               onChangeMultipleAction={multipleActionCheckboxChangedHandler}
             />
 
-            <button type="button" className="btn btn-link" onClick={clearButtonPushedHandler}>
+            <button type="button" className="btn btn-link col-12" onClick={clearButtonPushedHandler}>
               {t('admin:audit_log_management.clear')}
             </button>
           </div>

apps/app/src/server/service/config-loader.ts

@@ -614,7 +614,7 @@ const ENV_VAR_NAME_TO_CONFIG_INFO = {
     ns: 'crowi',
     key: 'app:auditLogEnabled',
     type: ValueType.BOOLEAN,
-    default: false,
+    default: true,
   },
   ACTIVITY_EXPIRATION_SECONDS: {
     ns: 'crowi',