Skip to content

Side-panel / new-chat composer stuck at ~80 px — #178 auto-grow inline height overrides the .no-messages fill layout #458

Description

@sierragolflima

Summary

In the right-hand side-panel AI chat, the message composer is stuck at roughly 80 px
(≈3.5 lines) and does not grow — whether you type or paste more than ~3.5 lines — even
though the side panel is much taller and has ample empty space above/below the box. This is
a new-chat / side-panel-specific defect, distinct from #178 (which correctly fixed
auto-grow for an ongoing thread with messages).

Screenshot

Image

Steps to reproduce

  1. Open the AI chat in the right-hand side panel (a fresh/new chat).
  2. Type or paste content longer than ~3.5 lines.
  3. Observe: the editable box stays at ~80 px and scrolls internally; it never expands to
    use the visible empty space.

Root cause (code)

The side panel always mounts the new-chat ThreadChatView
(src/MeshWeaver.Blazor.Portal/Chat/ThreadSidePanelContent.razor:65), which runs the view
in its .no-messages state. That state applies a deliberately different composer
layout than a thread-with-messages:

  • .no-messages (side panel / new chat): .input-container { flex: 1 1 auto }
    intended to let the input fill the tall empty slot
    (src/MeshWeaver.Blazor.Portal/Chat/ThreadChatView.razor.css:20-39, per its own comment:
    "the input field grows to occupy the space rather than sitting as a thin bar").
  • with messages (main pane): .input-container { flex: 0 0 auto } — a natural-height
    bottom bar, which is the case AI chat composer input too small — no auto-grow, 80 px initial / 200 px max in Blazor #178's auto-grow was written and tested against.

The #178 auto-grow change pins the editor's outer container to an inline
height: 80px; max-height: min(400px, calc(100vh - 280px)); min-height: 80px
(src/MeshWeaver.Blazor/Components/Monaco/MonacoEditorView.razor:158, the AutoGrow
ContainerStyle), applied by
src/MeshWeaver.Blazor.Portal/Chat/ThreadChatView.razor:947-949
(Height="80px" MaxHeight="min(400px, calc(100vh - 280px))" AutoGrow="true").

That inline height: 80px wins over the .no-messages fill intent, so the editable box
sits at ~80 px at the top of a tall flex:1 .input-container, with empty space below —
exactly the reported symptom. The two features (the #178 auto-grow sizing and the
.no-messages fill layout) were never reconciled.

A second, additive possibility (deployment)

The "does not grow at all, even when typing" part can also be aggravated if the
deployment's application assembly MeshWeaver.Blazor.Portal.dll (which carries
AutoGrow="true") predates the #178 fix while the framework static asset is current —
in that case the JS grow handler (onDidContentSizeChange,
src/MeshWeaver.Blazor/Components/Monaco/MonacoEditorView.razor.js:312-339) is never even
attached. The code conflict above is independent and reproducible from current main;
this is only noted so that whoever verifies also confirms the deployed app assembly
includes commit 706d0ff54 (#178).

Expected behaviour

  • In the new-chat / side-panel composer, the input should use the available vertical space
    per the .no-messages design — no thin ~80 px box floating in a tall slot.
  • Typing or pasting content taller than the box expands the editable area (up to a
    viewport-relative ceiling) and only then scrolls internally — content is never hidden
    while empty space remains.
  • The with-messages composer auto-grow (AI chat composer input too small — no auto-grow, 80 px initial / 200 px max in Blazor #178) must remain unchanged.

Proposed fix direction

Reconcile the two behaviours so the AutoGrow inline height does not override the
.no-messages fill. For example: in the .no-messages state let the auto-grow container
use the fill (a flex:1 / height:100% baseline of its slot) rather than the fixed
height:80px, keeping the max-height/scroll cap; or gate the fixed-80 px baseline to the
with-messages state only. Exact approach left to the implementer — the constraint is that
the #178 with-messages auto-grow keeps working.

Acceptance criteria

  • In the side-panel new-chat composer, typing/pasting > ~4 lines expands the editable area
    (it does not stay at ~80 px with empty space above/below), up to the viewport cap, then
    scrolls.
  • The new-chat composer occupies the available vertical space per the .no-messages design.
  • The with-messages composer auto-grow (AI chat composer input too small — no auto-grow, 80 px initial / 200 px max in Blazor #178) is unchanged in the main pane.
  • Both main-pane and side-panel surfaces pass the checks.

References

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workinguifront-end

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions