fix(app): preserve session tab titles with horizontal scrolling on mobile - #39299
Closed
DevDengChao wants to merge 5 commits into
Closed
fix(app): preserve session tab titles with horizontal scrolling on mobile#39299DevDengChao wants to merge 5 commits into
DevDengChao wants to merge 5 commits into
Conversation
…bile - Change tab slot flex-shrink to shrink-0 so tabs maintain full 224px width - Remove @container (max-width: 64px) query that hid titles on narrow tabs - Existing overflow-x-auto scroll container handles swipe scrolling natively
Contributor
|
Thanks for your contribution! This PR doesn't have a linked issue. All PRs must reference an existing issue. Please:
See CONTRIBUTING.md for details. |
github-actions
Bot
added
needs:compliance
Contributor
|
Thanks for updating your PR! It now meets our contributing guidelines. 👍 |
- Add TitlebarTabStrip story for visual verification of tab scrolling - Add context mocks for global, tabs, server, and session-tab-avatar - Register new mocks in storybook main.ts aliases - Add createTabPromptState export to prompt mock Note: storybook/play assertions require @storybook/test which has pre-existing resolution issues in this monorepo setup. Assertions should be added once the storybook environment is fixed.
- Add self-contained story testing shrink-0 CSS fix (no workspace deps) - Add Playwright smoke test verifying: 8 tab titles visible, scroll overflow, tab slots >= 200px width - Fix preview.tsx to use relative imports for workspace CSS - Update main.ts with direct alias mutation pattern (storybook docs) - Add context mocks and session-tab-avatar stub for future stories - Test passes: 1/1 assertions verified against storybook dev server
- Add mobile-tab-scroll.spec.ts testing real component behavior - Mock server with 8 sessions, seed localStorage, mobile viewport - Assert: 8 tab slots rendered, titles visible, slots >= 200px, scroll container overflows horizontally - Remove storybook story, mocks, and test config (not viable) - Restore storybook main.ts, preview.tsx, prompt.ts to originals - Test passes: 1/1 (28.1s)
DevDengChao
marked this pull request as ready for review
July 28, 2026 14:04
Contributor
|
Automated PR Cleanup Thank you for contributing to opencode. Due to the high volume of PRs from users and AI agents, we periodically close older PRs using automated criteria so maintainers can focus review time on the most active and community-supported contributions. This PR was closed because it matched the following cleanup criteria:
PRs created within the last month are not affected by this cleanup. If you believe this PR was closed incorrectly, or if you are still actively working on it, please leave a comment explaining why it should be reopened. A maintainer can review and reopen it if appropriate. Thanks again for taking the time to contribute. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Issue for this PR
Closes #39302, #38974
Type of change
What does this PR do?
When many session tabs are open on a mobile browser, each tab slot shrinks from 224px to 28px via
flex-shrink. A CSS@container (max-width: 64px)query then hides the title and centers the close button, making sessions unidentifiable.This PR fixes the issue by:
flex-shrinktoshrink-0on tab slot wrappers so each tab maintains its full 224px width@container (max-width: 64px)block that hid titles on narrow tabsThe existing
overflow-x-autoscroll container already supports horizontal scrolling natively, so mobile users can swipe left/right to see additional tabs.How did you verify your code works?
Screenshots / recordings
Checklist