+
(
bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
}}
className={cn(
- 'fixed right-4 bottom-24 z-10',
+ 'fixed end-4 bottom-24 z-10',
'rounded-full p-3 shadow-lg',
'bg-white dark:bg-neutral-800',
'border border-neutral-200 dark:border-neutral-700',
diff --git a/src/components/Messaging/MessageThread.tsx b/src/components/Messaging/MessageThread.tsx
index bb4d340b..1816d108 100644
--- a/src/components/Messaging/MessageThread.tsx
+++ b/src/components/Messaging/MessageThread.tsx
@@ -74,7 +74,7 @@ function LightboxModal({ attachment, onClose }: LightboxModalProps) {
type="button"
onClick={onClose}
className={cn(
- 'absolute top-4 right-4 z-10',
+ 'absolute end-4 top-4 z-10',
'rounded-full p-2',
'bg-white/10 text-white',
'hover:bg-white/20',
@@ -436,7 +436,7 @@ function MessagingSplitView({
data-slot="messaging-list-pane"
className={cn(
'h-full w-full flex-shrink-0',
- 'border-r border-neutral-200 dark:border-neutral-700',
+ 'border-e border-neutral-200 dark:border-neutral-700',
hideMobileClasses[mobileBreakpoint]
)}
style={{
diff --git a/src/tailwind-preset.cjs b/src/tailwind-preset.cjs
index b494a4db..77cb484a 100644
--- a/src/tailwind-preset.cjs
+++ b/src/tailwind-preset.cjs
@@ -112,6 +112,18 @@ module.exports = {
'translate-x-0',
'-translate-x-full',
'[&:has([role=checkbox])]:pe-0',
+ // RTL messaging+AI batch: bubble tails, composer borders/paddings, corner
+ // pins (AIChatModal/AttachmentPicker/MessageList), read-receipt avatar stack
+ 'end-1',
+ 'end-3',
+ 'end-4',
+ 'start-4',
+ 'me-2',
+ 'pe-10',
+ 'border-s-4',
+ 'rounded-ee-md',
+ 'rounded-es-md',
+ 'rtl:space-x-reverse',
// MediaEditor media-surface height cap: the small-screen `dvh` cap, and the
// md variants that hand desktop back its original percentage cap. Purging
// these uncaps the player on a phone, which is the bug the cap exists for.
diff --git a/src/tailwind-preset.ts b/src/tailwind-preset.ts
index 05672612..93a00c02 100644
--- a/src/tailwind-preset.ts
+++ b/src/tailwind-preset.ts
@@ -469,6 +469,18 @@ export const miewebUISafelist = [
'translate-x-0',
'-translate-x-full',
'[&:has([role=checkbox])]:pe-0',
+ // RTL messaging+AI batch: bubble tails, composer borders/paddings, corner
+ // pins (AIChatModal/AttachmentPicker/MessageList), read-receipt avatar stack
+ 'end-1',
+ 'end-3',
+ 'end-4',
+ 'start-4',
+ 'me-2',
+ 'pe-10',
+ 'border-s-4',
+ 'rounded-ee-md',
+ 'rounded-es-md',
+ 'rtl:space-x-reverse',
// SchedulePicker / overflow handling
'overflow-x-auto',
'overflow-hidden',