Fix badly visible focus outlines in composer (#37250)

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

@@ -399,9 +399,10 @@ export const LanguageDropdown: React.FC = () => {
   }
 
   return (
-    <div ref={targetRef}>
+    <>
       <button
         type='button'
+        ref={targetRef}
         title={intl.formatMessage(messages.changeLanguage)}
         aria-expanded={open}
         onClick={handleToggle}
@@ -438,6 +439,6 @@ export const LanguageDropdown: React.FC = () => {
           </div>
         )}
       </Overlay>
-    </div>
+    </>
   );
 };

app/javascript/styles/mastodon/components.scss

@@ -628,11 +628,6 @@ body > [data-popper-placement] {
     gap: 8px;
     margin: 8px;
     flex-wrap: wrap;
-
-    & > div {
-      overflow: hidden;
-      display: flex;
-    }
   }
 
   &__uploads {
@@ -772,7 +767,6 @@ body > [data-popper-placement] {
     align-items: center;
     flex: 1 1 auto;
     max-width: 100%;
-    overflow: hidden;
   }
 
   &__buttons {
@@ -932,6 +926,11 @@ body > [data-popper-placement] {
   text-overflow: ellipsis;
   white-space: nowrap;
 
+  &:focus-visible {
+    outline: var(--outline-focus-default);
+    outline-offset: 2px;
+  }
+
   &[disabled] {
     cursor: default;
     color: var(--color-text-disabled);