6fd49f78c8
Keep long structure selections within the shared Messages composer on narrow layouts. - Make structure picker controls shrinkable and full-width in mobile stacks. - Cover long-label attachment behavior and shared full-page/modal callers. - Add a patch changeset for the mobile containment fix. Files changed: .../fn-8820-message-composer-mobile-width.md | 7 +++++ .../dashboard/app/components/MessageComposer.css | 17 +++++++++++ .../__tests__/MessageComposer.mobile-width.test.ts | 34 ++++++++++++++++++++++ .../components/__tests__/MessageComposer.test.tsx | 14 +++++++++ 4 files changed, 72 insertions(+) Fusion-Task-Id: FN-8820 Fusion-Task-Lineage: a66d51a6-6d92-4402-938c-698c09177583 Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
40 lines
1.2 KiB
CSS
40 lines
1.2 KiB
CSS
/* FNXC:NativeStructureEmbed 2026-07-22-10:30: A matching custom drag is visible without leaving an empty drop shell when ordinary compose is idle. */
|
|
.message-composer--native-structure-drag-over {
|
|
outline: solid var(--border-strong);
|
|
outline-offset: calc(var(--space-xs) * -1);
|
|
}
|
|
|
|
.message-composer-structure-list > li {
|
|
align-items: start;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-sm);
|
|
}
|
|
|
|
.message-composer-structure-list .native-structure-preview {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
/*
|
|
FNXC:MessageComposerMobileWidth 2026-08-07-03:22:
|
|
Long native-structure kind and label values must not give the shared Messages picker an intrinsic width that escapes a narrow composer. The shared select remains shrinkable at every breakpoint; mobile explicitly fills its stacked field so both full-page and modal callers inherit containment.
|
|
*/
|
|
.message-composer-structure-controls .message-composer-select {
|
|
min-width: 0;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.message-composer-field--structures,
|
|
.message-composer-structure-controls {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.message-composer-structure-list > li {
|
|
align-items: stretch;
|
|
}
|
|
}
|