Add information about alt text to alt text modal in web UI (#33702)

app/javascript/styles/mastodon/components.scss

@@ -50,6 +50,34 @@
   }
 }
 
+.help-button {
+  background: $ui-button-background-color;
+  border: 0;
+  color: $ui-button-color;
+  border-radius: 20px;
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &:active,
+  &:focus,
+  &:hover {
+    background-color: $ui-button-focus-background-color;
+  }
+
+  &:focus-visible {
+    outline: $ui-button-icon-focus-outline;
+  }
+
+  .icon {
+    width: 14px;
+    height: 14px;
+  }
+}
+
 .button {
   background-color: $ui-button-background-color;
   border: 10px none;
@@ -6091,6 +6119,20 @@ a.status-card {
     }
   }
 
+  &__popout {
+    background: var(--dropdown-background-color);
+    backdrop-filter: var(--background-filter);
+    border: 1px solid var(--dropdown-border-color);
+    box-shadow: var(--dropdown-shadow);
+    max-width: 320px;
+    padding: 16px;
+    border-radius: 8px;
+    z-index: 9999 !important;
+    font-size: 14px;
+    line-height: 20px;
+    color: $darker-text-color;
+  }
+
   .copy-paste-text {
     margin-bottom: 0;
   }

app/javascript/styles/mastodon/forms.scss

@@ -83,9 +83,12 @@ code {
     &__toolbar {
       margin-top: 16px;
       display: flex;
-      justify-content: space-between;
       align-items: center;
       gap: 16px;
+
+      .character-counter {
+        flex: 0 0 auto;
+      }
     }
 
     &.hidden {
@@ -565,7 +568,7 @@ code {
     margin-bottom: 15px;
   }
 
-  button:not(.button, .link-button) {
+  button:not(.button, .link-button, .help-button) {
     display: block;
     width: 100%;
     border: 0;