fix: editor layout in full screen mode

This commit is contained in:
Abhinav Raut
2025-04-11 00:45:28 +05:30
parent 4cfe0ccbd9
commit a49038f965
3 changed files with 8 additions and 3 deletions

View File

@@ -41,7 +41,7 @@
<!-- Fullscreen editor --> <!-- Fullscreen editor -->
<Dialog :open="isEditorFullscreen" @update:open="isEditorFullscreen = false"> <Dialog :open="isEditorFullscreen" @update:open="isEditorFullscreen = false">
<DialogContent <DialogContent
class="max-w-[70%] max-h-[70%] h-[70%] bg-card text-card-foreground p-4 flex flex-col" class="max-w-[60%] max-h-[75%] h-[70%] bg-card text-card-foreground p-4 flex flex-col"
:class="{ '!bg-[#FEF1E1]': messageType === 'private_note' }" :class="{ '!bg-[#FEF1E1]': messageType === 'private_note' }"
@escapeKeyDown="isEditorFullscreen = false" @escapeKeyDown="isEditorFullscreen = false"
:hide-close-button="true" :hide-close-button="true"

View File

@@ -32,7 +32,7 @@
<component <component
:is="isFullscreen ? Minimize2 : Maximize2" :is="isFullscreen ? Minimize2 : Maximize2"
:size="isFullscreen ? '18' : '15'" :size="isFullscreen ? '18' : '15'"
:class="{ 'mr-2': !isFullscreen }" :class="{ 'mr-2': !isFullscreen, 'mr-1 mb-2': isFullscreen }"
/> />
</span> </span>
</div> </div>
@@ -119,6 +119,7 @@
<!-- Editor menu bar with send button --> <!-- Editor menu bar with send button -->
<ReplyBoxMenuBar <ReplyBoxMenuBar
class="mt-1 shrink-0" class="mt-1 shrink-0"
:isFullscreen="isFullscreen"
:handleFileUpload="handleFileUpload" :handleFileUpload="handleFileUpload"
:handleInlineImageUpload="handleInlineImageUpload" :handleInlineImageUpload="handleInlineImageUpload"
:isBold="isBold" :isBold="isBold"

View File

@@ -1,5 +1,8 @@
<template> <template>
<div class="flex justify-between items-center h-14 relative"> <div
class="flex justify-between h-14 relative"
:class="{ 'items-end': isFullscreen, 'items-center': !isFullscreen }"
>
<EmojiPicker <EmojiPicker
ref="emojiPickerRef" ref="emojiPickerRef"
:native="true" :native="true"
@@ -58,6 +61,7 @@ const emit = defineEmits(['emojiSelect'])
// Using defineProps for props that don't need two-way binding // Using defineProps for props that don't need two-way binding
defineProps({ defineProps({
isFullscreen: Boolean,
isSending: Boolean, isSending: Boolean,
enableSend: Boolean, enableSend: Boolean,
handleSend: Function, handleSend: Function,