fix: equalize spacing between sort and trash icons

Move TranslationSortMenu outside the flex container so it doesn't
create an extra gap between the sort and trash icons.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: bdshadow

webapp/src/views/projects/translations/TranslationHeader/TranslationControls.tsx

@@ -85,6 +85,7 @@ export const TranslationControls: React.FC<Props> = ({ onDialogOpen }) => {
   };
 
   return (
+    <>
     <StyledContainer>
       <StyledSpaced>
         <StyledTranslationsSearchField
@@ -117,13 +118,6 @@ export const TranslationControls: React.FC<Props> = ({ onDialogOpen }) => {
           </Badge>
         </Tooltip>
 
-        <TranslationSortMenu
-          anchorEl={anchorSortEl}
-          onClose={() => setAnchorSortEl(null)}
-          onChange={setOrder}
-          value={order}
-        />
-
         {trashCount > 0 && (
           <Tooltip title={t('translation_controls_trash_tooltip')}>
             <Badge color="error" variant="dot" overlap="circular">
@@ -183,5 +177,12 @@ export const TranslationControls: React.FC<Props> = ({ onDialogOpen }) => {
         )}
       </StyledSpaced>
     </StyledContainer>
+    <TranslationSortMenu
+      anchorEl={anchorSortEl}
+      onClose={() => setAnchorSortEl(null)}
+      onChange={setOrder}
+      value={order}
+    />
+  </>
   );
 };

webapp/src/views/projects/translations/TranslationHeader/TranslationControlsCompact.tsx

@@ -155,6 +155,13 @@ export const TranslationControlsCompact: React.FC<Props> = ({
   };
 
   return (
+    <>
+    <TranslationSortMenu
+      anchorEl={anchorSortEl}
+      onClose={() => setAnchorSortEl(null)}
+      onChange={setOrder}
+      value={order}
+    />
     <StyledContainer>
       {searchOpen ? (
         <StyledSearchSpaced>
@@ -228,13 +235,6 @@ export const TranslationControlsCompact: React.FC<Props> = ({
               </Badge>
             </Tooltip>
 
-            <TranslationSortMenu
-              anchorEl={anchorSortEl}
-              onClose={() => setAnchorSortEl(null)}
-              onChange={setOrder}
-              value={order}
-            />
-
             {trashCount > 0 && (
               <Tooltip title={t('translation_controls_trash_tooltip')}>
                 <Badge color="error" variant="dot" overlap="circular">
@@ -316,5 +316,6 @@ export const TranslationControlsCompact: React.FC<Props> = ({
         </>
       )}
     </StyledContainer>
+    </>
   );
 };