Merge commit 'd887790e86124493df850e9bc52e1e059207b523' into glitch-soc/merge-upstream

app/javascript/mastodon/features/compose/components/search.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState, useRef } from 'react';
+import { useCallback, useState, useRef, useEffect } from 'react';
 
 import {
   defineMessages,
@@ -72,6 +72,10 @@ export const Search: React.FC<{
   const [expanded, setExpanded] = useState(false);
   const [selectedOption, setSelectedOption] = useState(-1);
   const [quickActions, setQuickActions] = useState<SearchOption[]>([]);
+  useEffect(() => {
+    setValue(initialValue ?? '');
+    setQuickActions([]);
+  }, [initialValue]);
   const searchOptions: SearchOption[] = [];
 
   if (searchEnabled) {

app/javascript/styles/mastodon/components.scss

@@ -1882,16 +1882,18 @@ body > [data-popper-placement] {
 }
 
 .status__quote {
+  --quote-margin: 36px;
+
   position: relative;
   margin-block-start: 16px;
-  margin-inline-start: 36px;
+  margin-inline-start: calc(var(--quote-margin) + var(--thread-margin, 0px));
   border-radius: 8px;
   color: var(--nested-card-text);
   background: var(--nested-card-background);
   border: var(--nested-card-border);
 
-  @media screen and (min-width: $mobile-breakpoint) {
-    margin-inline-start: 56px;
+  @container (width > 460px) {
+    --quote-margin: 56px;
   }
 }
 
@@ -1951,7 +1953,7 @@ body > [data-popper-placement] {
     transform: translateY(-50%);
   }
 
-  @media screen and (min-width: $mobile-breakpoint) {
+  @container (width > 460px) {
     inset-inline-start: -50px;
   }
 }
@@ -2878,6 +2880,7 @@ a.account__display-name {
       display: flex;
       flex-direction: column;
       contain: inline-size layout paint style;
+      container: column / inline-size;
 
       @media screen and (min-width: $no-gap-breakpoint) {
         max-width: 600px;