[refactor] compose form button bar CSS

Complete rewrite of the CSS for the compose form button bar. This makes the buttons and icons sit nicely in the available space.

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

@@ -479,48 +479,43 @@
 }
 
 .compose-form__buttons-wrapper {
-  padding: 10px;
-  background: darken($simple-background-color, 8%);
-  border-radius: 0 0 4px 4px;
-  height: 27px;
   display: flex;
+  align-items: center;
   justify-content: space-between;
-  flex: 0 0 auto;
+  padding: 10px;
+  border-radius: 0 0 4px 4px;
+  color: $action-button-color;
+  background: darken($simple-background-color, 8%);
 }
 
 .compose-form__buttons {
   display: flex;
-  flex: 0 0 auto;
+  gap: 1px;
+  align-items: center;
+  justify-content: center;
 
-  & .icon-button,
-  & .text-icon-button {
-    display: inline-block;
-    box-sizing: content-box;
-    padding: 0 3px;
-    height: 27px;
-    line-height: 27px;
-    vertical-align: bottom;
+  .icon-button,
+  .text-icon-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+  }
+
+  svg.gts-icon {
+    --size: 20px;
+    scale: 1.2;
   }
 
   & > hr {
-    display: inline-block;
-    margin: 0 3px;
-    border-width: 0 0 0 1px;
-    border-style: none none none solid;
-    border-color: transparent transparent transparent
-      darken($simple-background-color, 24%);
-    padding: 0;
-    width: 0;
-    height: 27px;
-    background: transparent;
+    margin: 0 1px;
+    height: 24px;
+    border: 0;
+    border-right: 1px solid $action-button-color;
   }
 }
 
-.character-counter__wrapper {
-  align-self: center;
-  margin-inline-end: 4px;
-}
-
 .privacy-dropdown.active {
   .privacy-dropdown__value {
     background: $simple-background-color;
@@ -565,6 +560,10 @@
   color: $inverted-text-color;
   cursor: pointer;
 
+  svg.gts-icon {
+    --size: 24px;
+  }
+
   .privacy-dropdown__option__content {
     flex: 1 1 auto;
     color: $lighter-text-color;