desktop and mobile in run

mattermost · Feb 12, 2024 · 8b94095 · 8b94095
1 parent 445bfcb
commit 8b94095
Show file tree

Hide file tree

Showing 19 changed files with 320 additions and 371 deletions.
diff --git a/webapp/channels/src/components/__snapshots__/setting_item_max.test.tsx.snap b/webapp/channels/src/components/__snapshots__/setting_item_max.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`components/SettingItemMax should match snapshot 1`] = `
     title
   </h4>
   <div
-    className="col-sm-12"
+    className="sectionContent col-sm-10 col-sm-offset-2"
   >
     <div
       className="setting-list"
@@ -72,7 +72,7 @@ exports[`components/SettingItemMax should match snapshot, on clientError 1`] = `
     title
   </h4>
   <div
-    className="col-sm-12"
+    className="sectionContent col-sm-10 col-sm-offset-2"
   >
     <div
       className="setting-list"
@@ -143,7 +143,7 @@ exports[`components/SettingItemMax should match snapshot, on serverError 1`] = `
     title
   </h4>
   <div
-    className="col-sm-12"
+    className="sectionContent col-sm-10 col-sm-offset-2"
   >
     <div
       className="setting-list"
@@ -214,7 +214,7 @@ exports[`components/SettingItemMax should match snapshot, with new saveTextButto
     title
   </h4>
   <div
-    className="col-sm-12"
+    className="sectionContent col-sm-10 col-sm-offset-2"
   >
     <div
       className="setting-list"
@@ -270,7 +270,7 @@ exports[`components/SettingItemMax should match snapshot, without submit 1`] = `
     title
   </h4>
   <div
-    className="col-sm-12"
+    className="sectionContent col-sm-10 col-sm-offset-2"
   >
     <div
       className="setting-list"

diff --git a/webapp/channels/src/components/setting_item_max.tsx b/webapp/channels/src/components/setting_item_max.tsx
@@ -1,6 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import classNames from 'classnames';
 import React from 'react';
 import type {ReactNode} from 'react';
 import {FormattedMessage} from 'react-intl';
@@ -44,7 +45,7 @@ type Props = {
     submitExtra?: ReactNode;
     saving?: boolean;
     title?: ReactNode;
-    width?: string;
+    isFullWidth?: boolean;
     cancelButtonText?: ReactNode;
     shiftEnter?: boolean;
     saveButtonText?: string;
@@ -177,14 +178,6 @@ export default class SettingItemMax extends React.PureComponent<Props> {
         }
 
         const inputs = this.props.inputs;
-        let widthClass;
-        if (this.props.width === 'full') {
-            widthClass = 'col-sm-12';
-        } else if (this.props.width === 'medium') {
-            widthClass = 'col-sm-10 col-sm-offset-2';
-        } else {
-            widthClass = 'col-sm-9 col-sm-offset-3';
-        }
 
         let title;
         if (this.props.title) {
@@ -231,7 +224,12 @@ export default class SettingItemMax extends React.PureComponent<Props> {
                 className={`section-max form-horizontal ${this.props.containerStyle}`}
             >
                 {title}
-                <div className={widthClass}>
+                <div
+                    className={classNames('sectionContent', {
+                        'col-sm-12': this.props.isFullWidth,
+                        'col-sm-10 col-sm-offset-2': !this.props.isFullWidth,
+                    })}
+                >
                     <div
                         tabIndex={-1}
                         ref={this.settingList}

diff --git a/webapp/channels/src/components/user_settings/display/manage_languages/manage_languages.tsx b/webapp/channels/src/components/user_settings/display/manage_languages/manage_languages.tsx
@@ -256,7 +256,6 @@ export class ManageLanguage extends React.PureComponent<Props, State> {
                         defaultMessage='Language'
                     />
                 }
-                width='medium'
                 submit={this.changeLanguage}
                 saving={this.state.isSaving}
                 inputs={[input]}

diff --git a/webapp/channels/src/components/user_settings/display/manage_timezones/manage_timezones.tsx b/webapp/channels/src/components/user_settings/display/manage_timezones/manage_timezones.tsx
@@ -245,7 +245,6 @@ export default class ManageTimezones extends React.PureComponent<Props, State> {
                     />
                 }
                 containerStyle='timezone-container'
-                width='medium'
                 submit={this.changeTimezone}
                 saving={this.state.isSaving}
                 inputs={inputs}

diff --git a/...channels/src/components/user_settings/display/user_settings_theme/user_settings_theme.tsx b/...channels/src/components/user_settings/display/user_settings_theme/user_settings_theme.tsx
@@ -309,7 +309,7 @@ export default class ThemeSetting extends React.PureComponent<Props, State> {
                     disableEnterSubmit={true}
                     saving={this.state.isSaving}
                     serverError={serverError}
-                    width='full'
+                    isFullWidth={true}
                     updateSection={this.handleUpdateSection}
                 />
             );