fix: make other dependent component responsive
This commit is contained in:
parent
41724aad08
commit
615ff0a2dc
@ -12,14 +12,14 @@
|
||||
<template v-slot:editor="{ editor }">
|
||||
<EditorContent
|
||||
:class="[
|
||||
editable && 'mx-10 max-h-[50vh] overflow-y-auto border-t py-3',
|
||||
editable && 'sm:mx-10 mx-4 max-h-[50vh] overflow-y-auto border-t py-3',
|
||||
]"
|
||||
:editor="editor"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:bottom>
|
||||
<div v-if="editable" class="flex flex-col gap-2">
|
||||
<div class="flex flex-wrap gap-2 px-10">
|
||||
<div class="flex flex-wrap gap-2 sm:px-10 px-4">
|
||||
<AttachmentItem
|
||||
v-for="a in attachments"
|
||||
:key="a.file_url"
|
||||
@ -35,7 +35,7 @@
|
||||
</AttachmentItem>
|
||||
</div>
|
||||
<div
|
||||
class="flex justify-between gap-2 overflow-hidden border-t px-10 py-2.5"
|
||||
class="flex justify-between gap-2 overflow-hidden border-t sm:px-10 px-4 py-2.5"
|
||||
>
|
||||
<div class="flex items-center overflow-x-auto">
|
||||
<TextEditorFixedMenu
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex justify-between gap-3 border-t px-10 py-2.5">
|
||||
<div class="flex justify-between gap-3 border-t sm:px-10 px-4 py-2.5">
|
||||
<div class="flex gap-1.5">
|
||||
<Button
|
||||
ref="sendEmailRef"
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
:editable="editable"
|
||||
>
|
||||
<template #top>
|
||||
<div class="mx-10 flex items-center gap-2 border-t py-2.5">
|
||||
<div class="sm:mx-10 mx-4 flex items-center gap-2 border-t py-2.5">
|
||||
<span class="text-xs text-gray-500">{{ __('SUBJECT') }}:</span>
|
||||
<TextInput
|
||||
class="flex-1 border-none bg-white hover:bg-white focus:border-none focus:!shadow-none focus-visible:!ring-0"
|
||||
@ -17,7 +17,7 @@
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="mx-10 flex items-center gap-2 border-t py-2.5"
|
||||
class="sm:mx-10 mx-4 flex items-center gap-2 border-t py-2.5"
|
||||
:class="[cc || bcc ? 'border-b' : '']"
|
||||
>
|
||||
<span class="text-xs text-gray-500">{{ __('TO') }}:</span>
|
||||
@ -32,7 +32,7 @@
|
||||
</div>
|
||||
<div
|
||||
v-if="cc"
|
||||
class="mx-10 flex items-center gap-2 py-2.5"
|
||||
class="sm:mx-10 mx-4 flex items-center gap-2 py-2.5"
|
||||
:class="bcc ? 'border-b' : ''"
|
||||
>
|
||||
<span class="text-xs text-gray-500">{{ __('CC') }}:</span>
|
||||
@ -46,7 +46,7 @@
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="bcc" class="mx-10 flex items-center gap-2 py-2.5">
|
||||
<div v-if="bcc" class="sm:mx-10 mx-4 flex items-center gap-2 py-2.5">
|
||||
<span class="text-xs text-gray-500">{{ __('BCC') }}:</span>
|
||||
<MultiselectInput
|
||||
ref="bccInput"
|
||||
@ -62,14 +62,14 @@
|
||||
<template v-slot:editor="{ editor }">
|
||||
<EditorContent
|
||||
:class="[
|
||||
editable && 'mx-10 max-h-[50vh] overflow-y-auto border-t py-3',
|
||||
editable && 'sm:mx-10 mx-4 max-h-[50vh] overflow-y-auto border-t py-3',
|
||||
]"
|
||||
:editor="editor"
|
||||
/>
|
||||
</template>
|
||||
<template v-slot:bottom>
|
||||
<div v-if="editable" class="flex flex-col gap-2">
|
||||
<div class="flex flex-wrap gap-2 px-10">
|
||||
<div class="flex flex-wrap gap-2 sm:px-10 px-4">
|
||||
<AttachmentItem
|
||||
v-for="a in attachments"
|
||||
:key="a.file_url"
|
||||
@ -85,7 +85,7 @@
|
||||
</AttachmentItem>
|
||||
</div>
|
||||
<div
|
||||
class="flex justify-between gap-2 overflow-hidden border-t px-10 py-2.5"
|
||||
class="flex justify-between gap-2 overflow-hidden border-t sm:px-10 px-4 py-2.5"
|
||||
>
|
||||
<div class="flex items-center overflow-x-auto">
|
||||
<TextEditorFixedMenu
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="flex flex-col gap-1.5 border-b px-6 py-3">
|
||||
<div class="flex flex-col gap-1.5 border-b sm:px-6 py-3 px-4">
|
||||
<div
|
||||
v-for="s in slaSection"
|
||||
:key="s.label"
|
||||
class="flex items-center gap-2 text-base leading-5"
|
||||
>
|
||||
<div class="w-[106px] text-sm text-gray-600">{{ __(s.label) }}</div>
|
||||
<div class="sm:w-[106px] w-36 text-sm text-gray-600">{{ __(s.label) }}</div>
|
||||
<div class="grid min-h-[28px] items-center">
|
||||
<Tooltip v-if="s.tooltipText" :text="__(s.tooltipText)">
|
||||
<div class="ml-2 cursor-pointer">
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
class="flex items-center gap-2 px-3 leading-5 first:mt-3"
|
||||
>
|
||||
<Tooltip :text="__(field.label)" hoverDelay="1">
|
||||
<div class="w-[106px] shrink-0 truncate text-sm text-gray-600">
|
||||
<div class="sm:w-[106px] w-36 shrink-0 truncate text-sm text-gray-600">
|
||||
<span>{{ __(field.label) }}</span>
|
||||
<span class="text-red-500">{{ field.reqd ? ' *' : '' }}</span>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="reply?.message"
|
||||
class="flex items-center justify-around gap-2 px-10 pt-2"
|
||||
class="flex items-center justify-around gap-2 sm:px-10 px-4 pt-2"
|
||||
>
|
||||
<div
|
||||
class="mb-1 ml-13 flex-1 cursor-pointer rounded border-0 border-l-4 border-green-500 bg-gray-100 p-2 text-base text-gray-600"
|
||||
@ -18,7 +18,7 @@
|
||||
|
||||
<Button variant="ghost" icon="x" @click="reply = {}" />
|
||||
</div>
|
||||
<div class="flex items-end gap-2 px-10 py-2.5">
|
||||
<div class="flex items-end gap-2 sm:px-10 px-4 py-2.5">
|
||||
<div class="flex h-8 items-center gap-2">
|
||||
<FileUploader @success="(file) => uploadFile(file)">
|
||||
<template v-slot="{ openFileSelector }">
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user