/* GFunnel - the profile identity band. This is the strip under a profile's cover: avatar, name, meta row (role - members - followers - views) and the action buttons. It is the platform's own `modules/base/profile/template/cover.html`, so nothing here forks it; this file only corrects how the three parts share the row. WHAT WAS MEASURED ----------------- The live organization profile was rendered at 1600px with the eight actions a manager sees, and the boxes came back: .bx-base-profile-cover-title-bages x=262.7 width=0 <-- the name .bx-base-profile-cover-meta y=464 position:absolute .bx-base-pofile-cover-actions x=310.7 width=1207.3 The name block is **zero pixels wide**. Both it and the actions block are `flex-1` (`flex: 1 1 0%`), and the action row is a `flex-nowrap` list whose min-content width is 1207px - so it cannot shrink, and it takes the entire row. The name is then squeezed to nothing and, because the `h1` carries `truncate`, clipped. The meta escapes the collapse only because it is `position:absolute`, which is why it appears stranded on its own line below the name instead of reading as part of it. THE CORRECTION -------------- Name and meta are one unit and get the space they need; the actions shrink first. That is what `bx-menu-more-auto` is already there for - when the row runs out of room it folds the overflow into "More" - and it never got the chance, because the row was never the thing that had to give. Nothing here changes what an action does, which actions exist, or who sees them. Kill-switch: sys_option `gf_profile_band` = 'off'. */ /* --------------------------------------------------------------------------- Name + meta are one block. The meta row is lifted out of `position:absolute` so it sits under the name in normal flow. Absolute positioning was load-bearing only while the name block could collapse - once the name holds its width, flow is both simpler and correct at every width. --------------------------------------------------------------------------- */ .bx-base-pofile-cover-wrapper .bx-base-profile-cover-meta-holder { height: auto; } .bx-base-pofile-cover-wrapper .bx-base-profile-cover-meta { position: relative; } /* Row gaps for the meta items, so they read as a list rather than a wall. The upstream rule is a right margin on every `li`, which leaves a ragged last line as soon as the row wraps. */ .bx-base-pofile-cover-wrapper .bx-base-profile-cover-meta .bx-menu-custom-hor { row-gap: 0.25rem; } @media (min-width: 1024px) { /* The name takes what it needs; the actions give way. `min-width` is the whole fix - without a floor, `flex: 1 1 0%` lets a wide sibling reduce this to nothing. */ .bx-base-pofile-cover-wrapper .bx-base-profile-cover-title-bages { flex: 1 1 auto; min-width: 16rem; } /* Shrink-to-fit, and shrink FIRST. bx-menu-more-auto measures this container and folds whatever does not fit into its own "More" popup, so a narrow window loses buttons to a menu rather than losing the name. */ .bx-base-pofile-cover-wrapper .bx-base-pofile-cover-actions { flex: 0 1 auto; min-width: 0; } /* Both columns start at the same line as the name, rather than one being pushed down by whatever the other happens to contain. */ .bx-base-pofile-cover-wrapper .bx-base-pofile-cover-user { align-items: flex-start; column-gap: 1.5rem; } .bx-base-pofile-cover-wrapper .bx-base-profile-cover-title-bages, .bx-base-pofile-cover-wrapper .bx-base-pofile-cover-actions { margin-top: 3.5rem; } .bx-base-pofile-cover-wrapper .bx-base-profile-cover-title-bages { margin-right: 0; } /* Centre the pills against the name's cap height (h1 is `leading-14`, 3.5rem; a pill is ~2.125rem). */ .bx-base-pofile-cover-wrapper .bx-base-pofile-cover-actions { padding-top: 0.6875rem; } } /* --------------------------------------------------------------------------- The band is a ROW, and on organizations something was making it a column. MEASURED. The live person profile and the live organization profile were rendered side by side at 1440px and their computed styles compared: person organization .bx-base-pofile-ci-cnt align center flex-start justify normal space-between .bx-base-pofile-cover-user dir row COLUMN flex 0 1 auto 2 1 auto .bx-base-pofile-cover-actions align normal center Same template, same classes, different result - so the difference is a stylesheet that loads on one page and not the other. It is `modules/modzzz/listing/template/css/main.css`, which carries a copy of the PRE-artificer profile-cover CSS (`.bx-base-pofile-cover-user { flex-direction: column; align-self: center; flex: 2 1 auto }` and a centred `h1`). It reaches the organization profile because that page renders listing content, and it reaches no person profile - which is exactly why the person's band looks right and the workspace's does not. Artificer's own template asks for the row with `lg:flex-row`, `lg:items-center` and `ltr:lg:text-left`; a plain single-class rule loaded later simply beats those utilities. Artificer already neutralises the same rules for persons with an EMPTY `bx_persons/css/main.css`, and there is no `bx_organizations` equivalent. So the row is asserted here rather than by editing a licensed vendor file (which an upgrade would overwrite) or by adding a third empty stylesheet. Every value below is artificer's own, taken from the person profile's computed styles - nothing here is a new design. --------------------------------------------------------------------------- */ @media (min-width: 1024px) { .bx-base-pofile-cover-wrapper .bx-base-pofile-ci-cnt { align-items: center; justify-content: normal; } /* `flex: 2 1 auto` + `align-self: center` + `height: 100%` are the stray file's; artificer leaves all three at their initial values and lets the avatar sit beside this block. */ .bx-base-pofile-cover-wrapper .bx-base-pofile-cover-user { flex-direction: row; flex: 0 1 auto; align-self: auto; height: auto; } .bx-base-pofile-cover-wrapper .bx-base-pofile-cover-actions { align-items: normal; } /* The stray file centres the name and only un-centres it under `.bx-media-desktop`, a class JavaScript adds after first paint. The name is left-aligned beside the avatar at this width either way. */ .bx-base-pofile-cover-wrapper .bx-base-pofile-cover-user h1.bx-def-unit-info { text-align: left; } } /* --------------------------------------------------------------------------- The action pills. They are `li.bx-stl-mib` - a 1px gray border and a rounded corner - and at eight across they read as eight equal calls to action. Softening the border and letting them fill on hover makes the row a toolbar, which is what it is. No action is promoted to primary: which one matters is the workspace's business, not this stylesheet's guess. --------------------------------------------------------------------------- */ .bx-base-pofile-cover-wrapper .bx-base-pofile-cover-actions .bx-menu-custom-hor > li.bx-menu-item { border-radius: 9999px; } .bx-base-pofile-cover-wrapper .bx-base-pofile-cover-actions .bx-menu-custom-hor > li.bx-menu-item > .bx-base-general-entity-action > a { padding-left: 0.875rem; padding-right: 0.875rem; } /* An action with neither a label nor a destination is a dead control. One shipped - the workspace Requests row was written into `bx_organizations_view_actions_all` with every renderable column blank - and it drew a mystery box in the middle of the row for weeks. That row is fixed at its source in inc/gf_workspace_actions.inc.php; this is the floor under it, so a blank row can never draw a box again. The "More" control is exempt: its label is deliberately hidden on desktop and its link is real. */ .bx-base-pofile-cover-wrapper .bx-base-pofile-cover-actions .bx-menu-custom-hor > li.bx-menu-item:not(.bx-menu-item-more-auto) > .bx-base-general-entity-action > a[href=""] { display: none; } .bx-base-pofile-cover-wrapper .bx-base-pofile-cover-actions .bx-menu-custom-hor > li.bx-menu-item:not(.bx-menu-item-more-auto):has(> .bx-base-general-entity-action > a[href=""]) { display: none; } /* --------------------------------------------------------------------------- The cover's height is a BUDGET, not a constant. MEASURED on the live organization profile at a 1000px-tall viewport: cover image y= 64 h=496 <-- 31rem, fixed identity band y= 496 h=224 tab bar y= 741 h= 52 page content y= 817 Logged in there is another ~143px of chrome above it (the beta strip, the hub sub-nav), so the workspace dashboard began around y=960 — roughly FORTY pixels of it visible on a 1000px screen. The cover alone was taking half the window on a page whose entire purpose is the dashboard underneath it. Upstream sets `height: 31rem` (496px) and never consults the viewport, so the shorter the screen the worse it gets — a fixed rem cannot express "no more than a third of the window". `min()` does. The cover is now the SMALLER of upstream's height and 30vh, so: 1000px tall screen -> 300px cover (was 496) 1440px tall screen -> 432px cover (was 496) 1650px tall screen -> 496px cover (unchanged — the rem caps it) It is never TALLER than upstream, on any screen. Nothing is cropped that `background-size: cover` was not already cropping: the image is a background on a spacer , so a shorter box shows less of it and distorts nothing. Tablet gets the same treatment against its own 24rem. Phone (14rem) is left alone — it is already well under a third of any phone viewport. --------------------------------------------------------------------------- */ .bx-base-pofile-cover-wrapper div.bx-base-pofile-cover-image { height: min(31rem, 30vh); } .bx-media-tablet .bx-base-pofile-cover-wrapper div.bx-base-pofile-cover-image { height: min(24rem, 30vh); }