Skip to content

fix(web): keep sidebar controls visible with long workspace names - #286

Merged
steipete merged 1 commit into
openclaw:mainfrom
isaiahknight-va:typ/sidebar-long-workspace-name
Oct 7, 2026
Merged

steipete merged 1 commit into
openclaw:mainfrom
isaiahknight-va:typ/sidebar-long-workspace-name

Conversation

@isaiahknight-va

@isaiahknight-va isaiahknight-va commented Oct 2, 2026 •

Copy link
Copy Markdown
Contributor

Fixes #284.

Long workspace or account names let the sidebar’s implicit grid column grow beyond the sidebar, clipping Create channel, Start direct message, and collapse controls. Constrain that column with minmax(0, 1fr) so the existing ellipsis rules work. Row layout and permissions are unchanged.

The candidate includes browser regressions, regenerated embedded assets, documentation, and an Unreleased entry. Thanks @isaiahknight-va for the repair and @NOLXII for the report.

Validation on AWS Crabbox: unchanged production CSS failed all three long-name cases (desktop workspace, mobile drawer, desktop account), while the short-name control passed. All four cases pass after the fix, including bounding-box checks, hit testing, actual dialog opening, truncation, and overflow assertions. Full pnpm check passed. Independent Codex review is scoped-clean through P2, including the embedded assets. Exact-head GitHub CI is required before merge.

The before/after images below were captured from the built app in Chromium with synthetic Northwind/Local Captain data and inspected before upload. These are automated Chromium captures against a disposable test instance; they do not claim interactive Electron validation.

Before: long name clips sidebar controls

After: truncated name and reachable sidebar controls

@isaiahknight-va
isaiahknight-va requested a review from a team as a code owner October 2, 2026 01:30
@clawsweeper

clawsweeper Bot commented Oct 2, 2026 •

Copy link
Copy Markdown
Contributor

🦞👀
ClawSweeper picked this up.

Pull request received. I will update this pull request when review starts.

ClawSweeper review complete

ClawSweeper finished reviewing this revision. The review result is being finalized.

View the workflow run.

@clawsweeper clawsweeper Bot added P2 Normal priority bug or improvement with limited blast radius. proof: sufficient Contributor real behavior proof is sufficient. proof: 📸 screenshot Contributor real behavior proof includes screenshot evidence. rating: 🐚 platinum hermit Good normal PR readiness with ordinary maintainer review expected. status: 👀 ready for maintainer look ClawSweeper has no concrete contributor-facing blocker left for this PR. labels Oct 2, 2026
@clawsweeper

clawsweeper Bot commented Oct 2, 2026 •

Copy link
Copy Markdown
Contributor

Codex review: needs maintainer review before merge. Reviewed October 7, 2026, 1:21 AM ET / 05:21 UTC (Revision 2).

ClawSweeper review

What this changes

The PR constrains the sidebar width so long workspace and account names truncate while controls remain visible, adds browser regressions, and updates embedded assets, documentation, and the changelog.

Merge readiness

✅ Ready for maintainer review

This PR remains useful: main and v0.7.0 still have the clipping defect. The inspected patch and before/after browser proof support landing it without additional review blockers.

Priority: P2
Reviewed head: 307307a3e7f33b72866209f3bc42abdd30861c34

Review scores

Measure Result What it means
Overall readiness 🐚 platinum hermit (4/6) A focused, correct layout repair with convincing browser proof and meaningful regression coverage.
Proof confidence 🦞 diamond lobster (5/6) ✨ media proof bonus Sufficient (screenshot): Inspected built-app Chromium screenshots show the sidebar CSS repair restoring visible creation and collapse controls with the same long workspace name; reported real-browser checks additionally exercise dialogs, mobile layout, and account-name sizing. No stored-data contract changes.
Patch quality 🐚 platinum hermit (4/6) No actionable review findings were identified.

Verification

Check Result Evidence
Real behavior Verified Sufficient (screenshot): Inspected built-app Chromium screenshots show the sidebar CSS repair restoring visible creation and collapse controls with the same long workspace name; reported real-browser checks additionally exercise dialogs, mobile layout, and account-name sizing. No stored-data contract changes.
Evidence reviewed 8 items Repository policy and identity: The origin identifies openclaw/clickclack. Root AGENTS.md was read fully; its SQL generation guidance does not apply to this CSS, asset, documentation, and browser-test change. No nested AGENTS.md or maintainer notes were found in the affected subtrees.
Introduced repair: The pinned main-to-head delta adds one grid-column constraint and its explanatory comment. Existing workspace and account label rules already provide nowrap, hidden overflow, and ellipsis; constraining their containing grid addresses the underlying sizing problem.
Main and release still need the repair: Read-only git blob inspection confirmed that both pinned main and v0.7.0 declare sidebar grid rows without a constrained column and hide overflow. The latest release therefore does not contain this repair.
Findings None None.
Security None None.

How this fits together

ClickClack’s sidebar displays workspace and account names alongside channel and direct-message navigation. Its layout determines whether users can reach creation and collapse controls on desktop and mobile.

flowchart TD
  A[Workspace and account names] --> B[Sidebar grid]
  B --> C[Constrained column width]
  C --> D[Existing name truncation]
  C --> E[Visible navigation controls]
  E --> F[Creation dialogs and sidebar collapse]
Loading

Before merge

None.

Agent review details

Security

None.

Review metrics

Metric Value Why it matters
Source and regression growth production +2 lines, tests +132 lines; 4 browser cases The small layout repair has explicit sizing justification and focused coverage; generated assets and prose are excluded.

Root-cause cluster

Relationship: fixed_by_candidate
Canonical: #284
Summary: This PR is the explicit candidate repair for the linked sidebar clipping issue.

Members:

Proposal only: this assessment does not dispatch repair, suppress jobs, mutate sibling items, close, or merge anything.

Technical review

Best possible solution:

Keep the existing truncation and control behavior, with a zero-minimum sidebar grid column across desktop and mobile layouts.

Do we have a high-confidence way to reproduce the issue?

Yes: long names encounter an unconstrained implicit grid column on main, matching the inspected before image and reported browser measurements. This read-only review did not execute the application.

Is this the best way to solve the issue?

Yes: constraining the existing grid column is a narrow repair that enables existing ellipsis styling and preserves control behavior.

AGENTS.md: found, but no applicable review policy affected this item.

Codex review notes: model internal, reasoning medium; reviewed against 94e3b719f49c.

Labels

Label changes:

No label changes.

Label justifications:

  • P2: This fixes bounded sidebar friction while the workspace and alternative creation paths remain functional.
  • rating: 🐚 platinum hermit: Overall readiness is 🐚 platinum hermit; proof is 🦞 diamond lobster and patch quality is 🐚 platinum hermit.
  • status: 👀 ready for maintainer look: ClawSweeper has no concrete contributor-facing blocker left for this PR. Sufficient (screenshot): Inspected built-app Chromium screenshots show the sidebar CSS repair restoring visible creation and collapse controls with the same long workspace name; reported real-browser checks additionally exercise dialogs, mobile layout, and account-name sizing. No stored-data contract changes.
  • proof: sufficient: Contributor real behavior proof is sufficient. Inspected built-app Chromium screenshots show the sidebar CSS repair restoring visible creation and collapse controls with the same long workspace name; reported real-browser checks additionally exercise dialogs, mobile layout, and account-name sizing. No stored-data contract changes.
  • proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence. Inspected built-app Chromium screenshots show the sidebar CSS repair restoring visible creation and collapse controls with the same long workspace name; reported real-browser checks additionally exercise dialogs, mobile layout, and account-name sizing. No stored-data contract changes.

Evidence

What I checked:

  • Repository policy and identity: The origin identifies openclaw/clickclack. Root AGENTS.md was read fully; its SQL generation guidance does not apply to this CSS, asset, documentation, and browser-test change. No nested AGENTS.md or maintainer notes were found in the affected subtrees. (AGENTS.md:1, 307307a3e7f3)
  • Introduced repair: The pinned main-to-head delta adds one grid-column constraint and its explanatory comment. Existing workspace and account label rules already provide nowrap, hidden overflow, and ellipsis; constraining their containing grid addresses the underlying sizing problem. (apps/web/src/styles/sidebar.css:208, 307307a3e7f3)
  • Main and release still need the repair: Read-only git blob inspection confirmed that both pinned main and v0.7.0 declare sidebar grid rows without a constrained column and hide overflow. The latest release therefore does not contain this repair. (apps/web/src/styles/sidebar.css:205, 94e3b719f49c)
  • Browser proof inspected: Both downloaded PR screenshots were opened locally. The before image clips the long workspace title and creation controls; the after image shows an ellipsized title, both creation buttons, and the collapse control. The captured PR body reports built-app Chromium validation on an AWS Crabbox disposable instance, with three long-name failures before the fix and four passing cases afterward, including hit testing and dialog opening. This establishes browser layout behavior without claiming interactive Electron validation. (307307a3e7f3)
  • Focused regression coverage: Four browser cases cover long workspace names, a short-name control, the mobile drawer, and a long account name. Assertions check containment, viewport placement, hit testing, actual creation-dialog opening, truncation, and sidebar overflow. The account case supplies a desktop bridge stub and does not establish native Electron behavior. (tests/e2e/sidebar-long-workspace-name.spec.ts:25, 307307a3e7f3)
  • Embedded asset consistency: Read-only Python comparisons of complete original and proposed git blobs established that the CSS has exactly one insertion, grid-template-columns:minmax(0,1fr); the application entry changes only the CSS and node filenames; and the renamed node is byte-identical. Both HTML entrypoints update matching asset references. No additional executable behavior or dependency changes were introduced. (apps/api/internal/webassets/dist/_app/immutable/assets/0.D8noWN1z.css:1, 307307a3e7f3)

Likely related people:

  • Peter Steinberger: Suggested for follow-up; no historical authorship or introduction is verified. (role: unverified routing candidate; confidence: low)
  • Sergio Cadavid: Suggested for follow-up; no historical authorship or introduction is verified. (role: unverified routing candidate; confidence: low)
  • Isaiah Knight: Suggested for follow-up; no historical authorship or introduction is verified. (role: unverified routing candidate; confidence: low)

Rating scale

Score Internal tier Crab rank Meaning
6/6 S 🦀 challenger crab Exceptional readiness
5/6 A 🦞 diamond lobster Very strong readiness
4/6 B 🐚 platinum hermit Good normal PR; ordinary maintainer review
3/6 C 🦐 gold shrimp Useful, but confidence is limited
2/6 D 🦪 silver shellfish Proof or implementation needs work
1/6 F 🧂 unranked krab Not merge-ready
N/A NA 🌊 off-meta tidepool Rating does not apply

Overall follows the weaker of proof and patch quality.
Shiny media proof means a screenshot, video, or linked artifact directly shows the changed behavior. Runtime, network, CSP, and security claims still need visible diagnostics.

Workflow

  • ClawSweeper keeps one durable marker-backed review comment per issue or PR.
  • Re-runs edit this comment so the latest verdict, findings, and automation markers stay together instead of adding duplicate bot comments.
  • A fresh review can be triggered by eligible @clawsweeper re-review comments, exact-item GitHub events, scheduled/background review runs, or manual workflow dispatch.
  • PR/issue authors and users with repository write access can comment @clawsweeper re-review or @clawsweeper re-run on an open PR or issue to request a fresh review only.
  • Maintainers can also comment @clawsweeper review to request a fresh review only.
  • Fresh-review commands do not start repair, autofix, rebase, CI repair, or automerge.
  • Maintainer-only repair and merge flows require explicit commands such as @clawsweeper autofix, @clawsweeper automerge, @clawsweeper fix ci, or @clawsweeper address review.
  • Maintainers can comment @clawsweeper explain to ask for more context, or @clawsweeper stop to stop active automation.

History

Review history (1 earlier review cycle)
  • reviewed 2026-10-02T01:34:14.842Z sha cfda5b8 :: needs maintainer review before merge. :: none

Constrain the sidebar grid column so existing label truncation preserves reachable creation controls. Fixes openclaw#284.

Co-authored-by: Isaiah Knight <323176659+isaiahknight-va@users.noreply.github.com>
@steipete
steipete force-pushed the typ/sidebar-long-workspace-name branch from cfda5b8 to 307307a Compare October 7, 2026 05:15
@steipete
steipete merged commit d59e804 into openclaw:main Oct 7, 2026
11 checks passed
@steipete

steipete commented Oct 7, 2026

Copy link
Copy Markdown
Contributor

Fixed in #286, merged as d59e804. Thanks @isaiahknight-va and @NOLXII.

The labels already had ellipsis rules; the implicit grid column was expanding past the sidebar’s fixed width. Constraining it to minmax(0, 1fr) fixes the actual clipping cause.

On unchanged production CSS, pnpm test:e2e tests/e2e/sidebar-long-workspace-name.spec.ts --workers=2 reproduced three failures (long workspace, mobile drawer, desktop account) while the short-name control passed. All four pass after the fix, including hit testing and opening the creation dialogs. Full pnpm check passed on AWS Crabbox, and independent P2 autoreview was clean. Exact-head server/web/Docker/browser CI and desktop CI passed, including embedded-build repeatability.

Inspected synthetic Chromium proof:

Before: clipped sidebar controls
After: reachable sidebar controls

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

Labels

P2 Normal priority bug or improvement with limited blast radius. proof: 📸 screenshot Contributor real behavior proof includes screenshot evidence. proof: sufficient Contributor real behavior proof is sufficient. rating: 🐚 platinum hermit Good normal PR readiness with ordinary maintainer review expected. status: 👀 ready for maintainer look ClawSweeper has no concrete contributor-facing blocker left for this PR.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Long/wrapping workspace name clips the Channels and Direct Messages "+" buttons in the sidebar

2 participants