Move display option switches to the other side (It looks better, setting up for share dialog improvements)

app/components/Switch.tsx

@@ -6,19 +6,28 @@ import Text from "~/components/Text";
 import { undraggableOnDesktop } from "~/styles";
 
 interface Props extends React.HTMLAttributes<HTMLInputElement> {
+  /** Width of the switch. Defaults to 32. */
   width?: number;
+  /** Height of the switch. Defaults to 18 */
   height?: number;
+  /** An optional label for the switch */
   label?: string;
-  name?: string;
+  /** Whether the label should be positioned on left or right. Defaults to right */
+  labelPosition?: "left" | "right";
+  /** An optional note to display below the switch */
   note?: React.ReactNode;
+  /** Name of the input */
+  name?: string;
+  /** Whether the switch is checked */
   checked?: boolean;
+  /** Whether the switch is disabled */
   disabled?: boolean;
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => unknown;
 }
 
 function Switch({
   width = 32,
   height = 18,
+  labelPosition = "left",
   label,
   disabled,
   className,
@@ -45,7 +54,12 @@ function Switch({
   if (label) {
     return (
       <Wrapper>
-        <Label disabled={disabled} htmlFor={props.id} className={className}>
+        <Label
+          disabled={disabled}
+          htmlFor={props.id}
+          className={className}
+          $labelPosition={labelPosition}
+        >
           {component}
           <InlineLabelText>{label}</InlineLabelText>
         </Label>
@@ -68,12 +82,20 @@ const Wrapper = styled.div`
 
 const InlineLabelText = styled(LabelText)`
   padding-bottom: 0;
+  width: 100%;
 `;
 
-const Label = styled.label<{ disabled?: boolean }>`
+const Label = styled.label<{
+  disabled?: boolean;
+  $labelPosition: "left" | "right";
+}>`
   display: flex;
   align-items: center;
   user-select: none;
+  gap: 8px;
+
+  ${(props) =>
+    props.$labelPosition === "left" ? `flex-direction: row-reverse;` : ""}
   ${(props) => (props.disabled ? `opacity: 0.75;` : "")}
 `;
 
@@ -83,10 +105,6 @@ const Input = styled.label<{ width: number; height: number }>`
   width: ${(props) => props.width}px;
   height: ${(props) => props.height}px;
   flex-shrink: 0;
-
-  &:not(:last-child) {
-    margin-right: 8px;
-  }
 `;
 
 const Slider = styled.span<{ width: number; height: number }>`

app/menus/DocumentMenu.tsx

@@ -306,12 +306,14 @@ function DocumentMenu({
         {(showDisplayOptions || showToggleEmbeds) && (
           <>
             <Separator />
+            <DisplayOptions>
               {showToggleEmbeds && (
                 <Style>
                   <ToggleMenuItem
                     width={26}
                     height={14}
                     label={t("Enable embeds")}
+                    labelPosition="left"
                     checked={!document.embedsDisabled}
                     onChange={
                       document.embedsDisabled
@@ -327,6 +329,7 @@ function DocumentMenu({
                     width={26}
                     height={14}
                     label={t("Full width")}
+                    labelPosition="left"
                     checked={document.fullWidth}
                     onChange={(ev) => {
                       const fullWidth = ev.currentTarget.checked;
@@ -341,6 +344,7 @@ function DocumentMenu({
                   />
                 </Style>
               )}
+            </DisplayOptions>
           </>
         )}
       </ContextMenu>
@@ -355,6 +359,10 @@ const ToggleMenuItem = styled(Switch)`
   }
 `;
 
+const DisplayOptions = styled.div`
+  padding: 8px 0 0;
+`;
+
 const Style = styled.div`
   padding: 12px;