Move composer buttons to top (#35749)

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

@@ -256,7 +256,6 @@ class ComposeForm extends ImmutablePureComponent {
         <Warning />
 
         <div className={classNames('compose-form__highlightable', { active: highlighted })} ref={this.setRef}>
-          <div className='compose-form__scrollable'>
           <EditIndicator />
 
           {this.props.spoiler && (
@@ -285,6 +284,11 @@ class ComposeForm extends ImmutablePureComponent {
             </div>
           )}
 
+          <div className='compose-form__dropdowns'>
+            <PrivacyDropdownContainer disabled={this.props.isEditing} />
+            <LanguageDropdown />
+          </div>
+
           <AutosuggestTextarea
             ref={this.textareaRef}
             placeholder={intl.formatMessage(messages.placeholder)}
@@ -301,17 +305,11 @@ class ComposeForm extends ImmutablePureComponent {
             autoFocus={autoFocus}
             lang={this.props.lang}
           />
-          </div>
 
           <UploadForm />
           <PollForm />
 
           <div className='compose-form__footer'>
-            <div className='compose-form__dropdowns'>
-              <PrivacyDropdownContainer disabled={this.props.isEditing} />
-              <LanguageDropdown />
-            </div>
-
             <div className='compose-form__actions'>
               <div className='compose-form__buttons'>
                 <UploadButtonContainer />

app/javascript/mastodon/features/compose/components/language_dropdown.tsx

@@ -396,7 +396,7 @@ export const LanguageDropdown: React.FC = () => {
           warning: guess !== '' && guess !== value,
         })}
       >
-        <Icon id='' icon={TranslateIcon} />
+        <Icon id='translate' icon={TranslateIcon} />
         <span className='dropdown-button__label'>{current[2] ?? value}</span>
       </button>
 

app/javascript/styles/mastodon/components.scss

@@ -602,15 +602,12 @@ body > [data-popper-placement] {
   &__highlightable {
     display: flex;
     flex-direction: column;
-    gap: 16px;
     flex: 0 1 auto;
     border-radius: 4px;
     border: 1px solid var(--background-border-color);
     transition: border-color 300ms linear;
-    min-height: 0;
     position: relative;
     background: var(--input-background-color);
-    overflow-y: auto;
 
     &.active {
       transition: none;
@@ -705,6 +702,8 @@ body > [data-popper-placement] {
     display: flex;
     align-items: center;
     gap: 8px;
+    margin: 8px;
+    flex-wrap: wrap;
 
     & > div {
       overflow: hidden;
@@ -715,6 +714,7 @@ body > [data-popper-placement] {
   &__uploads {
     padding: 0 12px;
     aspect-ratio: 3/2;
+    flex-shrink: 0;
   }
 
   .media-gallery {
@@ -813,7 +813,6 @@ body > [data-popper-placement] {
     flex-direction: column;
     gap: 12px;
     padding: 12px;
-    padding-top: 0;
   }
 
   &__submit {
@@ -874,6 +873,7 @@ body > [data-popper-placement] {
   }
 
   &__poll {
+    margin-top: 8px;
     display: flex;
     flex-direction: column;
     align-self: stretch;
@@ -3518,11 +3518,10 @@ a.account__display-name {
   display: flex;
   flex-direction: column;
   height: calc(100% - 10px);
-  overflow-y: hidden;
+  overflow-y: auto;
 
   .compose-form {
     flex: 1 1 auto;
-    min-height: 0;
   }
 }