fix(ui): various RTL issues (#774)

apps/ui.immich.app/src/routes/(docs)/+layout.svelte

@@ -22,7 +22,16 @@
     toastManager,
     type NavbarProps,
   } from '@immich/ui';
-  import { mdiCodeBraces, mdiCompass, mdiCompassOutline, mdiMenu, mdiNote, mdiNoteOutline } from '@mdi/js';
+  import {
+    mdiAlignHorizontalLeft,
+    mdiAlignHorizontalRight,
+    mdiCodeBraces,
+    mdiCompass,
+    mdiCompassOutline,
+    mdiMenu,
+    mdiNote,
+    mdiNoteOutline,
+  } from '@mdi/js';
   import { MediaQuery } from 'svelte/reactivity';
 
   let { children } = $props();
@@ -42,6 +51,12 @@
   commandPaletteManager.setTranslations({
     command_palette_prompt_default: 'Quickly find components, links, and commands',
   });
+
+  let dirIsLtr = $state(true);
+
+  $effect(() => {
+    document.dir = dirIsLtr ? 'ltr' : 'rtl';
+  });
 </script>
 
 <AppShell>
@@ -64,6 +79,14 @@
       </ControlBarHeader>
       <ControlBarOverflow>
         <CommandPaletteButton />
+        <IconButton
+          shape="round"
+          variant="ghost"
+          size="medium"
+          aria-label="Switch between LTR and RTL text direction"
+          icon={dirIsLtr ? mdiAlignHorizontalLeft : mdiAlignHorizontalRight}
+          onclick={() => (dirIsLtr = !dirIsLtr)}
+        />
         <ThemeSwitcher size="medium" />
       </ControlBarOverflow>
     </ControlBar>

apps/ui.immich.app/src/routes/(docs)/components/markdown/BasicExample.md

@@ -34,7 +34,7 @@ This is ~~strike-through~~
 
 This is `code`
 
-#### Headers can also container `code`
+#### Headers can also contain `code`
 
 ### Link