fix(workspace): improve workspace switcher list visibility and scrollbar cue (#444)

[Tyagiquamar]

Problem

When a user has more than 4 workspaces, the workspace switcher dropdown in the sidebar only displays the first 4 items in the visible area. Workspaces 5 and beyond are pushed below the fold. Because the list uses a scrollbar that stays transparent unless hovered directly, users cannot visually discover that the list is scrollable, leading them to believe that subsequent workspaces are missing.

Root cause

In src/components/app/workspaces/Workspaces.tsx, the workspace list container was capped with max-h-[200px] and styled with appflowy-scroller, which renders a transparent scrollbar thumb until hovered. With ~60px per workspace row, only 4 rows fit before clipping, with no visible indication of scrollability.

Fix

• Updated the workspace list container to use appflowy-visible-scrollbar so a subtle scrollbar thumb is always visible when content overflows.
• Increased max-height to max-h-[320px] to comfortably fit up to 6-7 workspace rows directly in the visible area.
• Added a regression test in src/components/app/workspaces/__tests__/Workspaces.test.tsx asserting that the container applies appflowy-visible-scrollbar and max-h-[320px].

Testing

• pnpm type-check passed (exit code 0).
• pnpm jest src/components/app/workspaces/__tests__/Workspaces.test.tsx passed (1/1 green).

Closes #444

Summary by Sourcery

Improve the workspace switcher so additional workspaces are easier to discover and access.

Bug Fixes:

• Improve workspace switcher visibility for users with more than four workspaces by showing more entries and providing a persistent scrollbar cue.

Tests:

• Add a regression test covering the workspace list scrollbar styling and expanded maximum height.

[sourcery-ai]

Reviewer's Guide

The workspace switcher now exposes more workspace rows and provides a persistent scrollbar cue by using a visible-scrollbar style with a 320px maximum height. A focused Jest regression test verifies both container classes after opening the dropdown.

Flow diagram for visible workspace list scrolling

flowchart TD
    User[User opens workspace switcher] --> WorkspaceList[Workspace list container]
    WorkspaceList --> VisibleScrollbar[appflowy-visible-scrollbar]
    WorkspaceList --> MaxHeight["max-h-[320px]"]
    VisibleScrollbar --> ScrollCue[Persistent scrollbar cue]
    MaxHeight --> MoreRows[More workspace rows visible]
    MoreRows --> Scroll[Scroll to additional workspaces]

Loading

File-Level Changes

Change	Details	Files
Improve workspace list discoverability and visible capacity by changing its scrollbar styling and increasing its maximum height.	Replace the transparent-until-hover scroller class with the always-visible scrollbar utility. Increase the list max-height from 200px to 320px while retaining vertical overflow behavior.	src/components/app/workspaces/Workspaces.tsx
Add regression coverage for the workspace list presentation changes.	Mock workspace and authentication dependencies to render the dropdown in isolation. Open the workspace dropdown and assert the list container has the visible-scrollbar and 320px max-height classes.	src/components/app/workspaces/__tests__/Workspaces.test.tsx

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#444	Ensure the web workspace switcher makes all workspaces returned by the API discoverable and accessible, including workspaces beyond the initially visible rows.	✅
#444	Provide a clear visual indication when the workspace list overflows so users know they can scroll to additional workspaces.	✅
#444	Add regression coverage for the workspace switcher’s list visibility and scrolling presentation.	✅

Possibly linked issues

• [Bug] Web app workspace switcher shows only some workspaces, even though the API returns all of them #444: The PR directly fixes the issue by exposing overflow with a visible scrollbar and increasing the workspace list height.

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey - I've reviewed your changes and they look great!

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook