Repair DevTools button padding by centralizing styles

This moves the padding styles for dialog content to the .mx_Dialog rule. In
addition, it fixes vector-im/riot-web#7548 where the DevTools buttons had double
padding.

Signed-off-by: J. Ryan Stinnett <jryans@gmail.com>

res/css/_common.scss

@@ -170,8 +170,7 @@ textarea {
     font-weight: 300;
     font-size: 15px;
     position: relative;
-    padding-left: 58px;
-    padding-bottom: 36px;
+    padding: 0 58px 36px;
     width: 60%;
     max-width: 704px;
     box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.2);
@@ -216,14 +215,13 @@ textarea {
 }
 
 .mx_Dialog_content {
-    margin: 24px 58px 68px 0;
+    margin: 24px 0 68px;
     font-size: 14px;
     color: $primary-fg-color;
     word-wrap: break-word;
 }
 
 .mx_Dialog_buttons {
-    padding-right: 58px;
     text-align: right;
 }
 

res/css/views/dialogs/_DevtoolsDialog.scss

@@ -14,10 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_DevTools_dialog {
-    padding-right: 58px;
-}
-
 .mx_DevTools_content {
     margin: 10px 0;
 }

res/css/views/dialogs/_ShareDialog.scss

@@ -14,11 +14,6 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_ShareDialog {
-    // this is to center the content
-    padding-right: 58px;
-}
-
 .mx_ShareDialog hr {
     margin-top: 25px;
     margin-bottom: 25px;

res/css/views/dialogs/_UnknownDeviceDialog.scss

@@ -20,9 +20,6 @@ limitations under the License.
     // is a pain in the ass. plus might as well make the dialog big given how
     // important it is.
     height: 100%;
-
-    // position the gemini scrollbar nicely
-    padding-right: 58px;
 }
 
 .mx_UnknownDeviceDialog {

src/components/views/dialogs/DevtoolsDialog.js

@@ -625,7 +625,7 @@ export default class DevtoolsDialog extends React.Component {
         let body;
 
         if (this.state.mode) {
-            body = <div className="mx_DevTools_dialog">
+            body = <div>
                 <div className="mx_DevTools_label_left">{ this.state.mode.getLabel() }</div>
                 <div className="mx_DevTools_label_right">Room ID: { this.props.roomId }</div>
                 <div className="mx_DevTools_label_bottom" />
@@ -634,7 +634,7 @@ export default class DevtoolsDialog extends React.Component {
         } else {
             const classes = "mx_DevTools_RoomStateExplorer_button";
             body = <div>
-                <div className="mx_DevTools_dialog">
+                <div>
                     <div className="mx_DevTools_label_left">{ _t('Toolbox') }</div>
                     <div className="mx_DevTools_label_right">Room ID: { this.props.roomId }</div>
                     <div className="mx_DevTools_label_bottom" />