fix: force versions, proper names, etc to ltr

Author: skaldebane

app/components/Compare/FacetRow.vue

@@ -146,7 +146,9 @@ function isCellLoading(index: number): boolean {
         >
           <!-- Date values use DateTime component for i18n and user settings -->
           <DateTime v-if="value.type === 'date'" :datetime="value.display" date-style="medium" />
-          <template v-else>{{ value.display }}</template>
+          <template v-else>
+            <span dir="ltr">{{ value.display }}</span>
+          </template>
         </span>
       </template>
     </div>

app/components/Package/Card.vue

@@ -48,6 +48,7 @@ const pkgDescription = useMarkdown(() => ({
           :prefetch-on="prefetch ? 'visibility' : 'interaction'"
           class="decoration-none scroll-mt-48 scroll-mb-6 after:content-[''] after:absolute after:inset-0"
           :data-result-index="index"
+          dir="ltr"
           >{{ result.package.name }}</NuxtLink
         >
         <span

app/components/Package/Compatibility.vue

@@ -48,7 +48,7 @@ const sortedEngines = computed(() => {
           />
           {{ getName(engine) }}
         </dt>
-        <dd class="font-mono text-sm text-fg text-end" :title="version">
+        <dd class="font-mono text-sm text-fg text-end" :title="version" dir="ltr">
           {{ version }}
         </dd>
       </div>

app/components/Package/Dependencies.vue

@@ -84,10 +84,11 @@ const sortedOptionalDependencies = computed(() => {
           <NuxtLink
             :to="{ name: 'package', params: { package: dep.split('/') } }"
             class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate min-w-0 flex-1"
+            dir="ltr"
           >
             {{ dep }}
           </NuxtLink>
-          <span class="flex items-center gap-1 max-w-[40%]">
+          <span class="flex items-center gap-1 max-w-[40%]" dir="ltr">
             <span
               v-if="outdatedDeps[dep]"
               class="shrink-0"
@@ -179,6 +180,7 @@ const sortedOptionalDependencies = computed(() => {
                 params: { package: peer.name.split('/') },
               }"
               class="font-mono text-fg-muted hover:text-fg transition-colors duration-200 truncate"
+              dir="ltr"
             >
               {{ peer.name }}
             </NuxtLink>
@@ -197,6 +199,7 @@ const sortedOptionalDependencies = computed(() => {
             }"
             class="font-mono text-xs text-fg-subtle max-w-[40%] truncate"
             :title="peer.version"
+            dir="ltr"
           >
             {{ peer.version }}
           </NuxtLink>

app/components/Package/Maintainers.vue

@@ -190,6 +190,7 @@ watch(
               params: { username: maintainer.name },
             }"
             class="link-subtle font-mono text-sm shrink-0"
+            dir="ltr"
           >
             ~{{ maintainer.name }}
           </NuxtLink>

app/components/Package/TableRow.vue

@@ -53,6 +53,7 @@ const allMaintainersText = computed(() => {
       <NuxtLink
         :to="packageUrl"
         class="font-mono text-sm text-fg hover:text-accent-fallback transition-colors duration-200"
+        dir="ltr"
       >
         {{ pkg.name }}
       </NuxtLink>

app/components/Package/Versions.vue

@@ -375,6 +375,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                         })
                       : row.primaryVersion.version
                   "
+                  dir="ltr"
                 >
                   <span
                     v-if="row.primaryVersion.deprecated"
@@ -434,6 +435,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                     ? $t('package.versions.deprecated_title', { version: v.version })
                     : v.version
                 "
+                dir="ltr"
               >
                 <span
                   v-if="v.deprecated"

app/components/PaginationControls.vue

@@ -200,7 +200,7 @@ function handlePageSizeChange(event: Event) {
           :aria-label="$t('filters.pagination.previous')"
           @click="goPrev"
         >
-          <span class="i-carbon-chevron-left w-4 h-4" aria-hidden="true" />
+          <span class="i-carbon-chevron-left rtl-flip w-4 h-4" aria-hidden="true" />
         </button>
 
         <!-- Page numbers -->
@@ -230,7 +230,7 @@ function handlePageSizeChange(event: Event) {
           :aria-label="$t('filters.pagination.next')"
           @click="goNext"
         >
-          <span class="i-carbon-chevron-right w-4 h-4" aria-hidden="true" />
+          <span class="i-carbon-chevron-right rtl-flip w-4 h-4" aria-hidden="true" />
         </button>
       </nav>
     </div>

app/components/SearchSuggestionCard.vue

@@ -31,6 +31,7 @@ defineProps<{
         <div class="flex items-center gap-2">
           <span
             class="font-mono text-sm sm:text-base font-medium text-fg group-hover:text-fg transition-colors"
+            dir="ltr"
           >
             {{ type === 'user' ? '~' : '@' }}{{ name }}
           </span>

app/pages/package/[...package].vue

@@ -515,6 +515,7 @@ onKeyStroke(
             <h1
               class="font-mono text-2xl sm:text-3xl font-medium min-w-0 break-words"
               :title="pkg.name"
+              dir="ltr"
             >
               <NuxtLink
                 v-if="orgName"
@@ -561,9 +562,10 @@ onKeyStroke(
               v-if="requestedVersion && resolvedVersion !== requestedVersion"
               :to="`/package/${pkg.name}/v/${resolvedVersion}`"
               :title="$t('package.view_permalink')"
+              dir="ltr"
               >{{ resolvedVersion }}</NuxtLink
             >
-            <span v-else>v{{ resolvedVersion }}</span>
+            <span dir="ltr" v-else>v{{ resolvedVersion }}</span>
 
             <template v-if="hasProvenance(displayVersion) && provenanceBadgeMounted">
               <TooltipApp
@@ -945,7 +947,7 @@ onKeyStroke(
             </dt>
             <dd class="font-mono text-sm text-fg">
               <!-- Package size (greyed out) -->
-              <span class="text-fg-muted">
+              <span class="text-fg-muted" dir="ltr">
                 <span v-if="displayVersion?.dist?.unpackedSize">
                   {{ formatBytes(displayVersion.dist.unpackedSize) }}
                 </span>
@@ -965,7 +967,7 @@ onKeyStroke(
                     aria-hidden="true"
                   />
                 </span>
-                <span v-else-if="installSize?.totalSize">
+                <span v-else-if="installSize?.totalSize" dir="ltr">
                   {{ formatBytes(installSize.totalSize) }}
                 </span>
                 <span v-else class="text-fg-subtle">-</span>