Use flex: 1 for mx_Field to replace all the calc(100% - 20px) and more

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

res/css/_components.scss

@@ -50,7 +50,6 @@
 @import "./views/context_menus/_TopLeftMenu.scss";
 @import "./views/dialogs/_AddressPickerDialog.scss";
 @import "./views/dialogs/_Analytics.scss";
-@import "./views/dialogs/_BugReportDialog.scss";
 @import "./views/dialogs/_ChangelogDialog.scss";
 @import "./views/dialogs/_ChatCreateOrReuseChatDialog.scss";
 @import "./views/dialogs/_ConfirmUserActionDialog.scss";

res/css/views/auth/_AuthBody.scss

@@ -72,7 +72,6 @@ limitations under the License.
     }
 
     .mx_Field input {
-        width: 100%;
         box-sizing: border-box;
     }
 
@@ -110,7 +109,6 @@ limitations under the License.
 
 .mx_AuthBody_fieldRow > .mx_Field {
     margin: 0 5px;
-    flex: 1;
 }
 
 .mx_AuthBody_fieldRow > .mx_Field:first-child {

res/css/views/auth/_ServerConfig.scss

@@ -20,7 +20,6 @@ limitations under the License.
 }
 
 .mx_ServerConfig_fields .mx_Field {
-    flex: 1;
     margin: 0 5px;
 }
 

res/css/views/dialogs/_BugReportDialog.scss

@@ -1,25 +0,0 @@
-/*
-Copyright 2017 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-.mx_BugReportDialog .mx_Field {
-    flex: 1;
-}
-
-.mx_BugReportDialog_field_input {
-    // TODO: We should really apply this to all .mx_Field inputs.
-    // See https://github.com/vector-im/riot-web/issues/9344.
-    flex: 1;
-}

res/css/views/dialogs/_DevtoolsDialog.scss

@@ -23,7 +23,11 @@ limitations under the License.
     cursor: default !important;
 }
 
-.mx_DevTools_RoomStateExplorer_button, .mx_DevTools_ServersInRoomList_button, .mx_DevTools_RoomStateExplorer_query {
+.mx_DevTools_RoomStateExplorer_query {
+    margin-bottom: 10px;
+}
+
+.mx_DevTools_RoomStateExplorer_button, .mx_DevTools_ServersInRoomList_button {
     margin-bottom: 10px;
     width: 100%;
 }
@@ -75,7 +79,6 @@ limitations under the License.
     max-width: 684px;
     min-height: 250px;
     padding: 10px;
-    width: 100%;
 }
 
 .mx_DevTools_content .mx_Field_input {

res/css/views/dialogs/_SetPasswordDialog.scss

@@ -21,7 +21,6 @@ limitations under the License.
     color: $primary-fg-color;
     background-color: $primary-bg-color;
     font-size: 15px;
-    width: 100%;
     max-width: 280px;
     margin-bottom: 10px;
 }

res/css/views/elements/_EditableItemList.scss

@@ -42,12 +42,6 @@ limitations under the License.
     margin-right: 5px;
 }
 
-.mx_EditableItemList_newItem .mx_Field input {
-    // Use 100% of the space available for the input, but don't let the 10px
-    // padding on either side of the input to push it out of alignment.
-    width: calc(100% - 20px);
-}
-
 .mx_EditableItemList_label {
     margin-bottom: 5px;
-}
+}

res/css/views/elements/_Field.scss

@@ -42,6 +42,7 @@ limitations under the License.
     padding: 8px 9px;
     color: $primary-fg-color;
     background-color: $primary-bg-color;
+    flex: 1;
 }
 
 .mx_Field select {

res/css/views/elements/_PowerSelector.scss

@@ -20,6 +20,5 @@ limitations under the License.
 
 .mx_PowerSelector .mx_Field select,
 .mx_PowerSelector .mx_Field input {
-    width: 100%;
     box-sizing: border-box;
 }

res/css/views/settings/_EmailAddresses.scss

@@ -35,9 +35,3 @@ limitations under the License.
 .mx_ExistingEmailAddress_confirmBtn {
     margin-right: 5px;
 }
-
-.mx_EmailAddresses_new .mx_Field input {
-    // Use 100% of the space available for the input, but don't let the 10px
-    // padding on either side of the input to push it out of alignment.
-    width: calc(100% - 20px);
-}

res/css/views/settings/_PhoneNumbers.scss

@@ -36,12 +36,6 @@ limitations under the License.
     margin-right: 5px;
 }
 
-.mx_PhoneNumbers_new .mx_Field input {
-    // Use 100% of the space available for the input, but don't let the 10px
-    // padding on either side of the input to push it out of alignment.
-    width: calc(100% - 20px);
-}
-
 .mx_PhoneNumbers_input {
     display: flex;
     align-items: center;

res/css/views/settings/_ProfileSettings.scss

@@ -22,11 +22,6 @@ limitations under the License.
     flex-grow: 1;
 }
 
-.mx_ProfileSettings_controls .mx_Field #profileDisplayName,
-.mx_ProfileSettings_controls .mx_Field #profileTopic {
-    width: calc(100% - 20px); // subtract 10px padding on left and right
-}
-
 .mx_ProfileSettings_controls .mx_Field #profileTopic {
     height: 4em;
 }

res/css/views/settings/tabs/room/_GeneralRoomSettingsTab.scss

@@ -17,7 +17,3 @@ limitations under the License.
 .mx_GeneralRoomSettingsTab_profileSection {
     margin-top: 10px;
 }
-
-.mx_GeneralRoomSettingsTab .mx_AliasSettings .mx_Field select {
-    width: 100%;
-}

res/css/views/settings/tabs/user/_GeneralUserSettingsTab.scss

@@ -14,33 +14,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_GeneralUserSettingsTab_changePassword,
-.mx_GeneralUserSettingsTab_themeSection {
-    display: block;
-}
-
 .mx_GeneralUserSettingsTab_changePassword .mx_Field,
 .mx_GeneralUserSettingsTab_themeSection .mx_Field {
-    display: block;
     margin-right: 100px; // Align with the other fields on the page
 }
 
-.mx_GeneralUserSettingsTab_changePassword .mx_Field input {
-    display: block;
-    width: calc(100% - 20px); // subtract 10px padding on left and right
-}
-
 .mx_GeneralUserSettingsTab_changePassword .mx_Field:first-child {
     margin-top: 0;
 }
 
-.mx_GeneralUserSettingsTab_themeSection .mx_Field select {
-    display: block;
-    width: 100%;
-}
-
 .mx_GeneralUserSettingsTab_accountSection > .mx_EmailAddresses,
 .mx_GeneralUserSettingsTab_accountSection > .mx_PhoneNumbers,
 .mx_GeneralUserSettingsTab_languageInput {
     margin-right: 100px; // Align with the other fields on the page
-}
+}

res/css/views/settings/tabs/user/_PreferencesUserSettingsTab.scss

@@ -17,11 +17,3 @@ limitations under the License.
 .mx_PreferencesUserSettingsTab .mx_Field {
     margin-right: 100px; // Align with the rest of the controls
 }
-
-.mx_PreferencesUserSettingsTab .mx_Field input {
-    display: block;
-
-    // Subtract 10px padding on left and right
-    // This is to keep the input aligned with the rest of the tab's controls.
-    width: calc(100% - 20px);
-}

res/css/views/settings/tabs/user/_VoiceUserSettingsTab.scss

@@ -14,11 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_VoiceUserSettingsTab .mx_Field select {
-    width: 100%;
-    max-width: 100%;
-}
-
 .mx_VoiceUserSettingsTab .mx_Field {
     margin-right: 100px; // align with the rest of the fields
 }