fix: Fix bubble design in RTL (#10683)

Co-authored-by: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
This commit is contained in:
Shivam Mishra
2025-01-15 00:44:13 +05:30
committed by GitHub
parent b3d0d466ee
commit 7b31b5ad6e
8 changed files with 76 additions and 19 deletions

View File

@@ -13,13 +13,10 @@ const readableTime = computed(() =>
<template>
<BaseBubble
class="px-2 py-0.5 !rounded-full flex items-center gap-2"
v-tooltip.top="readableTime"
class="px-2 py-0.5 !rounded-full flex min-w-0 items-center gap-2"
data-bubble-name="activity"
>
<span v-dompurify-html="content" :title="content" class="truncate" />
<div v-if="readableTime" class="w-px h-3 rounded-full bg-n-slate-7" />
<time class="text-n-slate-10 truncate flex-shrink" :title="readableTime">
{{ readableTime }}
</time>
<span v-dompurify-html="content" :title="content" />
</BaseBubble>
</template>

View File

@@ -29,8 +29,10 @@ const varaintBaseMap = {
};
const orientationMap = {
[ORIENTATION.LEFT]: 'left-bubble rounded-xl rounded-bl-sm',
[ORIENTATION.RIGHT]: 'right-bubble rounded-xl rounded-br-sm',
[ORIENTATION.LEFT]:
'left-bubble rounded-xl ltr:rounded-bl-sm rtl:rounded-br-sm',
[ORIENTATION.RIGHT]:
'right-bubble rounded-xl ltr:rounded-br-sm rtl:rounded-bl-sm',
[ORIENTATION.CENTER]: 'rounded-md',
};

View File

@@ -55,7 +55,7 @@ const showMeta = computed(() => {
<template>
<section
v-show="showMeta"
class="space-y-1 pr-9 border-b border-n-strong text-sm"
class="space-y-1 rtl:pl-9 ltr:pr-9 border-b border-n-strong text-sm break-words"
:class="hasError ? 'text-n-ruby-11' : 'text-n-slate-11'"
>
<template v-if="showMeta">

View File

@@ -109,7 +109,10 @@ const textToShow = computed(() => {
</button>
</div>
</section>
<section v-if="attachments.length" class="px-4 pb-4 space-y-2">
<section
v-if="Array.isArray(attachments) && attachments.length"
class="px-4 pb-4 space-y-2"
>
<AttachmentChips :attachments="attachments" class="gap-1" />
</section>
</BaseBubble>

View File

@@ -14,7 +14,7 @@ const isTemplate = computed(() => {
});
const isEmpty = computed(() => {
return !content.value && !attachments.value.length;
return !content.value && !attachments.value?.length;
});
</script>