fix(conversation): refactor layout utilities to logical properties for RTL (#15341)

This commit is contained in:
Khush Raghav Nanda
2026-08-12 21:35:17 +05:30
committed by GitHub
parent d310e2c619
commit 958fc37ba1
3 changed files with 6 additions and 10 deletions

View File

@@ -118,7 +118,7 @@ const copyConversationId = async () => {
<BackButton
v-if="showBackButton"
:back-url="backButtonUrl"
class="ltr:mr-2 rtl:ml-2"
class="me-2"
/>
<Avatar
:name="currentContact.name"
@@ -127,9 +127,7 @@ const copyConversationId = async () => {
:status="currentContact.availability_status"
hide-offline-status
/>
<div
class="flex flex-col items-start min-w-0 ml-2 overflow-hidden rtl:ml-0 rtl:mr-2"
>
<div class="flex flex-col items-start min-w-0 ms-2 overflow-hidden">
<div class="flex flex-row items-center max-w-full gap-1 p-0 m-0">
<span
class="text-sm font-medium truncate leading-tight text-n-slate-12"

View File

@@ -198,7 +198,7 @@ onMounted(() => {
rounded-full
class="flex-shrink-0"
/>
<div class="flex flex-col ml-2 rtl:ml-0 rtl:mr-2 overflow-hidden">
<div class="flex flex-col ms-2 overflow-hidden">
<h3 class="text-base leading-5 m-0 font-medium">
<span
class="overflow-hidden text-n-slate-12 whitespace-nowrap text-ellipsis"
@@ -220,7 +220,7 @@ onMounted(() => {
<span v-dompurify-html="fileNameFromDataUrl" class="truncate" />
</div>
<div class="flex items-center gap-2 ml-2 shrink-0">
<div class="flex items-center gap-2 ms-2 shrink-0">
<NextButton
v-if="isImage"
icon="i-lucide-zoom-in"

View File

@@ -67,9 +67,7 @@ const groupClass = computed(() => {
});
const slaPopoverClass = computed(() => {
return props.showExtendedInfo
? 'ltr:pr-1.5 rtl:pl-1.5 ltr:border-r rtl:border-l border-n-strong'
: '';
return props.showExtendedInfo ? 'pe-1.5 border-e border-n-strong' : '';
});
</script>
@@ -104,7 +102,7 @@ const slaPopoverClass = computed(() => {
<span
v-if="slaValueText"
class="text-xs font-medium"
:class="[slaTextStyles, showExtendedInfo && 'ltr:pl-1.5 rtl:pr-1.5']"
:class="[slaTextStyles, showExtendedInfo && 'ps-1.5']"
>
{{ slaValueText }}
</span>