Skip to content

fix(ui): Inbox shows its list beside the thread from 560px; Back only when it cannot #363

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
purpshell wants to merge 2 commits into
base: main
Choose a base branch
from
+32 −10
Open

fix(ui): Inbox shows its list beside the thread from 560px; Back only when it cannot #363

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6bc7fe4
fix(ui): Inbox shows its list beside the thread from 560px; Back only…
purpshell Oct 25, 2026
fbc7a00
chore: bind documentation snippets to the Inbox layout change
purpshell Oct 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,11 @@

## Unreleased

- `@polymorfa/ui` Inbox: the conversation list and the thread sit side by side
from 560 px of Inbox width, down from 700 px, and Back appears only when
they cannot. Back showed beside the list before because its rule read the
thread's width. Back now has a visible border. Source-only until a nightly
publishes.
- All six server SDKs expose optional automatic-pause `reason`/`code` and
optional recipient-skip `messageIndex`/`followUpId` from accepted API source
`9bb1e2ed`. Future reason/code strings and raw envelope fields are retained;
Expand Down
4 changes: 2 additions & 2 deletions contracts/doc-snippets.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"schemaVersion": 1,
"sourceCommit": "f33cd3b9a949f8db495405d0733ca0bcdb4bd3bc",
"sourceFilesSha256": "7af428a30b1becaf20b3e9ce407cc0742d49353fac60a43aba71e568642a12c3",
"sourceCommit": "6bc7fe43a34dc2d7a37ea60a71429549dcb2ae5a",
"sourceFilesSha256": "5d8cbb667d2947c518fd084ee7e640301a85675097231968669919d95f601eda",
"apiVersion": "2026-09-22",
"apiSourceCommit": "171a9683ff45d11a4b5d3917dc428ad2722b0d99",
"specs": {
Expand Down
17 changes: 10 additions & 7 deletions packages/ui/src/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1242,10 +1242,10 @@ video.pmfa-chip-player { max-height: 120px; border-radius: 6px; }

/* Inbox */
.pmfa-inbox {
container-type: inline-size;
container: pmfa-inbox / inline-size;
position: relative;
display: grid;
grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
grid-template-columns: minmax(240px, 380px) minmax(0, 1fr);

@chatgpt-codex-connector chatgpt-codex-connector Bot Oct 25, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Reserve thread width before expanding the conversation list

At the newly supported 560–699px Inbox widths, the first grid track expands to 380px before the 1fr track receives the remaining space. A 560px content box therefore gives the thread only 180px, not the 320px stated in the new comment. The existing thread header must fit its avatar, contact action, padding and gaps into that space, severely truncating the contact identity and squeezing messages and the composer; previously these widths displayed a full-width thread. Cap the list relative to the available width or otherwise reserve 320px for the thread before enabling the two-pane layout.

Useful? React with 👍 / 👎.

grid-template-rows: minmax(0, 1fr);
height: 100%;
min-height: 420px;
Expand All @@ -1254,7 +1254,7 @@ video.pmfa-chip-player { max-height: 120px; border-radius: 6px; }
border-radius: var(--pmfa-r-l);
background: var(--pmfa-c-panel);
}
.pmfa-inbox[data-contact-open] { grid-template-columns: minmax(280px, 360px) minmax(0, 1fr) minmax(260px, 320px); }
.pmfa-inbox[data-contact-open] { grid-template-columns: minmax(240px, 360px) minmax(0, 1fr) minmax(260px, 320px); }
.pmfa-inbox-list {
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -1525,8 +1525,10 @@ video.pmfa-chip-player { max-height: 120px; border-radius: 6px; }
.pmfa-contact-fields > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-top: 1px solid var(--pmfa-c-border); }
.pmfa-contact-fields dt { color: var(--pmfa-c-muted); font-size: 0.75em; font-weight: 500; }
.pmfa-contact-fields dd { margin: 0; font-size: 0.9375em; overflow-wrap: anywhere; }
/* Container queries match the inbox's children; the inbox is the container. */
@container (max-width: 1023px) {
/* Named, because the thread is a container too: an unnamed query would read
the thread's width for the controls inside it. The list and the thread sit
side by side from 560px, where the thread keeps 320px. */
@container pmfa-inbox (max-width: 1023px) {
.pmfa-inbox > .pmfa-thread { grid-column: 2 / -1; }
.pmfa-inbox .pmfa-contact {
position: absolute;
Expand All @@ -1538,11 +1540,12 @@ video.pmfa-chip-player { max-height: 120px; border-radius: 6px; }
animation: pmfa-slide 180ms ease-out;
}
}
@container (max-width: 699px) {
@container pmfa-inbox (max-width: 559px) {
.pmfa-inbox > .pmfa-inbox-list, .pmfa-inbox > .pmfa-thread { grid-column: 1 / -1; grid-row: 1; border-inline-end: 0; }
.pmfa-inbox[data-view="thread"] .pmfa-inbox-list { display: none; }
.pmfa-inbox[data-view="list"] .pmfa-thread { display: none; }
.pmfa-inbox .pmfa-back { display: inline-flex; }
.pmfa-inbox .pmfa-back { display: inline-flex; border-color: var(--pmfa-c-border); background: var(--pmfa-c-bg); color: var(--pmfa-c-fg); }
.pmfa-inbox .pmfa-back:hover:not(:disabled) { background: var(--pmfa-c-surface); }
.pmfa-inbox .pmfa-contact { width: 100%; border-inline-start: 0; }
.pmfa-thread-head { padding-inline-start: 4px; }
}
Expand Down
14 changes: 14 additions & 0 deletions packages/ui/test/appearance.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,20 @@ describe("appearance", () => {
);
});

it("lays out the inbox by its own width, not the thread's", () => {
// The thread is a container too, so an unnamed query showed Back beside the list.
expect(COMPONENT_STYLES).toContain("container: pmfa-inbox / inline-size;");
expect(COMPONENT_STYLES).toContain(
"@container pmfa-inbox (max-width: 559px)",
);
expect(COMPONENT_STYLES).toContain(
"@container pmfa-inbox (max-width: 1023px)",
);
expect(COMPONENT_STYLES).not.toMatch(
/@container \(max-width: (699|1023)px\)/,
);
});

it("lays out chat messages with day separators and direction groups", () => {
const day = new Date(2026, 0, 5, 9).getTime();
const entries = layoutMessages([
Expand Down
2 changes: 1 addition & 1 deletion scripts/doc-snippets/recipes.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Requests come from the pinned OpenAPI and existing native wire fixtures.
// Calls are handwritten in the language modules. Never derive arguments from
// contracts/coverage.json's display-only method names.
export const sourceCommit = "f33cd3b9a949f8db495405d0733ca0bcdb4bd3bc";
export const sourceCommit = "6bc7fe43a34dc2d7a37ea60a71429549dcb2ae5a";
export const apiVersion = "2026-09-22";
export const languages = [
"typescript",
Expand Down
Loading