Skip to content

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

Open
purpshell wants to merge 2 commits into
mainfrom
fix/inbox-two-pane-width
Open

purpshell wants to merge 2 commits into
mainfrom
fix/inbox-two-pane-width

Conversation

@purpshell

@purpshell purpshell commented Oct 25, 2026 •

Copy link
Copy Markdown
Member

Summary

  • The Inbox shows the conversation list beside the thread from 560 px of Inbox width, down from 700 px. The list's minimum width drops to 240 px, which leaves the thread 320 px.
  • Back appears only when the list and the thread can't both show. It used to appear beside the list as well: its rule read the thread pane's width, because the thread is a container too. The Inbox's container is now named and its rules query it.
  • Back has a visible border.

Verification

  • @polymorfa/ui, @polymorfa/react and @polymorfa/elements: 207 of 208 tests pass, typecheck, eslint and prettier pass.
    • The failing test is react.test.tsx "renders attachments, reply quotes, date separators, and status". It is date-dependent: run locally on 2026-10-25 in EET, the night clocks went back, the message now - 2 * 86_400_000 falls on yesterday's date. Nothing in this change touches it.
  • The real Inbox markup, rendered in Chromium with the published and the changed stylesheet:
Inbox width Published This change
400 and 559 px Thread, Back without a border Thread, Back with a border
560, 566 and 652 px Thread only, Back List and thread, no Back
726 and 1024 px List and thread, Back beside the list List and thread, no Back

Release status

Source only. It reaches npm with the next nightly. The nightly publish has failed on every run since Oct 21: the workflow's GitHub App client ID is not set.


View with [code]smith Autofix with [code]smith
Need help on this PR? Tag @codesmith-bot with what you need.

Summary by CodeRabbit

  • Bug Fixes
    • Inbox conversation lists and threads now display side by side at narrower widths, starting at 560 px. The Back button appears when they cannot fit side by side and now has a visible border.
    • The minimum width required for the conversation list is reduced, allowing more room for the thread on narrow screens.
    • Inbox thread and contact layouts now respond to the Inbox’s available width, including a layout change around 1024 px.

@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Oct 25, 2026 •

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review ✅ Completed 2026-10-25T21:20:04.909075Z 9b965da PR opened
🔒 Security Review ✅ Completed 2026-10-25T21:19:52.948004Z 9b965da PR opened
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@coderabbitai

coderabbitai Bot commented Oct 25, 2026 •

Copy link
Copy Markdown

Review in Change Stack →

No actionable comments were generated in the recent review.

Recent review info
Run configuration
  • Source mode: Auto
  • Repository: Unavailable
  • Branch: Unavailable
  • File: No configuration file from this repository applied
  • Commit: Unavailable
  • Layers: Organization UI
  • Review profile: CHILL
  • Plan: Team
  • Run ID: 003ff1cd-44cb-48bf-9cb5-62fb1f3b3fe1
Commits

Reviewing files that changed from the base of the PR and between 9b965da and acdfc79.

Files selected for processing: 2
  • contracts/doc-snippets.json
  • scripts/doc-snippets/recipes.mjs

Included review availability: This review used your included allowance. 0 included reviews remain after this review. Your included PR review attempts over the past 7 days set your current allowance at 1 review per hour.

Walkthrough

The Inbox now uses a named inline-size container and updated responsive layout rules. The list column minimum width is 240px, and the single-panel layout applies at 559px. The narrow layout styles the Back button. The snippet source metadata is updated.

Changes: Inbox updates

Layer / File(s) Summary
Responsive layout and validation
packages/ui/src/styles.ts, packages/ui/test/appearance.test.ts, CHANGELOG.md
The Inbox uses a named inline-size container, a 240px minimum list-column width, and container queries at 559px and 1023px. The narrow layout styles the Back button. The test checks the container and queries, and the changelog records the layout changes.
Snippet source metadata
scripts/doc-snippets/recipes.mjs, contracts/doc-snippets.json
The recipe source commit and the manifest’s source commit and source-files SHA-256 values are updated.

Priority: Normal

Estimated code review effort: 2 (Simple) | ~10 minutes

Change: Bug fix

Merge Risk: Minimal · up to acdfc

No actionable merge-blocking issue is established for these changes. Merge after normal checks.

Pre-merge checks: Passed 5
Check name Status Explanation
Title check Passed The title clearly and concisely summarizes the main Inbox layout and Back-button changes.
Description check Passed The description includes Summary, Verification, and Release status sections. It explains the behavior changes, validation results, known date-dependent test failure, and nightly publication issue.
Docstring Coverage Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 3…
Linked Issues check Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check Passed Check skipped because no linked issues were found for this pull request.
Full details: Docstring Coverage

Explanation

No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 3 files. (1 skipped: 1 unsupported.)

Finishing Touches
📝 Generate docstrings
  • Commit to this branch
  • Create a new PR
  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Comment @coderabbitai help to get the list of available commands.

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 9b965da7ab

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Comment thread packages/ui/src/styles.ts
position: relative;
display: grid;
grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
grid-template-columns: minmax(240px, 380px) minmax(0, 1fr);

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 👍 / 👎.

… when it cannot

The Inbox's layout rules used unnamed container queries. The thread pane
is a container too, so the rule that shows Back read the thread's width
and Back appeared beside the list in the two-pane layout. The Inbox's
container is now named and its rules query it.

The list and the thread sit side by side from 560px of Inbox width
(was 700px); the list's minimum is 240px, leaving the thread 320px.
Back has a visible border where it shows.
@purpshell
purpshell force-pushed the fix/inbox-two-pane-width branch from acdfc79 to fbc7a00 Compare October 28, 2026 03:40

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant