fix(app): align session composer with timeline width by Astro-Han · Pull Request #456 · Astro-Han/pawwork

Astro-Han · 2026-05-05T14:35:45Z

Summary

Align the session composer column with the timeline on narrow desktop/tablet-width sessions by matching the composer wrapper inset to the message container inset below md.
Add stable selectors for the visible session timeline/composer columns.
Replace the old 2xl composer width test that measured the full-width outer dock with a regression test that measures the real timeline column, composer column, assistant content, and visible composer shell.

Why

Closes #455.

After v2026.5.5, the visible session flow could appear narrower than the bottom composer/input bar. The root boundary issue was that the old E2E selector targeted [data-component="session-prompt-dock"], which is intentionally full width, instead of the visible composer column/shell.

The red test reproduced the user-facing mismatch at a 744px viewport: assistant content width + 1 was 717, while the visible composer shell was 722.5.

Related Issue

Closes #455

Human Review Status

Pending. A human should make the final merge decision after reviewing the final diff and verification evidence.

Review Focus

Confirm the fix stays at the session layout boundary and does not mix in [Feature] Rewrite packages/ui + packages/app visual layer against PawWork design system (incremental PR series) #440 token/font work.
Confirm the E2E test measures visible DOM nodes, not the outer full-width dock.
Confirm the existing refactor: composer and message surface polish after #208 #217 intent is preserved: at 2xl, the composer column is still capped at 920px rather than expanding to the 1000px timeline cap.

Risk Notes

Low. This changes only the session composer wrapper inset below md and adds non-visual selectors. No data, API, persistence, desktop IPC, or token changes.

How To Verify

Red check: bun --cwd packages/app test:e2e e2e/app/session.spec.ts -g "session timeline visible content" failed before the fix with Expected >= 722.5, Received 717
Focused regression: bun --cwd packages/app test:e2e e2e/app/session.spec.ts -g "session timeline visible content" -> 1 passed
Session E2E file: bun --cwd packages/app test:e2e e2e/app/session.spec.ts -> 3 passed
Typecheck: bun --cwd packages/app typecheck -> exit 0
Diff check: git diff --check -> no whitespace errors

Screenshots or Recordings

Not attached. The visible layout change is covered by the bounding-box E2E at 744px and 1600px viewports, including the visible composer shell and assistant content width relationship.

Checklist

Summary by CodeRabbit

Tests
- Enhanced layout testing for session composer and timeline components, with improved assertions for width and position constraints across different viewport sizes.
Refactor
- Adjusted responsive padding in the session composer region.

coderabbitai · 2026-05-05T14:35:51Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 859d3ae5-2980-4c6a-9e8d-178353463ed3

📥 Commits

Reviewing files that changed from the base of the PR and between b1656c3 and 4645205.

📒 Files selected for processing (4)

packages/app/e2e/app/session.spec.ts
packages/app/e2e/selectors.ts
packages/app/src/pages/session/composer/session-composer-region.tsx
packages/app/src/pages/session/message-timeline.tsx

📝 Walkthrough

Walkthrough

This PR fixes a layout width mismatch between the session timeline and composer columns by adding test infrastructure (selectors and data-component attributes), adjusting composer padding for proper alignment across viewport sizes, and introducing a comprehensive E2E test to assert width and positioning relationships.

Changes

Session Layout Width Alignment

Layer / File(s)	Summary
Test Infrastructure `packages/app/e2e/selectors.ts`	Exports `sessionComposerColumnSelector` and `sessionTimelineColumnSelector` for E2E layout assertions.
DOM Instrumentation `packages/app/src/pages/session/message-timeline.tsx`, `packages/app/src/pages/session/composer/session-composer-region.tsx`	Adds `data-component` attributes to timeline and composer column elements for selector targeting.
Layout Adjustment `packages/app/src/pages/session/composer/session-composer-region.tsx`	Updates padding from `px-3` to conditional `px-4 md:px-3` (non-home) or `px-3` (home) to align composer width with timeline across breakpoints.
E2E Test / Regression Prevention `packages/app/e2e/app/session.spec.ts`	Replaces fixed-width assertion with layout test that measures bounding boxes, computes element centers, and asserts width/position equality between timeline and composer columns across viewport sizes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

Astro-Han/pawwork#217: Modifies session composer layout styling and widths in the same file.
Astro-Han/pawwork#424: Adjusts session composer/timeline selectors, data-component attributes, and layout test expectations.
Astro-Han/pawwork#375: Modifies the session timeline component structure and spacing.

Suggested labels

app

Poem

🐰 Hop, hop, align the columns true!
Timeline and composer, both on queue.
Padding tweaks and data-marks so bright,
Now the session layout's set just right!
No more misalignment in sight! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: aligning the session composer width with the timeline width, which directly addresses the core issue.
Description check	✅ Passed	The PR description follows the template structure with all major sections completed: summary, why, related issue, review focus, risk notes, verification steps, checklist, and human review status.
Linked Issues check	✅ Passed	The PR successfully implements all coding requirements from issue `#455`: aligns composer wrapper inset below md breakpoint, adds stable selectors for timeline/composer columns, and replaces E2E test to measure visible DOM nodes instead of full-width dock.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to the linked issue `#455`: layout alignment in composer/timeline, selector additions, and E2E test refactoring. No unrelated refactors, dependencies, or tangential changes detected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch codex/fix-session-width-regression

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

gemini-code-assist

Code Review

This pull request enhances the session layout by adjusting padding in the composer region and introducing new data-component attributes to facilitate more robust testing. It replaces a specific 2xl viewport test with a comprehensive end-to-end test that ensures the session timeline and composer shell maintain correct alignment and width relationships across various screen sizes. I have no feedback to provide as there were no review comments.

Root cause: - #456 was present in the published release assets, but the earlier fix only covered the narrow viewport and 2xl viewport paths. - The md desktop band still used `md:max-w-200` for the session timeline. In PawWork, `--spacing: 0.25rem` resolves against a 13px root font size, so `max-w-200` became 650px instead of the intended 800px. - The composer used fixed pixel caps (`md:max-w-[720px]`, `2xl:max-w-[920px]`), so at around a 893px CSS viewport the visible composer shell became wider than the conversation flow. Fix: - Replace the session timeline and message item md cap with explicit `md:max-w-[800px]`. - Keep the existing `2xl:max-w-[1000px]` timeline cap unchanged. - Add an E2E regression case at 893x776 to cover the missed md viewport band. Review notes: - Gemini suggested moving the 1000px cap to `xl` and adding a 1280px test, but that was not applied because the composer does not become 920px at `xl`; it remains 720px until `2xl`. - Existing 893px coverage verifies the md relationship, and the existing 1600px assertion verifies the 2xl relationship. Verification: - `bun --cwd packages/app test:e2e e2e/app/session.spec.ts` passed locally. - `bun --cwd packages/app typecheck` passed locally. - `git diff --check` passed locally. - Electron dev visual check confirmed the composer no longer appears wider than the conversation flow. - GitHub checks for PR #464 passed before merge. Closes #456.

Root cause: - PR #464 fixed the original composer/timeline mismatch by replacing the session timeline medium-width cap with explicit `md:max-w-[800px]`. - The #440 UI slice merge chain later regressed that fix. PR #461 first changed both timeline caps back to `md:max-w-200`, which resolves to about 650px with PawWork's 13px root font. - PR #460 then kept that same `message-timeline.tsx` state while removing dead delete-session code, so #479 surfaced as the composer still appearing wider than the reading column at right-panel-hidden desktop widths. Fix: - Restore both session timeline medium-width caps to `md:max-w-[800px]`. - Keep the existing 2xl timeline cap and composer caps unchanged, preserving the prior #217/#456 intent that composer remains inset at very wide desktop sizes. - Add a focused E2E checkpoint for #479: viewport 1280x900 with `#right-panel[aria-hidden="true"]`, then reuse the existing timeline/composer bounding-box contract. Verification: - Red check: temporarily restored the old `md:max-w-200` cap and confirmed the focused E2E failed at the new 1280px/right-panel-hidden checkpoint with timeline 651px vs composer 720px. - Focused E2E passed: `bun --cwd packages/app test:e2e e2e/app/session.spec.ts -g "session timeline visible content is not narrower than composer shell"`. - Typecheck passed: `bun --cwd packages/app typecheck`. - Diff check passed: `git diff --check`. - PR CI passed, including typecheck, unit-app, unit-opencode, unit-desktop, e2e-artifacts, smoke-macos-arm64, CodeQL, dependency review, commit lint, and PR title lint. Follow-up: - No immediate product follow-up is required for #479. - A separate architecture issue may still be worth opening later for the broader session width contract, because timeline, message item, and composer width values are still split across files and have accumulated breakpoint-specific tests. Closes #479.

fix(app): align session composer with timeline width

338d439

Astro-Han added bug Something isn't working P2 Medium priority ui Design system and user interface labels May 5, 2026

gemini-code-assist Bot reviewed May 5, 2026

View reviewed changes

test(app): tighten session width contract

4645205

Astro-Han merged commit 5627658 into dev May 5, 2026
22 checks passed

Astro-Han deleted the codex/fix-session-width-regression branch May 5, 2026 15:13

Astro-Han mentioned this pull request May 6, 2026

fix(app): keep session composer within timeline width #464

Merged

11 tasks

Astro-Han mentioned this pull request May 6, 2026

fix(app): restore session timeline width cap #483

Merged

11 tasks

coderabbitai Bot mentioned this pull request May 10, 2026

fix(app): restore prompt popover visibility #525

Merged

11 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(app): align session composer with timeline width#456

fix(app): align session composer with timeline width#456
Astro-Han merged 2 commits into
devfrom
codex/fix-session-width-regression

Astro-Han commented May 5, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

coderabbitai Bot commented May 5, 2026 •

edited

Loading

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Poem

❌ Failed checks (1 warning)

Uh oh!

gemini-code-assist Bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

Astro-Han commented May 5, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why

Related Issue

Human Review Status

Review Focus

Risk Notes

How To Verify

Screenshots or Recordings

Checklist

Summary by CodeRabbit

Uh oh!

coderabbitai Bot commented May 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested labels

Poem

❌ Failed checks (1 warning)

Uh oh!

gemini-code-assist Bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Astro-Han commented May 5, 2026 •

edited by coderabbitai Bot

Loading

coderabbitai Bot commented May 5, 2026 •

edited

Loading