[Glitch] Fix badly visible focus outlines in composer

Port a9e228361c to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/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/flavours/glitch/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 {
@@ -813,7 +808,6 @@ body > [data-popper-placement] {
     display: flex;
     flex: 1 0 100%; // glitch: always on its own line
     max-width: 100%;
-    overflow: hidden;
     gap: 5px; // glitch: handle secondary post privacy
     align-items: stretch; // glitch: handle secondary post privacy
 
@@ -985,6 +979,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);