fix: set explicit direction on various elements

Author: skaldebane

app/components/Readme.vue

@@ -62,6 +62,7 @@ function handleClick(event: MouseEvent) {
   <article
     class="readme prose prose-invert max-w-[70ch] lg:max-w-none px-1"
     v-html="html"
+    dir="auto"
     :style="{
       '--i18n-note': '\'' + $t('package.readme.callout.note') + '\'',
       '--i18n-tip': '\'' + $t('package.readme.callout.tip') + '\'',

app/components/ReadmeTocDropdown.vue

@@ -198,6 +198,7 @@ function handleKeydown(event: KeyboardEvent) {
               activeId === node.id ? 'text-fg font-medium' : 'text-fg-muted',
               highlightedIndex === getIndex(node.id) ? 'bg-bg-elevated' : 'hover:bg-bg-elevated',
             ]"
+            dir="auto"
             @click="select(node.id)"
             @mouseenter="highlightedIndex = getIndex(node.id)"
           >
@@ -214,6 +215,7 @@ function handleKeydown(event: KeyboardEvent) {
                 activeId === child.id ? 'text-fg font-medium' : 'text-fg-subtle',
                 highlightedIndex === getIndex(child.id) ? 'bg-bg-elevated' : 'hover:bg-bg-elevated',
               ]"
+              dir="auto"
               @click="select(child.id)"
               @mouseenter="highlightedIndex = getIndex(child.id)"
             >
@@ -233,6 +235,7 @@ function handleKeydown(event: KeyboardEvent) {
                   ? 'bg-bg-elevated'
                   : 'hover:bg-bg-elevated',
               ]"
+              dir="auto"
               @click="select(grandchild.id)"
               @mouseenter="highlightedIndex = getIndex(grandchild.id)"
             >

app/components/Terminal/Install.vue

@@ -104,7 +104,7 @@ const copyCreateCommand = () => copyCreate(getFullCreateCommand())
         <span class="w-2.5 h-2.5 rounded-full bg-fg-subtle" />
         <span class="w-2.5 h-2.5 rounded-full bg-fg-subtle" />
       </div>
-      <div class="px-3 pt-2 pb-3 sm:px-4 sm:pt-3 sm:pb-4 space-y-1 overflow-x-auto">
+      <div class="px-3 pt-2 pb-3 sm:px-4 sm:pt-3 sm:pb-4 space-y-1 overflow-x-auto" dir="ltr">
         <!-- Install command - render all PM variants, CSS controls visibility -->
         <div
           v-for="pm in packageManagers"