fix(inbox/mobile): reply composer no longer hides the "Envoyer" button

On mobile the conversation full-page used a fixed height + overflow:hidden, and
the reply q-editor had no max-height — a long body/signature grew it unbounded
and pushed the send button past the clipped bottom (user had to shorten the email).

- q-editor: max-height=40vh → content scrolls internally, toolbar + send row stay put.
- ConversationFullPage @media (max-width:700px): height auto + min-height 100dvh +
  overflow visible → the page scrolls vertically instead of clipping.

Verified at 390x844 with a 27-line signature: editor caps at 40vh (overflow auto),
"Envoyer le courriel" stays in view.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
louispaulb 2026-06-15 06:24:30 -04:00
parent 5ab14cac44
commit 3561efc1c7
2 changed files with 8 additions and 1 deletions

View File

@ -397,7 +397,7 @@
</div>
<!-- COURRIEL : éditeur WYSIWYG (type Gmail) envoie du HTML dans le même fil -->
<template v-if="isEmailConv">
<q-editor v-model="draftHtml" min-height="6rem" class="email-editor"
<q-editor v-model="draftHtml" min-height="6rem" max-height="40vh" class="email-editor"
:toolbar="[['bold','italic','underline','strike'],['unordered','ordered'],['link','removeFormat'],['undo','redo']]"
placeholder="Rédiger la réponse… (mise en forme, listes, liens — part dans le fil Gmail)" />
<div class="row items-center q-mt-xs">

View File

@ -36,4 +36,11 @@ watch(() => route.params.token, t => openByToken(t))
.cfp-page { padding: 0; height: calc(100vh - 50px); display: flex; flex-direction: column; overflow: hidden; }
.cfp-bar { padding: 4px 8px; border-bottom: 1px solid var(--ops-border, #e2e8f0); background: #fff; flex: 0 0 auto; }
.cfp-page :deep(.conv-fullpage) { flex: 1 1 auto; min-height: 0; }
/* Mobile : ne pas CLIPPER. La hauteur fixe + overflow:hidden cachait le bouton « Envoyer » quand
le composeur était long (grosse signature). On laisse la PAGE défiler verticalement ; l'éditeur
est borné (max-height 40vh) et défile en interne le bouton reste toujours atteignable. */
@media (max-width: 700px) {
.cfp-page { height: auto; min-height: calc(100dvh - 50px); overflow: visible; }
}
</style>