Skip to content

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

Closed

Description

@NOLXII

Version: v0.6.0 (commit 31d299e)

Summary:
When a workspace's name is long enough to wrap to a second line in the sidebar header, the "Create channel" and "Create direct message" + buttons disappear from the Channels and Direct Messages section headers. Short workspace names render correctly.

Steps to reproduce:

  1. Create a workspace with a short name (e.g. "Zainul Syafiq") — sidebar renders normally, + buttons visible next to "CHANNELS" and "DIRECT MESSAGES".
  2. Rename the same workspace to something long enough to wrap onto two lines (e.g. "Zainul Syafiq Worrkspace Note Clickclack").
  3. Reload the sidebar — both + buttons are now missing. The workspace is otherwise fully functional (channels/DMs can still be created via other means); this is purely a header/sidebar rendering issue.

Expected behavior: The workspace name should truncate with an ellipsis (or otherwise not affect layout) rather than wrapping and clipping unrelated sidebar controls.

Investigation notes: Checked apps/web/src/components/navigation/Sidebar.svelte (.workspace-name / .workspace-name-label) — no white-space: nowrap / text-overflow: ellipsis is applied to the workspace title, so it wraps freely. The + buttons themselves (apps/web/src/components/navigation/ChannelList.svelte, .add-button) are rendered unconditionally with no role/state gating, so the clipping appears to be a layout/height assumption elsewhere in the sidebar breaking when the header wraps to more than one line.

Screenshots:

Image Image

Activity

  1. added
    P2Normal priority bug or improvement with limited blast radius.
    clawsweeper:fix-shape-clearClawSweeper found a clear likely implementation shape for this issue.
    clawsweeper:queueable-fixClawSweeper marked this issue as an existing queue_fix_pr work candidate.
    clawsweeper:source-reproClawSweeper found a high-confidence source-level issue reproduction.
    impact:ux-frictionUser-facing flow adds avoidable confusion or support burden without fully blocking progress.
    issue-rating: 🦞 diamond lobsterVery strong issue quality with high-confidence source-level or clear reproduction.
    no-staleExempts this issue from stale automation.
    on Oct 1, 2026
  2. clawsweeper commented on Oct 1, 2026

    @clawsweeper
    Contributor

    Codex review: this still needs some work. Reviewed October 3, 2026, 7:49 PM ET / 23:49 UTC.

    Summary
    The sidebar clipping defect remains on current main and v0.7.0. The open repair at #286 owns the fix, so this issue remains necessary until that work lands.

    Reproducibility: yes. the supplied long-name scenario, inspected screenshots, current grid rules, and linked browser measurements establish a high-confidence reproduction path. This read-only review did not execute the application.

    Next step
    Review and land or close #286 before dispatching another repair. Likely related people: Peter Steinberger and Sergio Cadavid are low-confidence, unverified routing candidates.

    Review details

    Best possible solution:

    Constrain the sidebar grid column so existing name truncation works and creation controls remain reachable across desktop and mobile layouts.

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

    Yes: the supplied long-name scenario, inspected screenshots, current grid rules, and linked browser measurements establish a high-confidence reproduction path. This read-only review did not execute the application.

    Is this the best way to solve the issue?

    Yes: constraining the existing grid column addresses the underlying width problem; adding more ellipsis styling would duplicate rules already present.

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

    Codex review notes: model internal, reasoning medium; reviewed against 5781ea2209c0.

    Label changes

    Label changes:

    No label changes.

    Label justifications:

    • P2: This is a bounded navigation-layout defect; the workspace remains functional and alternative creation paths exist.
    • impact:ux-friction: Long names hide visible creation controls and make normal sidebar actions harder to discover.
    Evidence reviewed

    What I checked:

    • Current layout defect: The sidebar declares grid rows without a constrained column and hides overflow. The workspace label already specifies nowrap and ellipsis, contrary to the report’s initial wrapping hypothesis; the implicit column can nevertheless grow beyond the sidebar. (apps/web/src/styles/sidebar.css:205, 5781ea2209c0)
    • Controls remain rendered: Create channel and Start direct message buttons are rendered without workspace-name gating; the outer shell allocates a 260px sidebar. This supports horizontal clipping rather than missing controls or authorization gating. (apps/web/src/components/navigation/ChannelList.svelte:425, 5781ea2209c0)
    • Latest release still affected: The v0.7.0 source contains the same sidebar grid rule without grid-template-columns; the requested repair is not present in this release. (apps/web/src/styles/sidebar.css:205, 2408cf117adc)
    • Open linked implementation: GitHub REST confirms fix(web): keep sidebar controls visible with long workspace names #286 is open and unmerged at head cfda5b8. Its supplied body explicitly links this issue and reports before/after browser measurements covering desktop, mobile drawer, and long account names. (cfda5b8d9baf)
    • Screenshots inspected: All four prepared local images were inspected. The reporter’s short-name screenshot shows both plus buttons, while the long-name screenshot clips them. The linked repair’s before/after screenshots show the same clipping followed by an ellipsized name and restored controls.
    • Area history and inspection limits: File history lists Peter Steinberger and Sergio Cadavid as contributors to sidebar styling. Exact blame and historical patch inspection failed because required promisor objects returned HTTP 403; introduction attribution therefore remains unverified. Current source, release source, and REST PR state were successfully inspected. (apps/web/src/styles/sidebar.css, 5781ea2209c0)

    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)
    How this review workflow works
    • 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.
  3. clawsweeper commented on Oct 1, 2026

    @clawsweeper
    Contributor

    🦞⚠️
    Automatic implementation stopped before completion.
    Reason: The automatic implementation worker stopped before all deterministic gates completed. Open the workflow run for the exact blocker.
    Worker: https://github.com/openclaw/clawsweeper/actions/runs/36922011177

    Automatic implementation progress:

  4. added
    clawsweeper:linked-pr-openClawSweeper found an open linked pull request for this issue.
    clawsweeper:no-new-fix-prClawSweeper does not recommend queueing a new automated fix PR for this issue.
    and removed
    clawsweeper:queueable-fixClawSweeper marked this issue as an existing queue_fix_pr work candidate.
    clawsweeper:fix-shape-clearClawSweeper found a clear likely implementation shape for this issue.
    no-staleExempts this issue from stale automation.
    on Oct 2, 2026
  5. added a commit that references this issue on Oct 7, 2026
    307307a
  6. steipete commented on Oct 7, 2026

    @steipete
    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

  7. added a commit that references this issue on Oct 7, 2026
    d59e804
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Normal priority bug or improvement with limited blast radius.clawsweeper:linked-pr-openClawSweeper found an open linked pull request for this issue.clawsweeper:no-new-fix-prClawSweeper does not recommend queueing a new automated fix PR for this issue.clawsweeper:source-reproClawSweeper found a high-confidence source-level issue reproduction.impact:ux-frictionUser-facing flow adds avoidable confusion or support burden without fully blocking progress.issue-rating: 🦞 diamond lobsterVery strong issue quality with high-confidence source-level or clear reproduction.

    Type

    No type

    Fields

    Priority

    None yet

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions