fix(rtl): use logical spacing/text-align classes instead of physical ones

frontend/src/components/AboutDialog.vue

@@ -13,7 +13,7 @@
             </div>
 
             <Tooltip :text="`${appVersion.commit_message} - ${appVersion.commit_date}`" side="top">
-              <span class="lucide-info size-3.5 text-ink-gray-8 ml-1" />
+              <span class="lucide-info size-3.5 text-ink-gray-8 ms-1" />
             </Tooltip>
           </div>
         </div>
@@ -27,8 +27,8 @@
           target="_blank"
           :href="link.url"
         >
-          <GithubLogo v-if="link.icon === 'github'" class="size-4 mr-2 text-ink-gray-7" />
-          <span v-else-if="link.icon" :class="[link.icon, 'size-4 mr-2 text-ink-gray-7']" />
+          <GithubLogo v-if="link.icon === 'github'" class="size-4 me-2 text-ink-gray-7" />
+          <span v-else-if="link.icon" :class="[link.icon, 'size-4 me-2 text-ink-gray-7']" />
           <span class="text-base text-ink-gray-8">
             {{ link.label }}
           </span>

frontend/src/components/Activity.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="relative flex items-center text-p-base text-ink-gray-5">
     <div
-      class="mr-3 grid h-7 w-7 shrink-0 place-items-center rounded-full bg-surface-gray-2 text-ink-gray-8"
+      class="me-3 grid h-7 w-7 shrink-0 place-items-center rounded-full bg-surface-gray-2 text-ink-gray-8"
     >
       <span class="lucide-lock h-4 w-4" v-if="activity.action === 'Discussion Closed'" />
       <span class="lucide-unlock h-4 w-4" v-else-if="activity.action === 'Discussion Reopened'" />

frontend/src/components/AppRail/CustomizeSidebarDialog.vue

@@ -28,7 +28,7 @@
                   :key="community.name"
                   data-sortable-section="shown"
                   :data-sortable-id="community.name"
-                  class="group relative flex min-h-8 w-full touch-none cursor-grab select-none items-center gap-2 rounded-4 px-1.5 py-0.5 text-left text-ink-gray-8 hover:bg-surface-gray-1"
+                  class="group relative flex min-h-8 w-full touch-none cursor-grab select-none items-center gap-2 rounded-4 px-1.5 py-0.5 text-start text-ink-gray-8 hover:bg-surface-gray-1"
                   :class="getCommunityRowClasses(community.name)"
                   :style="getItemStyle(community.name, 'shown')"
                   @pointerdown="startPointerDrag($event, community.name, 'shown')"
@@ -84,7 +84,7 @@
                 :key="community.name"
                 data-sortable-section="hidden"
                 :data-sortable-id="community.name"
-                class="group relative flex min-h-8 w-full touch-none cursor-grab select-none items-center gap-2 rounded-5 px-1.5 py-0.5 text-left text-ink-gray-8 hover:bg-surface-gray-1"
+                class="group relative flex min-h-8 w-full touch-none cursor-grab select-none items-center gap-2 rounded-5 px-1.5 py-0.5 text-start text-ink-gray-8 hover:bg-surface-gray-1"
                 :class="getCommunityRowClasses(community.name)"
                 :style="getItemStyle(community.name, 'hidden')"
                 @pointerdown="startPointerDrag($event, community.name, 'hidden')"

frontend/src/components/AppSidebar.vue

@@ -59,7 +59,7 @@
                     row hover/focus while the "…" menu fades in. The group is
                     SidebarItem's root (`group/sidebar-item`).
                   -->
-                <div class="relative mr-1 flex h-7 w-7 shrink-0 items-center justify-end">
+                <div class="relative me-1 flex h-7 w-7 shrink-0 items-center justify-end">
                   <span
                     v-if="getSpaceUnreadCount(space.name) > 0"
                     class="absolute right-1 text-xs text-ink-gray-5 transition-opacity group-hover/sidebar-item:opacity-0 group-focus-within/sidebar-item:opacity-0"
@@ -73,7 +73,7 @@
                         size="xs"
                         icon="lucide-more-horizontal text-ink-gray-5"
                         :label="`${space.title} options`"
-                        class="absolute right-0 -mr-0.5 opacity-0 group-hover/sidebar-item:opacity-100 group-focus-within/sidebar-item:opacity-100"
+                        class="absolute right-0 -me-0.5 opacity-0 group-hover/sidebar-item:opacity-100 group-focus-within/sidebar-item:opacity-100"
                         :class="open ? 'opacity-100' : ''"
                       />
                     </template>

frontend/src/components/AppSidebarLink.vue

@@ -11,7 +11,7 @@
         <slot name="prefix" />
       </span>
       <span class="text-sm"><slot /></span>
-      <div v-if="$slots.suffix" class="!ml-auto">
+      <div v-if="$slots.suffix" class="!ms-auto">
         <slot name="suffix" />
       </div>
     </div>

frontend/src/components/CommandPalette/CommandPalette.vue

@@ -6,14 +6,14 @@
       </Dialog.Title>
       <div class="relative">
         <div class="relative">
-          <div class="absolute inset-y-0 left-0 flex items-center pl-4.5">
+          <div class="absolute inset-y-0 left-0 flex items-center ps-4.5">
             <span class="lucide-search h-4 w-4 text-ink-gray-6" />
           </div>
           <input
             ref="inputRef"
             type="text"
             placeholder="Search"
-            class="w-full border-none bg-transparent py-3 pl-11.5 pr-4.5 text-base text-ink-gray-7 placeholder-ink-gray-4 focus:ring-0"
+            class="w-full border-none bg-transparent py-3 ps-11.5 pe-4.5 text-base text-ink-gray-7 placeholder-ink-gray-4 focus:ring-0"
             @input="onInput"
             @keydown="onKeyDown"
             v-model="query"
@@ -85,22 +85,22 @@
             <KeyboardShortcut bg>
               <span class="lucide-arrow-up size-4" />
             </KeyboardShortcut>
-            <span class="ml-1">to navigate</span>
+            <span class="ms-1">to navigate</span>
           </div>
           <div class="flex items-center gap-1">
             <KeyboardShortcut bg>
               <span class="lucide-corner-down-left size-4" />
             </KeyboardShortcut>
-            <span class="ml-1">to select</span>
+            <span class="ms-1">to select</span>
           </div>
           <div class="flex items-center gap-1">
             <KeyboardShortcut bg>esc</KeyboardShortcut>
-            <span class="ml-1">to close</span>
+            <span class="ms-1">to close</span>
           </div>
         </div>
         <div class="flex items-center gap-1">
           <KeyboardShortcut bg ctrl>K</KeyboardShortcut>
-          <span class="ml-1">to open</span>
+          <span class="ms-1">to open</span>
         </div>
       </div>
     </div>

frontend/src/components/CommandPalette/Item.vue

@@ -4,21 +4,21 @@
   >
     <span
       v-if="typeof item.icon === 'string'"
-      :class="[item.icon, 'mr-3 h-4 w-4 shrink-0 text-ink-gray-6']"
+      :class="[item.icon, 'me-3 h-4 w-4 shrink-0 text-ink-gray-6']"
     />
     <component
       v-else-if="item.icon"
       :is="item.icon"
-      class="mr-3 h-4 w-4 shrink-0 text-ink-gray-6"
+      class="me-3 h-4 w-4 shrink-0 text-ink-gray-6"
     />
     <span
       class="min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap"
       v-html="item.title"
     />
-    <span v-if="item.modified" class="ml-auto shrink-0 whitespace-nowrap pl-2 text-ink-gray-5">
+    <span v-if="item.modified" class="ms-auto shrink-0 whitespace-nowrap ps-2 text-ink-gray-5">
       {{ dayjsLocal(item.modified).fromNow(true) }}
     </span>
-    <span v-else-if="item.suffix" class="ml-auto shrink-0 whitespace-nowrap pl-2 text-ink-gray-5">
+    <span v-else-if="item.suffix" class="ms-auto shrink-0 whitespace-nowrap ps-2 text-ink-gray-5">
       {{ item.suffix }}
     </span>
   </div>

frontend/src/components/CommandPalette/ItemProject.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="flex w-full min-w-0 items-center rounded-4 px-2 py-2 text-base" v-if="space">
-    <SpaceIcon :icon="space.icon" class="mr-3 size-4 shrink-0 text-ink-gray-6" />
+    <SpaceIcon :icon="space.icon" class="me-3 size-4 shrink-0 text-ink-gray-6" />
     <span
       v-if="community && !item.hideCommunity"
       class="inline-flex min-w-0 shrink font-medium text-ink-gray-5"
@@ -15,7 +15,7 @@
     <span class="min-w-0 flex-1 truncate font-medium text-ink-gray-7">
       {{ item.title }}&nbsp;
     </span>
-    <span class="lucide-lock ml-0.5 size-3 shrink-0 text-ink-gray-6" v-if="space.is_private" />
+    <span class="lucide-lock ms-0.5 size-3 shrink-0 text-ink-gray-6" v-if="space.is_private" />
   </div>
 </template>
 <script setup lang="ts">

frontend/src/components/Comment.vue

@@ -15,7 +15,7 @@
       class="flex items-center bg-surface-base pb-2 pt-2 text-md text-ink-gray-8 sm:pt-14 sm:text-base"
       :class="{ 'sticky -top-px z-[1] sm:top-0': !isEditing }"
     >
-      <UserProfileLink class="mr-3" :user="author.name">
+      <UserProfileLink class="me-3" :user="author.name">
         <UserAvatarWithHover class="sm:hidden" size="xl" :user="author.name" />
         <UserAvatarWithHover class="hidden sm:inline-flex" size="lg" :user="author.name" />
       </UserProfileLink>
@@ -48,7 +48,7 @@
       </div>
       <Dropdown
         v-show="!isEditing"
-        class="ml-auto print:hidden"
+        class="ms-auto print:hidden"
         align="end"
         :button="{
           icon: 'lucide-more-horizontal',

frontend/src/components/CommentsArea.vue

@@ -95,11 +95,11 @@
           <div v-if="!showCommentBox" class="sm:-mx-3">
             <button
               type="button"
-              class="flex w-full items-center gap-3 text-left sm:gap-0 sm:rounded-6 sm:bg-surface-elevation-2 sm:px-2 sm:py-2 sm:text-base sm:text-ink-gray-5 sm:hover:bg-surface-elevation-3 sm:shadow-md"
+              class="flex w-full items-center gap-3 text-start sm:gap-0 sm:rounded-6 sm:bg-surface-elevation-2 sm:px-2 sm:py-2 sm:text-base sm:text-ink-gray-5 sm:hover:bg-surface-elevation-3 sm:shadow-md"
               @click="openCommentBox"
             >
               <UserAvatar class="sm:hidden" :user="$user().name" size="xl" />
-              <UserAvatar class="mr-3 hidden sm:inline-block" :user="$user().name" size="sm" />
+              <UserAvatar class="me-3 hidden sm:inline-block" :user="$user().name" size="sm" />
               <span
                 class="flex h-8 min-w-0 flex-1 items-center rounded-5 bg-surface-gray-2 px-3 text-md text-ink-gray-5 sm:hidden"
               >
@@ -110,15 +110,15 @@
           </div>
           <div
             v-else-if="composerMinimized"
-            class="flex cursor-pointer items-center gap-3 text-left focus:outline-none sm:-mx-3 sm:gap-0 sm:rounded-6 sm:bg-surface-elevation-2 sm:py-1 sm:pl-2 sm:pr-1 sm:text-base sm:text-ink-gray-5 sm:shadow-md sm:hover:bg-surface-elevation-3 sm:focus:bg-surface-elevation-3"
+            class="flex cursor-pointer items-center gap-3 text-start focus:outline-none sm:-mx-3 sm:gap-0 sm:rounded-6 sm:bg-surface-elevation-2 sm:py-1 sm:ps-2 sm:pe-1 sm:text-base sm:text-ink-gray-5 sm:shadow-md sm:hover:bg-surface-elevation-3 sm:focus:bg-surface-elevation-3"
             role="button"
             tabindex="0"
             @click="restoreComposer"
             @keydown.enter.prevent="restoreComposer"
             @keydown.space.prevent="restoreComposer"
           >
             <UserAvatar class="sm:hidden" :user="$user().name" size="xl" />
-            <UserAvatar class="mr-3 hidden sm:inline-block" :user="$user().name" size="sm" />
+            <UserAvatar class="me-3 hidden sm:inline-block" :user="$user().name" size="sm" />
             <span
               class="flex h-8 min-w-0 flex-1 items-center truncate rounded-5 bg-surface-gray-2 px-3 text-md text-ink-gray-5 sm:h-auto sm:bg-transparent sm:px-0 sm:text-base sm:text-ink-gray-6"
             >

frontend/src/components/CommentsList.vue

@@ -55,12 +55,12 @@
         :class="!showCommentBox ? 'cursor-pointer' : ''"
         @click="openCommentBoxFromRow"
       >
-        <div class="mr-3 hidden h-8 items-center sm:flex">
+        <div class="me-3 hidden h-8 items-center sm:flex">
           <UserAvatar :user="$user().name" size="md" />
         </div>
         <div class="relative w-full" v-show="!showCommentBox">
           <button
-            class="flex w-full items-center rounded-5 border px-2 py-2 text-left text-base text-ink-gray-5 hover:border-outline-gray-3"
+            class="flex w-full items-center rounded-5 border px-2 py-2 text-start text-base text-ink-gray-5 hover:border-outline-gray-3"
             @click.stop="openCommentBox"
           >
             Add a comment
@@ -74,7 +74,7 @@
         >
           <div class="mb-4 flex items-center sm:hidden">
             <UserAvatar :user="$user().name" size="sm" />
-            <span class="ml-2 text-base-medium text-ink-gray-8">
+            <span class="ms-2 text-base-medium text-ink-gray-8">
               {{ $user().full_name }}
             </span>
           </div>

frontend/src/components/CoverImage.vue

@@ -21,7 +21,7 @@
           <div class="rounded-5 py-1 text-xl text-ink-base">Drag image up or down</div>
           <div class="pointer-events-auto" data-cover-control @pointerdown.stop>
             <Button class="mt-2" @click="savePosition">Save position</Button>
-            <Button class="ml-2 mt-2" @click="cancelReposition">Cancel</Button>
+            <Button class="ms-2 mt-2" @click="cancelReposition">Cancel</Button>
           </div>
         </div>
       </div>

frontend/src/components/DevUserSwitcher.vue

@@ -5,7 +5,7 @@
     <PopoverTrigger as-child>
       <button
         type="button"
-        class="fixed bottom-20 left-3 z-[200] flex items-center gap-2 rounded-full border border-outline-gray-2 bg-surface-elevation-2 py-1 pl-1 pr-2.5 shadow-lg transition-opacity hover:opacity-100 sm:bottom-3 sm:left-16"
+        class="fixed bottom-20 left-3 z-[200] flex items-center gap-2 rounded-full border border-outline-gray-2 bg-surface-elevation-2 py-1 ps-1 pe-2.5 shadow-lg transition-opacity hover:opacity-100 sm:bottom-3 sm:left-16"
         :class="isOpen ? 'opacity-100' : 'opacity-60'"
         title="Dev only — switch user"
       >
@@ -44,7 +44,7 @@
               v-for="user in filteredUsers"
               :key="user.name"
               type="button"
-              class="flex w-full items-center gap-2.5 rounded-4 px-2 py-1.5 text-left hover:bg-surface-gray-2 disabled:opacity-60"
+              class="flex w-full items-center gap-2.5 rounded-4 px-2 py-1.5 text-start hover:bg-surface-gray-2 disabled:opacity-60"
               :disabled="Boolean(switchingTo)"
               @click="switchTo(user.name)"
             >

frontend/src/components/DiscussionRow.vue

@@ -22,13 +22,13 @@
             <div class="flex items-center min-w-0">
               <div class="text-ink-gray-5">
                 <Tooltip v-if="discussion.closed_at" text="Closed">
-                  <span class="lucide-lock size-4 p-[1px] mr-1" />
+                  <span class="lucide-lock size-4 p-[1px] me-1" />
                 </Tooltip>
                 <Tooltip v-else-if="discussion.last_post_type == 'GP Comment'" text="Comment">
-                  <span class="lucide-reply size-4 mr-1" />
+                  <span class="lucide-reply size-4 me-1" />
                 </Tooltip>
                 <Tooltip v-else-if="discussion.last_post_type == 'GP Poll'" text="Poll">
-                  <span class="lucide-align-left size-4 p-[1px] mr-1" />
+                  <span class="lucide-align-left size-4 p-[1px] me-1" />
                 </Tooltip>
               </div>
               <div>
@@ -39,7 +39,7 @@
                   &nbsp;in {{ discussion.project_title }}
                   <span
                     v-if="isSpacePrivate(discussion.project)"
-                    class="lucide-lock h-3 w-3 text-ink-gray-6 ml-0.5"
+                    class="lucide-lock h-3 w-3 text-ink-gray-6 ms-0.5"
                   /> </span
                 >:&nbsp;
               </div>
@@ -54,7 +54,7 @@
     <ListCell class="justify-end">
       <div>
         <Tooltip :text="dayjsLocal(discussion.last_post_at).format('D MMM YYYY [at] h:mm A')">
-          <div class="shrink-0 whitespace-nowrap text-sm text-ink-gray-5 text-right">
+          <div class="shrink-0 whitespace-nowrap text-sm text-ink-gray-5 text-end">
             {{ relativeTimestamp(discussion.last_post_at || discussion.creation) }}
           </div>
         </Tooltip>

frontend/src/components/DiscussionView.vue

@@ -17,16 +17,16 @@
         <div
           class="sticky -top-px z-[1] flex w-full items-center bg-surface-base pb-2 pt-2 sm:top-0 sm:pt-14"
         >
-          <Avatar size="xl" label="A" class="mr-3 shrink-0 animate-pulse sm:hidden">
+          <Avatar size="xl" label="A" class="me-3 shrink-0 animate-pulse sm:hidden">
             <div></div>
           </Avatar>
-          <Avatar size="lg" label="A" class="mr-3 hidden shrink-0 animate-pulse sm:inline-flex">
+          <Avatar size="lg" label="A" class="me-3 hidden shrink-0 animate-pulse sm:inline-flex">
             <div></div>
           </Avatar>
           <div class="flex flex-col md:block">
             <div class="text-base-medium bg-surface-gray-2 animate-pulse w-20 h-4"></div>
           </div>
-          <div class="ml-auto flex space-x-2">
+          <div class="ms-auto flex space-x-2">
             <Button>
               <template #icon>
                 <div class="animate-pulse w-20 h-8"></div>
@@ -37,8 +37,8 @@
         <div class="flex items-start justify-between space-x-1">
           <h1 class="flex items-center text-4xl-semibold animate-pulse">
             <span class="bg-surface-gray-3 h-5.5 w-32"> </span>
-            <span class="bg-surface-gray-3 h-5.5 w-20 ml-2"> </span>
-            <span class="bg-surface-gray-3 h-5.5 w-40 ml-2"> </span>
+            <span class="bg-surface-gray-3 h-5.5 w-20 ms-2"> </span>
+            <span class="bg-surface-gray-3 h-5.5 w-40 ms-2"> </span>
           </h1>
         </div>
       </div>
@@ -56,7 +56,7 @@
             class="flex w-full items-center bg-surface-base pb-2 pt-2"
             :class="editingPost ? 'sm:pt-0' : 'sticky -top-px z-[1] sm:top-0 sm:pt-14'"
           >
-            <UserProfileLink class="mr-3" :user="discussion.doc.owner">
+            <UserProfileLink class="me-3" :user="discussion.doc.owner">
               <UserAvatarWithHover class="sm:hidden" size="xl" :user="discussion.doc.owner" />
               <UserAvatarWithHover
                 class="hidden sm:inline-flex"
@@ -81,10 +81,10 @@
                 </time>
               </Tooltip>
             </div>
-            <div class="ml-auto flex space-x-2 print:hidden">
+            <div class="ms-auto flex space-x-2 print:hidden">
               <Dropdown
                 v-if="!readOnlyMode"
-                class="ml-auto"
+                class="ms-auto"
                 align="end"
                 :button="{
                   icon: 'lucide-more-horizontal',
@@ -99,7 +99,7 @@
             <div class="flex items-start justify-between space-x-1">
               <h1 v-if="!editingPost" class="flex items-center text-4xl-semibold" ref="postTitleEl">
                 <Tooltip v-if="discussion.doc.closed_at" text="This discussion is closed">
-                  <span class="lucide-lock mr-2 h-4 w-4 text-ink-gray-6" />
+                  <span class="lucide-lock me-2 h-4 w-4 text-ink-gray-6" />
                 </Tooltip>
                 <span class="text-ink-gray-8">
                   {{ discussion.doc.title }}
@@ -241,7 +241,7 @@
           <template #actions>
             <div class="flex">
               <Button
-                class="ml-auto"
+                class="ms-auto"
                 variant="solid"
                 :loading="discussion.pinDiscussion.loading"
                 @click="

frontend/src/components/ImagePreview.vue

@@ -4,7 +4,7 @@
       v-if="show"
       class="fixed inset-0 z-20 bg-black-overlay-200 dark:backdrop-filter dark:backdrop-blur-[1px]"
     >
-      <div class="absolute right-0 p-4 text-right">
+      <div class="absolute right-0 p-4 text-end">
         <Button icon="lucide-x" @click="$emit('update:show', false)"> </Button>
       </div>
       <div

frontend/src/components/LastPostReminder.vue

@@ -3,17 +3,17 @@
     <div class="border flex rounded-5 p-3 border-outline-gray-2 dark:bg-gray-900">
       <div class="flex-1">
         <div class="flex items-center">
-          <span class="lucide-alert-triangle size-4 shrink-0 mr-2.5 text-ink-gray-8" />
+          <span class="lucide-alert-triangle size-4 shrink-0 me-2.5 text-ink-gray-8" />
           <h2 class="text-p-base-medium text-ink-gray-8">You haven't posted in a while</h2>
         </div>
-        <div class="ml-6.5">
+        <div class="ms-6.5">
           <p class="text-ink-gray-6 text-p-base">
             It's been {{ daysSinceLastPost }} days since your last post. Share your thoughts or
             updates to keep the conversation going.
           </p>
         </div>
       </div>
-      <div class="ml-auto">
+      <div class="ms-auto">
         <Button icon="lucide-x" variant="ghost" @click="dismiss" />
       </div>
     </div>