From ac3094e7c30f1a0394b2c2a2409abcd9f2d41c6b Mon Sep 17 00:00:00 2001 From: Jaseem Jas Date: Tue, 1 Sep 2026 21:22:57 +0530 Subject: [PATCH 1/2] UN-4073 fix: make the /setOrg organization list scrollable `.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. --- frontend/src/components/set-org/SetOrg.css | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/set-org/SetOrg.css b/frontend/src/components/set-org/SetOrg.css index 125f0e8772..ab0c3b3adc 100644 --- a/frontend/src/components/set-org/SetOrg.css +++ b/frontend/src/components/set-org/SetOrg.css @@ -7,8 +7,18 @@ } .card-list-container { - margin: 10%; + /* The scroll region. `.org-list` is a fixed-height (100vh) flex column, so + * without `min-height: 0` this box refuses to shrink below its content and + * the extra org cards spill past the viewport instead of scrolling. */ + flex: 1 1 auto; + min-height: 0; + overflow-y: auto; + margin: 5% 0; width: 80%; + /* Bottom room for the cards' 8px/24px box-shadow, which the scroll box + * clips. Deliberately no horizontal padding: it would narrow the cards and + * worsen the pre-existing title/Connect-button overlap on narrow viewports. */ + padding-bottom: 24px; } .org-list { background: #ffffff; @@ -84,6 +94,9 @@ .select-org-unstract-logo { width: 200px; margin-top: 10%; + /* Flex items default to `flex-shrink: 1`, so a long org list squashed the + * logo to zero height rather than scrolling the list. */ + flex-shrink: 0; } .select-org-button { From 28da47822cb0c73ae30b6822f3b7f5b9f8837127 Mon Sep 17 00:00:00 2001 From: Jaseem Jas Date: Tue, 1 Sep 2026 21:29:57 +0530 Subject: [PATCH 2/2] UN-4073 fix: address self-review on the /setOrg scroll fix - 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. --- frontend/src/components/set-org/SetOrg.css | 27 ++++++++++++++-------- 1 file changed, 18 insertions(+), 9 deletions(-) diff --git a/frontend/src/components/set-org/SetOrg.css b/frontend/src/components/set-org/SetOrg.css index ab0c3b3adc..a1f03846d4 100644 --- a/frontend/src/components/set-org/SetOrg.css +++ b/frontend/src/components/set-org/SetOrg.css @@ -7,18 +7,27 @@ } .card-list-container { - /* The scroll region. `.org-list` is a fixed-height (100vh) flex column, so - * without `min-height: 0` this box refuses to shrink below its content and - * the extra org cards spill past the viewport instead of scrolling. */ - flex: 1 1 auto; + /* The scroll region. `.org-list` fills `.org-container`'s 100vh as a column + * flex container, so without `min-height: 0` this box refuses to shrink + * below its content: the extra org cards spill past the viewport and are + * clipped instead of scrolling. */ + flex: 1; min-height: 0; overflow-y: auto; + /* Was `margin: 10%`. The horizontal half was redundant — `width: 80%` plus + * `align-items: center` on `.org-list` lands the cards at the same offset — + * so card geometry is unchanged. Note top/bottom percentages resolve + * against the containing block's WIDTH, as they did before. */ margin: 5% 0; width: 80%; - /* Bottom room for the cards' 8px/24px box-shadow, which the scroll box - * clips. Deliberately no horizontal padding: it would narrow the cards and - * worsen the pre-existing title/Connect-button overlap on narrow viewports. */ - padding-bottom: 24px; + /* Room below for `.org-card-container`'s box-shadow, which the scroll box + * clips. No horizontal padding: it would narrow the cards and worsen the + * overlap between a long org name and the Connect button that + * `.ant-card-meta-title` below causes by setting `text-overflow: ellipsis` + * with no `overflow: hidden`. Fix that rule and this constraint expires. + * The right-hand shadow stays clipped either way; at ~5% alpha it reads as + * nothing. */ + padding-bottom: 32px; } .org-list { background: #ffffff; @@ -95,7 +104,7 @@ width: 200px; margin-top: 10%; /* Flex items default to `flex-shrink: 1`, so a long org list squashed the - * logo to zero height rather than scrolling the list. */ + * logo instead of scrolling — measured at 0px height, not merely thin. */ flex-shrink: 0; }