UN-4073 [FIX] Make the organization list scrollable on the select-organization screen - #2272
Merged
Merged
Conversation
`.org-list` is a fixed-height (100vh) flex column, but neither of its flex children set `min-height: 0` or any `overflow`. Past ~5-6 organizations the card list could not shrink below its content, so the extra cards spilled out of the viewport and were clipped rather than scrolled, and the Unstract logo (default `flex-shrink: 1`) was squashed to zero height. Make `.card-list-container` the scroll region and pin the logo. The global thin scrollbar from index.css applies as-is; no other layout property changes.
- Use `flex: 1` instead of `flex: 1 1 auto` to match the scroll-region idiom used elsewhere in this frontend (68 occurrences vs 2). Behaviourally identical here: `.card-list-container` is the only growable item in `.org-list`, so both flex-basis values converge on the same used size. - Raise `padding-bottom` 24px -> 32px. The shadow is offset 8px with a 24px blur, so ~8px of it was still clipped. - Correct the comments: the 100vh is on `.org-container`, not `.org-list`; name `.org-card-container` rather than restating shadow numbers declared 40 lines away; record that the dropped horizontal margin leaves card geometry unchanged; state that fixing `.ant-card-meta-title`'s inert `text-overflow` retires the no-horizontal-padding constraint.
|
jaseemjaskp
marked this pull request as ready for review
September 1, 2026 16:02
Contributor
Frontend Lint Report (Biome)✅ All checks passed! No linting or formatting issues found. |
Contributor
|
| Filename | Overview |
|---|---|
| frontend/src/components/set-org/SetOrg.css | Adds the flex sizing, overflow behavior, spacing, and logo shrink constraint needed to keep long organization lists reachable without introducing an actionable regression. |
Reviews (1): Last reviewed commit: "UN-4073 fix: address self-review on the ..." | Re-trigger Greptile
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
Contributor
Unstract test resultsPer-group results
Critical paths
|
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.
What
Make the organization list on the "select an organization" screen (
/setOrg) scrollable, so every org is reachable when a user belongs to more than ~5.Why
.org-containerisheight: 100vhand.org-listisheight: 100%— a fixed-height flex column. Neither of its flex children (.select-org-unstract-logo,.card-list-container) setmin-height: 0or anyoverflow, and both keep the defaultflex-shrink: 1.So once the cards exceeded the panel height:
Each row is ~104px tall (an 80px
.org-avatarplus padding), so this triggered at roughly 5–6 organizations.How
CSS only,
frontend/src/components/set-org/SetOrg.css:.card-list-containerbecomes the scroll region —flex: 1 1 auto,min-height: 0,overflow-y: auto. Itsmargin: 10%becomesmargin: 5% 0; the horizontal part was redundant (width: 80%plusalign-items: centeron.org-listalready centres it, and80% + 2×10%exactly filled the row).padding-bottom: 24pxso the cards'box-shadow: 8px 8px 24pxisn't clipped by the scroll box. Deliberately no horizontal padding — it narrowed the cards by 24px and worsened the pre-existing title/Connect-button overlap (see Notes)..select-org-unstract-logogetsflex-shrink: 0so it stays pinned.No new scrollbar styling:
frontend/src/index.cssalready defines the global thin 8px scrollbar that every other scroll region in the app uses.Can this PR break any existing features? If yes, please list possible items. If no, please explain why.
No. The change is two rules in
SetOrg.css, a stylesheet imported only bycomponents/set-org/SetOrg.jsx, which renders only on the/setOrgroute. No JS/JSX changes, no other selector touched, and none of these class names appear anywhere else in the codebase. Avatar size, card spacing, the right-hand panel and the gradient circles are unchanged.Verified below that the short-list case (2 orgs) renders identically to
main— no scrollbar, same spacing.Relevant Docs
Related Issues or PRs
UN-4073 (parent epic UN-4047)
Dependencies Versions / Env Variables
None.
Notes on Testing
npm run buildpasses.Verified in a browser against a live dev deployment (Vite HMR), driven through Chrome DevTools.
/setOrgcannot be reached by URL — it rendersnullunless React Routerstatecarries the org array — so the long-list case was produced by cloning the rendered.org-card-containernodes to 12 rows on the real page. That is a DOM-level simulation of a many-org account, not a real multi-org login. The two-org case below is real data.Measured on the same live page, toggling the old rules back on via an injected stylesheet:
scrollHeight > clientHeightfalsetrue(499px box, 1476px content)Restoring the old rules reproduced the reported symptom exactly (missing logo, no scrollbar, cards running off the bottom). Checked at 1568×796 and 1280×700, and with the real 2-org list for regression.
Pre-existing issue found but NOT fixed here (out of scope for a scroller fix, happy to raise separately): long org names overlap the Connect button on narrow viewports, because
.ant-card-meta-titlesetstext-overflow: ellipsiswithoutoverflow: hidden/white-space: nowrap, making it inert. Measured 51px of glyph overlap before this change and 60px after — the 9px delta is the scrollbar gutter, which is inherent to the list scrolling at all.Screenshots
Attaching separately.
Checklist
I have read and understood the Contribution Guidelines.