fix: use rtl-safe classes

Author: danielroe

app/components/diff/Line.vue

@@ -49,7 +49,7 @@ const rowClasses = computed(() => {
 })
 
 const borderClasses = computed(() => {
-  const classes = ['border-transparent', 'w-1', 'border-l-3']
+  const classes = ['border-transparent', 'w-1', 'border-is-3']
 
   if (props.line.type === 'insert') {
     classes.push('border-[color:var(--code-added)]/60')
@@ -63,7 +63,7 @@ const borderClasses = computed(() => {
 
 const contentClasses = computed(() => {
   const shouldWrap = diffContext?.wordWrap?.value ?? false
-  return ['pr-6', shouldWrap ? 'whitespace-pre-wrap break-words' : 'text-nowrap']
+  return ['pe-6', shouldWrap ? 'whitespace-pre-wrap break-words' : 'text-nowrap']
 })
 
 type RenderedSegment = { html: string; type: 'insert' | 'delete' | 'normal' }

app/components/diff/SidebarPanel.vue

@@ -85,7 +85,7 @@ function handleFileSelect(file: FileChange) {
             <span class="i-lucide-lightbulb w-3.5 h-3.5" />
             {{ $t('compare.summary') }}
           </span>
-          <div class="flex items-center gap-3 font-mono text-[10px]">
+          <div class="flex items-center gap-3 font-mono text-3xs">
             <span class="flex items-center gap-1">
               <span class="text-green-500">+{{ compare.stats.filesAdded }}</span>
               <span class="text-fg-subtle">/</span>
@@ -106,7 +106,7 @@ function handleFileSelect(file: FileChange) {
       >
         <div class="flex items-start gap-2">
           <span class="i-carbon-warning w-3.5 h-3.5 text-yellow-500 shrink-0 mt-0.5" />
-          <div class="text-[10px] text-fg-muted">
+          <div class="text-3xs text-fg-muted">
             <p v-for="warning in compare.meta.warnings" :key="warning">{{ warning }}</p>
           </div>
         </div>
@@ -124,7 +124,7 @@ function handleFileSelect(file: FileChange) {
             {{ section.label }} ({{ section.changes.length }})
           </summary>
 
-          <div class="space-y-1 ml-5 max-h-40 overflow-y-auto">
+          <div class="space-y-1 ms-5 max-h-40 overflow-y-auto">
             <div
               v-for="dep in section.changes"
               :key="dep.name"
@@ -149,7 +149,7 @@ function handleFileSelect(file: FileChange) {
               </NuxtLink>
 
               <div
-                class="flex items-center gap-1.5 text-fg-muted font-mono text-[10px] ml-auto shrink-0"
+                class="flex items-center gap-1.5 text-fg-muted font-mono text-3xs ms-auto shrink-0"
               >
                 <span
                   v-if="dep.from"
@@ -163,7 +163,7 @@ function handleFileSelect(file: FileChange) {
 
               <span
                 v-if="dep.semverDiff"
-                class="text-[9px] px-1.5 py-0.5 rounded font-medium shrink-0"
+                class="text-4xs px-1.5 py-0.5 rounded font-medium shrink-0"
                 :class="getSemverBadgeClass(dep.semverDiff)"
               >
                 {{ dep.semverDiff }}
@@ -175,7 +175,7 @@ function handleFileSelect(file: FileChange) {
 
       <div
         v-if="compare.dependencyChanges.length === 0 && !compare.meta.warnings?.length"
-        class="px-3 py-2 text-[10px] text-fg-muted text-center"
+        class="px-3 py-2 text-3xs text-fg-muted text-center"
       >
         {{ $t('compare.no_dependency_changes') }}
       </div>
@@ -198,21 +198,21 @@ function handleFileSelect(file: FileChange) {
       <div class="border-b border-border px-3 py-2 shrink-0 space-y-2">
         <div class="relative">
           <span
-            class="absolute left-2 top-1/2 -translate-y-1/2 i-carbon-search w-3 h-3 text-fg-subtle pointer-events-none"
+            class="absolute inset-is-2 top-1/2 -translate-y-1/2 i-carbon-search w-3 h-3 text-fg-subtle pointer-events-none"
           />
           <input
             v-model="fileSearch"
             type="search"
             :placeholder="$t('compare.search_files_placeholder')"
             :aria-label="$t('compare.search_files_placeholder')"
-            class="w-full text-[11px] pl-6.5 pr-2 py-1 bg-bg-subtle border border-border rounded font-mono placeholder:text-fg-subtle transition-colors hover:border-border-hover focus:border-accent focus:outline-none"
+            class="w-full text-2xs ps-6.5 pe-2 py-1 bg-bg-subtle border border-border rounded font-mono placeholder:text-fg-subtle transition-colors hover:border-border-hover focus:border-accent focus:outline-none"
           />
         </div>
         <div class="flex items-center justify-end">
           <select
             v-model="fileFilter"
             :aria-label="$t('compare.filter_files_label')"
-            class="text-[10px] px-2 py-1 bg-bg-subtle border border-border rounded font-mono cursor-pointer hover:border-border-hover transition-colors"
+            class="text-3xs px-2 py-1 bg-bg-subtle border border-border rounded font-mono cursor-pointer hover:border-border-hover transition-colors"
           >
             <option value="all">
               {{ $t('compare.file_filter_option.all', { count: allChanges.length }) }}
@@ -239,7 +239,11 @@ function handleFileSelect(file: FileChange) {
               ? $t('compare.no_files_search', { query: fileSearch.trim() })
               : fileFilter === 'all'
                 ? $t('compare.no_files_all')
-                : $t('compare.no_files_filtered', { filter: $t(`compare.filter.${fileFilter}`) })
+                : fileFilter === 'added'
+                  ? $t('compare.no_files_filtered', { filter: $t('compare.filter.added') })
+                  : fileFilter === 'removed'
+                    ? $t('compare.no_files_filtered', { filter: $t('compare.filter.removed') })
+                    : $t('compare.no_files_filtered', { filter: $t('compare.filter.modified') })
           }}
         </div>
 

app/components/diff/SkipBlock.vue

@@ -16,7 +16,7 @@ defineProps<{
       <span class="i-lucide-chevrons-up-down w-4 h-4" />
     </td>
     <td>
-      <span class="px-0 sticky left-2 italic opacity-50">
+      <span class="px-0 sticky inset-is-2 italic opacity-50">
         {{ content || $t('compare.lines_hidden', { count }) }}
       </span>
     </td>

app/pages/diff/[...path].vue

@@ -196,7 +196,7 @@ useSeoMeta({
     <div v-else-if="compare" class="flex-1 flex flex-col md:flex-row min-h-0 overflow-hidden">
       <!-- Desktop sidebar -->
       <aside
-        class="hidden md:flex w-80 border-r border-border bg-bg-subtle flex-col shrink-0 min-h-0"
+        class="hidden md:flex w-80 border-ie border-border bg-bg-subtle flex-col shrink-0 min-h-0"
       >
         <DiffSidebarPanel
           :compare="compare"
@@ -214,7 +214,7 @@ useSeoMeta({
         <div
           class="md:hidden border-b border-border bg-bg-subtle px-4 py-3 flex items-center justify-between gap-3"
         >
-          <div class="flex items-center gap-2 text-[11px] font-mono text-fg-muted">
+          <div class="flex items-center gap-2 text-2xs font-mono text-fg-muted">
             <span class="flex items-center gap-1">
               <span class="text-green-500">+{{ compare.stats.filesAdded }}</span>
               <span class="text-fg-subtle">/</span>