[bugfix] correctly align “toot” buttons

app/javascript/flavours/glitch/features/compose/components/publisher.jsx

@@ -62,9 +62,10 @@ class Publisher extends ImmutablePureComponent {
     } else if (privacy === "private" || privacy === "direct") {
       const iconId = privacyIcons[privacy];
       publishText = (
-        <span>
-          <Icon id={iconId} /> {intl.formatMessage(messages.publish)}
-        </span>
+        <>
+        <Icon id={iconId} />
+        <span>{intl.formatMessage(messages.publish)}</span>
+        </>
       );
     } else {
       publishText = privacy !== "unlisted" ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish);
@@ -80,7 +81,6 @@ class Publisher extends ImmutablePureComponent {
     return (
       <div className={computedClass}>
         {sideArm && !isEditing && sideArm !== "none" ? (
-          <div className='compose-form__publish-button-wrapper'>
             <Button
               className='side_arm'
               disabled={disabled}
@@ -89,9 +89,7 @@ class Publisher extends ImmutablePureComponent {
               text={<Icon id={privacyIcons[sideArm]} />}
               title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage(privacyNames[sideArm])}`}
             />
-          </div>
         ) : null}
-        <div className='compose-form__publish-button-wrapper'>
           <Button
             className='primary'
             text={publishText}
@@ -99,7 +97,6 @@ class Publisher extends ImmutablePureComponent {
             onClick={this.handleSubmit}
             disabled={disabled}
           />
-        </div>
       </div>
     );
   }

app/javascript/flavours/glitch/styles/components/compose_form.scss

@@ -609,23 +609,22 @@
 
 .compose-form__publish {
   display: flex;
-  justify-content: flex-end;
-  min-width: 0;
-  flex: 0 0 auto;
   column-gap: 5px;
+  flex: 0 0 auto;
+  justify-content: flex-end;
+  margin-top: 10px;
+  min-width: 0;
 
-  .compose-form__publish-button-wrapper {
-    overflow: hidden;
-    padding-top: 10px;
+  button {
+    --size-icon: 18px;
 
-    button {
-      padding: 7px 10px;
-      text-align: center;
-    }
-
-    & > .side_arm {
-      width: 36px;
-    }
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    gap: 5px;
+    padding: 8px 12px;
+    line-height: 20px;
+    text-align: center;
   }
 }
 

app/javascript/flavours/glitch/styles/gts.scss

@@ -14,6 +14,7 @@
 /* Diff */
 .gts-icon {
   display: inline-block;
+  flex-shrink: 0;
   width: var(--size-icon);
   height: var(--size-icon);
 }