🤖 fix: show section action buttons on mobile touch devices#2675
🤖 fix: show section action buttons on mobile touch devices#2675ibetitsmike wants to merge 3 commits intomainfrom
Conversation
The action buttons container (+ new workspace, color picker, rename, delete) used opacity-0 group-hover:opacity-100, which keeps them permanently invisible on touch devices that have no hover state. Add the [@media(hover:none)_and_(pointer:coarse)]:opacity-100 variant to make them always visible on mobile, matching the pattern used in WorkspaceListItem.
|
@codex review |
|
Codex Review: Didn't find any major issues. Keep it up! ℹ️ About Codex in GitHubCodex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback". |
|
@codex review |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: c40aaee76d
ℹ️ About Codex in GitHub
Codex has been enabled to automatically 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 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
ibetitsmike
force-pushed
the
mike/fix-mobile-section-buttons
branch
from
c40aaee to
12cd63f
Compare
|
@codex review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 12cd63f133
ℹ️ About Codex in GitHub
Codex has been enabled to automatically 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 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
ibetitsmike
force-pushed
the
mike/fix-mobile-section-buttons
branch
from
12cd63f to
6683ca1
Compare
|
@codex review |
|
@codex review Note: the latest commit already uses |
|
Codex Review: Didn't find any major issues. Bravo. ℹ️ About Codex in GitHubCodex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback". |
ibetitsmike
force-pushed
the
mike/fix-mobile-section-buttons
branch
from
6683ca1 to
c2b20b5
Compare
|
@codex review |
|
Codex Review: Didn't find any major issues. What shall we delve into next? ℹ️ About Codex in GitHubCodex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback". |
Adds IPhone16eSidebarWithSections story that renders the mobile sidebar with a project containing a custom 'Features' section and workspaces assigned to it. The play function asserts that the section action buttons (+, color, rename, delete) are discoverable — catching the regression where opacity-0 group-hover:opacity-100 made them invisible on touch.
ibetitsmike
force-pushed
the
mike/fix-mobile-section-buttons
branch
from
c2b20b5 to
9b18881
Compare
|
@codex review |
|
Codex Review: Didn't find any major issues. 👍 ℹ️ About Codex in GitHubCodex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
If Codex has suggestions, it will comment; otherwise it will react with 👍. When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback". |
Move the 'New workspace in section' button out of the hover-gated action group so it gets its own opacity-0 → opacity-100 on touch independently. Color picker, rename, and delete stay hidden on touch (hover-only).
|
@codex review |
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 4aa8fbd55d
ℹ️ About Codex in GitHub
Codex has been enabled to automatically 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 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| {/* Add Workspace — always visible on touch devices */} | ||
| <Tooltip> | ||
| <TooltipTrigger asChild> | ||
| <button | ||
| onClick={onAddWorkspace} |
There was a problem hiding this comment.
Making the + button always visible on coarse touch devices introduces a tap target directly next to the color/rename/delete controls, but those controls are still hidden only via opacity in SectionHeader and remain interactive. On touch screens, near-miss taps while trying to add a workspace can trigger invisible management actions (including section delete confirmation), which is a real UX/data-safety regression. Please disable pointer interaction for the hover-only control group when it is hidden (or fully hide it on touch).
Useful? React with 👍 / 👎.
1 participant
Section header action buttons were invisible on mobile/touch devices because the container used
opacity-0 group-hover:opacity-100— touch devices don't have hover, so the buttons never appeared.Only the "+" (new workspace) button should be visible on mobile. Color picker, rename, and delete remain hover-only (desktop). The + button is moved out of the hover-gated group and gets its own
[@media(hover:none)_and_(pointer:coarse)]:opacity-100so it appears on touch while the management actions stay hidden.Also adds a Chromatic UI test (
IPhone16eSidebarWithSections) that renders the mobile sidebar with a project containing a custom section, verifying the + button is present on touch viewports.Generated with
mux• Model:anthropic:claude-opus-4-6• Thinking:high• Cost:$1.09