Allow users to change how accounts are sorted when viewing a collection (#39073)

app/javascript/mastodon/components/form_fields/form_field_wrapper.module.scss

@@ -48,10 +48,14 @@
 
 .status {
   // If there's no content, we need to compensate for the parent's
-  // flex gap to avoid extra spacing below the field.
+  // flex gap to avoid extra spacing below or next to the field.
   &:empty {
     margin-top: calc(-1 * var(--form-field-label-gap));
   }
+
+  [data-input-placement^='inline'] &:empty {
+    margin-inline-start: calc(-1 * var(--form-field-label-gap));
+  }
 }
 
 .inputWrapper {

app/javascript/mastodon/components/form_fields/form_field_wrapper.tsx

@@ -24,7 +24,7 @@ export interface FieldStatus {
   message?: string;
 }
 
-interface FieldWrapperProps {
+export interface FieldWrapperProps {
   label: ReactNode;
   hint?: ReactNode;
   required?: boolean;

app/javascript/mastodon/components/form_fields/select_field.tsx

@@ -4,11 +4,17 @@ import { forwardRef } from 'react';
 import classNames from 'classnames';
 
 import { FormFieldWrapper } from './form_field_wrapper';
-import type { CommonFieldWrapperProps } from './form_field_wrapper';
+import type {
+  CommonFieldWrapperProps,
+  FieldWrapperProps,
+} from './form_field_wrapper';
 import classes from './select.module.scss';
 
 interface Props
-  extends ComponentPropsWithoutRef<'select'>, CommonFieldWrapperProps {}
+  extends
+    ComponentPropsWithoutRef<'select'>,
+    CommonFieldWrapperProps,
+    Pick<FieldWrapperProps, 'inputPlacement'> {}
 
 /**
  * A simple form field for single-item selections.
@@ -19,13 +25,28 @@ interface Props
  */
 
 export const SelectField = forwardRef<HTMLSelectElement, Props>(
-  ({ id, label, hint, required, status, children, ...otherProps }, ref) => (
+  (
+    {
+      id,
+      label,
+      hint,
+      required,
+      status,
+      inputPlacement,
+      children,
+      wrapperClassName,
+      ...otherProps
+    },
+    ref,
+  ) => (
     <FormFieldWrapper
       label={label}
       hint={hint}
       required={required}
       status={status}
       inputId={id}
+      inputPlacement={inputPlacement}
+      className={wrapperClassName}
     >
       {(inputProps) => (
         <Select {...otherProps} {...inputProps} ref={ref}>