128848 remove form-inline

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

@@ -172,7 +172,7 @@ export const AuditLogManagement: FC = () => {
         <AuditLogSettings />
       ) : (
         <>
-          <div className="form-inline mb-3">
+          <div className="mb-3">
             <SearchUsernameTypeahead
               ref={typeaheadRef}
               onChange={setUsernamesHandler}

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

@@ -199,7 +199,7 @@ const G2GDataTransferExportForm = (props: Props): JSX.Element => {
 
   return (
     <>
-      <form className="form-inline mt-3">
+      <form className="mt-3">
         <div>
           <button type="button" className="btn btn-sm btn-outline-secondary mr-2" onClick={checkAll}>
             <i className="fa fa-check-square-o"></i> {t('admin:export_management.check_all')}

apps/app/src/components/Admin/ImportData/GrowiArchive/ImportForm.jsx

@@ -446,7 +446,7 @@ class ImportForm extends React.Component {
 
     return (
       <>
-        <form className="form-inline">
+        <form>
           <div>
             <button type="button" className="btn btn-sm btn-outline-secondary mr-2" onClick={this.checkAll}>
               <i className="fa fa-check-square-o"></i> {t('admin:export_management.check_all')}

apps/app/src/components/Admin/Notification/ManageGlobalNotification.tsx

@@ -143,7 +143,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
           </div>
 
           <h3>{t('notification_settings.notify_to')}</h3>
-          <div className="form-inline">
+          <div>
             <div className="custom-control custom-radio">
               <input
                 className="custom-control-input"

apps/app/src/components/Admin/SlackIntegration/CustomBotWithoutProxySettingsAccordion.jsx

@@ -145,7 +145,7 @@ const CustomBotWithoutProxySettingsAccordion = (props) => {
           <i className="icon-info">{t('admin:slack_integration.accordion.test_connection_only_public_channel')}</i>
         </p>
         <div className="d-flex justify-content-center">
-          <form className="form-row align-items-center" onSubmit={e => submitForm(e)}>
+          <form className="align-items-center" onSubmit={e => submitForm(e)}>
             <div className="input-group col-8">
               <div>
                 <span className="input-group-text" id="slack-channel-addon"><i className="fa fa-hashtag" /></span>

apps/app/src/components/Admin/SlackIntegration/WithProxyAccordions.jsx

@@ -243,7 +243,7 @@ const TestProcess = ({
         <i className="icon-info">{t('admin:slack_integration.accordion.test_connection_only_public_channel')}</i>
       </p>
       <div className="d-flex justify-content-center">
-        <form className="form-row justify-content-center" onSubmit={e => submitForm(e)}>
+        <form className="justify-content-center" onSubmit={e => submitForm(e)}>
           <div className="input-group col-8">
             <div>
               <span className="input-group-text" id="slack-channel-addon"><i className="fa fa-hashtag" /></span>

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

@@ -165,7 +165,7 @@ const UserManagement = (props: UserManagementProps) => {
           </div>
 
           <div className="offset-md-1 col-md-6 my-2">
-            <div className="form-inline">
+            <div>
               {renderCheckbox('all', 'All', 'secondary')}
               {renderCheckbox('registered', 'Approval Pending', 'info')}
               {renderCheckbox('active', 'Active', 'success')}

apps/app/src/components/PageComment/CommentEditor.tsx

@@ -335,7 +335,7 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
 
             {isSlackConfigured && isSlackEnabled != null
               && (
-                <div className="form-inline align-self-center mr-md-2">
+                <div className="align-self-center mr-md-2">
                   <SlackNotification
                     isSlackEnabled={isSlackEnabled}
                     slackChannels={slackChannels}

apps/app/src/components/PageEditor/EditorNavbarBottom.tsx

@@ -101,11 +101,11 @@ const EditorNavbarBottom = (): JSX.Element => {
       )
       }
       <div className={`flex-expand-horiz align-items-center border-top px-2 px-md-3 ${additionalClasses.join(' ')}`}>
-        <form className="form-inline">
+        <form>
           { isDeviceSmallerThanMd && renderDrawerButton() }
           { isOptionsSelectorEnabled && !isDeviceSmallerThanMd && <OptionsSelector /> }
         </form>
-        <form className="form-inline flex-nowrap ml-auto">
+        <form className="flex-nowrap ml-auto">
           {/* Responsive Design for the SlackNotification */}
           {/* Button or the normal Slack banner */}
           {isSlackConfigured && (isDeviceSmallerThanMd ? (
@@ -141,7 +141,7 @@ const EditorNavbarBottom = (): JSX.Element => {
         <Collapse isOpen={isExpanded}>
           <div className="px-2"> {/* set padding for border-top */}
             <div className={`navbar navbar-expand border-top px-0 ${additionalClasses.join(' ')}`}>
-              <form className="form-inline ml-auto">
+              <form className="ml-auto">
                 <OptionsSelector />
               </form>
             </div>

apps/app/src/components/PrivateLegacyPages.tsx

@@ -89,7 +89,7 @@ const SearchResultListHead = React.memo((props: SearchResultListHeadProps): JSX.
 
   return (
     <>
-      <div className="form-inline d-flex align-items-center justify-content-between">
+      <div className="d-flex align-items-center justify-content-between">
         <div className="text-nowrap">
           {t('search_result.result_meta')}
           <span className="ml-3">{`${leftNum}-${rightNum}`} / {total}</span>

apps/app/src/components/SavePageControls.tsx

@@ -74,7 +74,7 @@ export const SavePageControls = (props: SavePageControlsProps): JSX.Element | nu
   const labelOverwriteScopes = t('page_edit.overwrite_scopes', { operation: labelSubmitButton });
 
   return (
-    <div className="d-flex align-items-center form-inline flex-nowrap">
+    <div className="d-flex align-items-center flex-nowrap">
 
       {isAclEnabled
         && (

apps/app/src/components/SearchPage.tsx

@@ -57,7 +57,7 @@ const SearchResultListHead = React.memo((props: SearchResultListHeadProps): JSX.
   }
 
   return (
-    <div className="form-inline d-flex align-items-center justify-content-between">
+    <div className="d-flex align-items-center justify-content-between">
       <div className="text-nowrap">
         {t('search_result.result_meta')}
         <span className="search-result-keyword ml-2">{`${searchingKeyword}`}</span>

apps/app/src/components/Sidebar/AppearanceModeDropdown.tsx

@@ -75,7 +75,7 @@ export const AppearanceModeDropdown:FC<AppearanceModeDropdownProps> = (props: Ap
       <>
         <h6 className="dropdown-header">{t(isEditMode ? 'personal_dropdown.sidebar_mode_editor' : 'personal_dropdown.sidebar_mode')}</h6>
         <form className="px-4">
-          <div className="form-row justify-content-center">
+          <div className="justify-content-center">
             <div className="col-auto mb-0 d-flex align-items-center">
               <IconWithTooltip id={isEditMode ? 'iwt-sidebar-editor-drawer' : 'iwt-sidebar-drawer'} label="Drawer" additionalClasses="grw-sidebar-mode-icon">
                 <SidebarDrawerIcon />
@@ -129,7 +129,7 @@ export const AppearanceModeDropdown:FC<AppearanceModeDropdownProps> = (props: Ap
             {dropdownDivider}
             <h6 className="dropdown-header">{t('personal_dropdown.color_mode')}</h6>
             <form className="px-4">
-              <div className="form-row justify-content-center">
+              <div className="justify-content-center">
                 <div className="col-auto d-flex align-items-center">
                   <IconWithTooltip id="iwt-light" label="Light" additionalClasses={useOsSettings ? 'grw-color-mode-icon-muted' : 'grw-color-mode-icon'}>
                     <SunIcon />
@@ -150,7 +150,7 @@ export const AppearanceModeDropdown:FC<AppearanceModeDropdownProps> = (props: Ap
                   </IconWithTooltip>
                 </div>
               </div>
-              <div className="form-row">
+              <div>
                 <div className="col-auto">
                   <div className="custom-control custom-checkbox">
                     <input

apps/app/src/styles/_editor.scss

@@ -117,15 +117,6 @@
 
     .grw-taglabels-container {
       margin-bottom: 0;
-
-      // To scroll tags horizontally
-      .grw-tag-labels.form-inline {
-        flex-flow: row nowrap;
-        width: 100%;
-        overflow-x: auto;
-        overflow-y: hidden;
-        scrollbar-width: thin;
-      }
     }
   }