Move composer buttons to top (#35749)

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

@@ -256,62 +256,60 @@ 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 && (
-              <div className='spoiler-input'>
-                <div className='spoiler-input__border' />
-
-                <AutosuggestInput
-                  placeholder={intl.formatMessage(messages.spoiler_placeholder)}
-                  value={this.props.spoilerText}
-                  disabled={isSubmitting}
-                  onChange={this.handleChangeSpoilerText}
-                  onKeyDown={this.handleKeyDownSpoiler}
-                  ref={this.setSpoilerText}
-                  suggestions={this.props.suggestions}
-                  onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
-                  onSuggestionsClearRequested={this.onSuggestionsClearRequested}
-                  onSuggestionSelected={this.onSpoilerSuggestionSelected}
-                  searchTokens={[':']}
-                  id='cw-spoiler-input'
-                  className='spoiler-input__input'
-                  lang={this.props.lang}
-                  spellCheck
-                />
-
-                <div className='spoiler-input__border' />
-              </div>
-            )}
-
-            <AutosuggestTextarea
-              ref={this.textareaRef}
-              placeholder={intl.formatMessage(messages.placeholder)}
-              disabled={isSubmitting}
-              value={this.props.text}
-              onChange={this.handleChange}
-              suggestions={this.props.suggestions}
-              onFocus={this.handleFocus}
-              onKeyDown={this.handleKeyDownPost}
-              onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
-              onSuggestionsClearRequested={this.onSuggestionsClearRequested}
-              onSuggestionSelected={this.onSuggestionSelected}
-              onPaste={onPaste}
-              autoFocus={autoFocus}
-              lang={this.props.lang}
-            />
+          <EditIndicator />
+
+          {this.props.spoiler && (
+            <div className='spoiler-input'>
+              <div className='spoiler-input__border' />
+
+              <AutosuggestInput
+                placeholder={intl.formatMessage(messages.spoiler_placeholder)}
+                value={this.props.spoilerText}
+                disabled={isSubmitting}
+                onChange={this.handleChangeSpoilerText}
+                onKeyDown={this.handleKeyDownSpoiler}
+                ref={this.setSpoilerText}
+                suggestions={this.props.suggestions}
+                onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
+                onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+                onSuggestionSelected={this.onSpoilerSuggestionSelected}
+                searchTokens={[':']}
+                id='cw-spoiler-input'
+                className='spoiler-input__input'
+                lang={this.props.lang}
+                spellCheck
+              />
+
+              <div className='spoiler-input__border' />
+            </div>
+          )}
+
+          <div className='compose-form__dropdowns'>
+            <PrivacyDropdownContainer disabled={this.props.isEditing} />
+            <LanguageDropdown />
           </div>
 
+          <AutosuggestTextarea
+            ref={this.textareaRef}
+            placeholder={intl.formatMessage(messages.placeholder)}
+            disabled={isSubmitting}
+            value={this.props.text}
+            onChange={this.handleChange}
+            suggestions={this.props.suggestions}
+            onFocus={this.handleFocus}
+            onKeyDown={this.handleKeyDownPost}
+            onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
+            onSuggestionsClearRequested={this.onSuggestionsClearRequested}
+            onSuggestionSelected={this.onSuggestionSelected}
+            onPaste={onPaste}
+            autoFocus={autoFocus}
+            lang={this.props.lang}
+          />
+
           <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;
   }
 }