Merge remote-tracking branch 'parent/main' into upstream-20240128

app/javascript/styles/mastodon-light/diff.scss

@@ -451,6 +451,15 @@
   background: darken($ui-base-color, 10%);
 }
 
+.dropdown-button.warning {
+  border-color: #b3261e;
+  color: #b3261e;
+
+  &.active {
+    background-color: #f9dedc;
+  }
+}
+
 .search__popout__menu__item {
   &:hover,
   &:active,

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;
@@ -6402,6 +6430,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 {
@@ -573,11 +576,14 @@ code {
   }
 
   .stacked-actions {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
     margin-top: 30px;
     margin-bottom: 15px;
   }
 
-  button:not(.button, .link-button) {
+  .btn {
     display: block;
     width: 100%;
     border: 0;
@@ -594,8 +600,6 @@ code {
     cursor: pointer;
     font-weight: 500;
     outline: 0;
-    margin-bottom: 10px;
-    margin-inline-end: 10px;
 
     &:last-child {
       margin-inline-end: 0;