[6207] fix(frontend): Keep session titles readable on phones - #6280
[6207] fix(frontend): Keep session titles readable on phones#6280vedtod07 wants to merge 2 commits into
Conversation
The shared SessionRow pinned the agent name at 160px, so phone titles collapsed to a single letter. Move the agent under the title below md.
|
@vedtod07 is attempting to deploy a commit to the agenta projects Team on Vercel. A member of the Team first needs to authorize it. |
|
✅ Thanks @vedtod07! This PR now meets the contribution requirements and has been reopened. A maintainer will review it soon. |
github-actions
Bot
added
the
incomplete-pr
|
|
📝 WalkthroughSummary by CodeRabbit
Walkthrough
ChangesResponsive session row layout
Estimated code review effort: 2 (Simple) | ~10 minutes Merge Risk: 🟡 Moderate · up to On phones, a supplied agent link can be rendered inside the session title button, which may cause conflicting taps and invalid interactive behavior. Move the agent content outside the title button before merging. 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
Full details: Linked Issues checkExplanation The changes satisfy the coding objectives in issue Full details: Docstring CoverageExplanation 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 2 files. ✨ Finishing Touches 💡 1🛠️ Fix failing CI checks 💡
🧪 Generate unit tests (beta)
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. Comment |
github-actions
Bot
removed
the
incomplete-pr
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
web/packages/agenta-sessions-ui/tests/unit/SessionRow.test.ts (1)
118-132: 🎯 Functional Correctness | 🔵 TrivialRun browser validation for both session surfaces.
SessionRow.test.tschecks class names only. The/mHome sessions block uses the separate row implementation insideSessionCardList, so this test does not cover it. Validate 390px portrait and landscape layouts on Android Chrome and iOS Safari, including long titles and status, badge, timestamp, pin, and menu controls.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: cea8456c-5875-4468-b59c-fb183c038bfe
⛔ Files ignored due to path filters (1)
.github/pr-assets/6280-session-row-phone.pngis excluded by!**/*.png
📒 Files selected for processing (2)
web/packages/agenta-sessions-ui/src/SessionRow.tsxweb/packages/agenta-sessions-ui/tests/unit/SessionRow.test.ts
Included review availability: Your plan provides up to 8 included reviews per hour; 7 remain after this review.
| {showAgent ? ( | ||
| <span className="w-full min-w-0 truncate md:hidden">{renderAgentLabel()}</span> | ||
| ) : null} | ||
| </button> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
🔎 Supported by static analysis
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Verify whether SessionRow callers provide interactive custom agent renderers.
rg -n -C 6 '\brenderAgent\b' web/packages/agenta-sessions-ui web --glob '*.{ts,tsx}'Repository: Agenta-AI/agenta
Length of output: 6739
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '%s\n' '--- SessionRow.tsx relevant source ---'
sed -n '1,145p' web/packages/agenta-sessions-ui/src/SessionRow.tsx
printf '%s\n' '--- renderAgent prop assignments/usages ---'
rg -n -C 8 'renderAgent\s*=' web/packages --glob '*.{ts,tsx}'Repository: Agenta-AI/agenta
Length of output: 6498
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '%s\n' '--- SessionRow call sites ---'
rg -n -C 10 '<SessionRow\b|SessionRow\s*\(' web/packages --glob '*.{ts,tsx}'
printf '%s\n' '--- renderAgent identifiers outside the declaration ---'
rg -n -C 6 '\brenderAgent\b' web/packages --glob '*.{ts,tsx}'Repository: Agenta-AI/agenta
Length of output: 16825
Keep interactive agent content outside the title button.
When a caller supplies the documented link surface through renderAgent, this mobile branch renders it inside the title <button>. The nested control can trigger onOpen and violates button content rules. Move the mobile label into a sibling container.
2 participants
Closes #6207
Summary
On
/m, a session title such asReply with exactly: DURABLErendered asR.... The sharedSessionRowpinned the agent name at 160px (w-40 shrink-0) and the timestamp at 96px, so the title was the only flex child and collapsed on a 390px phone.Changes
Below
md, the agent name moves under the title. Desktop keeps the original single-linew-40slot (hidden md:block). The timestamp no longer forces 96px on phones.Before (phone):
(icon) R... Tool call QA matrix 7a... 1d ago (pin)After (phone): title stays on the first line; agent name sits on the second line.
Testing
Verified locally
pnpm --filter @agenta/sessions-ui teston this machine (pnpm not on PATH). Please run that plus lint in CI / locally.Added or updated tests
SessionRow.test.ts: asserts the phone slot (md:hidden) and desktop slot (hidden md:block w-40).QA follow-up
/msessions list (long title, waiting Tool call chip, two sessions of the same agent) and/mHome. Pin and kebab still tappable. Desktop sessions list unchanged.Demo
Layout mock of the 390px row. Real-phone screenshots still belong in QA as requested on #6207.
Checklist