Merge pull request #182 from glitch-soc/wide-tootbox-panel

Full-width tootbox panel to make room for buttons

app/javascript/mastodon/features/compose/components/compose_form.js

@@ -247,36 +247,34 @@ export default class ComposeForm extends ImmutablePureComponent {
           <UploadFormContainer />
         </div>
 
-        <div className='compose-form__buttons-wrapper'>
-          <div className='compose-form__buttons'>
-            <UploadButtonContainer />
-            <DoodleButtonContainer />
-            <PrivacyDropdownContainer />
-            <ComposeAdvancedOptionsContainer />
-            <SensitiveButtonContainer />
-            <SpoilerButtonContainer />
-          </div>
+        <div className='compose-form__buttons'>
+          <UploadButtonContainer />
+          <DoodleButtonContainer />
+          <PrivacyDropdownContainer />
+          <ComposeAdvancedOptionsContainer />
+          <SensitiveButtonContainer />
+          <SpoilerButtonContainer />
+        </div>
 
-          <div className='compose-form__publish'>
-            <div className='character-counter__wrapper'><CharacterCounter max={500} text={text} /></div>
-            <div className='compose-form__publish-button-wrapper'>
-              {
-                showSideArm ?
-                  <Button
-                    className='compose-form__publish__side-arm'
-                    text={publishText2}
-                    onClick={this.handleSubmit2}
-                    disabled={submitDisabled}
-                  /> : ''
-              }
-              <Button
-                className='compose-form__publish__primary'
-                text={publishText}
-                onClick={this.handleSubmit}
-                disabled={submitDisabled}
-                block
-              />
-            </div>
+        <div className='compose-form__publish'>
+          <div className='character-counter__wrapper'><CharacterCounter max={500} text={text} /></div>
+          <div className='compose-form__publish-button-wrapper'>
+            {
+              showSideArm ?
+                <Button
+                  className='compose-form__publish__side-arm'
+                  text={publishText2}
+                  onClick={this.handleSubmit2}
+                  disabled={submitDisabled}
+                /> : ''
+            }
+            <Button
+              className='compose-form__publish__primary'
+              text={publishText}
+              onClick={this.handleSubmit}
+              disabled={submitDisabled}
+              block
+            />
           </div>
         </div>
       </div>

app/javascript/styles/components.scss

@@ -302,7 +302,6 @@
   font-family: inherit;
   font-size: 14px;
   background: $simple-background-color;
-  border-radius: 0 0 4px;
 }
 
 .compose-form__buttons-wrapper {
@@ -452,6 +451,7 @@
 
 .compose-form__publish {
   display: flex;
+  justify-content: flex-end;
   min-width: 0;
 }