/* Preflight compatibility overrides — restores legacy behavior where Tailwind's * reset conflicts. See docs/hive-design-system-v2/css-architecture.md. */ /* Tailwind v4 generates a .container utility with responsive max-widths. The legacy app uses "container" as a plain class name on #container. This unlayered rule always wins over @layer utilities in the cascade. TODO: Rename Hive's .container usages (e.g. to .hive-container) or migrate to an id-only selector so this override can be removed. */ .container { max-width: none; } /* On CSS globals: These are commented out and left for REFERENCE ONLY. Most of the impact by having these commented out is benign, however known areas impacted are: 1. Replaced elements (img, svg) change display and height behavior Cause: Preflight sets `display:block; height:auto; max-width:100%` on img/svg. Two distinct effects: a) display:block breaks inline alignment — images no longer sit on the text baseline alongside text. In flex-row containers the image becomes a block element which can misalign with adjacent inline/text content. b) height:auto (CSS property) overrides HTML height attributes set via React props or .attrs(). In flex containers with align-items:stretch (the default), the image stretches to the container's cross-axis height instead of respecting the intended fixed height. Fix: Set height AND width as CSS properties (not HTML attributes), and add flex-shrink:0 or align-self:flex-start on the image in flex containers. For inline icons, add display:inline to override the block reset. Examples (fixed): - Hive Apps page icons: height:64px;width:64px on Image/Illustration in AppCardStyles.ts (targets both AppCard and AIAppCard icons) - Priority Level dropdown checkmark: display:inline in CustomSelectListItem.jsx - ProjectTab tab icons: tab-icon-container (inline-flex, align-items:center) replaces fragile inline marginBottom hacks on each icon node 2. Layer priority inversion: styled-components beat LESS class selectors Cause: LESS rules are now in @layer legacy, but styled-components CSS is unlayered. Unlayered CSS beats layered CSS regardless of specificity. So a LESS selector like `.parent .child` (0,2,0) that previously beat a styled- component class (0,1,0) via specificity now LOSES to it. This silently changes element dimensions that absolutely-positioned pseudo-elements or sibling layouts were calibrated against. Strategy: Fix ad-hoc as cases surface. A runtime patch to wrap all SC output in @layer legacy was attempted (insertRule + MutationObserver) but broke the sidebar and other layout-critical SC styles — the app relies on SC beating LESS in many implicit places, so blanket layering is not viable. Per-case fix: Either remove the conflicting styled-component prop (e.g. drop the redundant `pb={3}` if the LESS rule should control padding), or update the LESS-side positioning values to account for the new dimensions. This pattern will shrink naturally as components migrate to Tailwind/HDS v2. Examples (fixed): - Notification tab orange dot: BucketsList styled wrapper in NotificationsBuckets.jsx overrides padding-bottom:11px to match LESS. - Portfolio View dropdown: reverted noBorder prop and ported LESS rules (#dropdown-portfolio-view-select border/padding/font) into the PortfolioViewSelectWrapper styled-component so the dropdown toggle renders and the view-switching dropdown remains functional. 3. Input background-image icon alignment Cause: Preflight sets box-sizing:border-box on * in all states. Inputs that only set border-box on :focus (like HiveSearchInputStyles) now have border-box in their resting state too, subtly changing content-area width. Status: Minor icon misalignment observed in Apps search input. Deferred — HiveSearchInput should be migrated to HDS v2 InputGroup (48 consumers). 4. Max-width elements no longer centered inside flex-column parents Cause: Preflight sets box-sizing:border-box on * (old reset only set it on ::before/::after). Parent content-box width changes can shift how children with width:100% + max-width resolve inside the flex stretch default. Fix: Add margin-left:auto; margin-right:auto on the max-width element, or add align-items:center on its flex parent. Examples (fixed): AppWorkflowBuilderConnector — added margin-left:auto;margin-right:auto. 5. Resourcing rows overflow when user/placeholder has a Role Cause: dhtmlx scheduler JS sets inline `line-height: px` on each `.dhx_timeline_label_row`. This inherits into custom HTML template

elements (name + role), making each line the full row height and overflowing the container. Inline styles inherit regardless of CSS layers. Fix (applied): reset `line-height: normal`, `height: 100%`, and `overflow: hidden` on `.section-label--title-wrapper` in ResourcingV2 styled.ts to break the inheritance chain. 6. User avatar status emoji misplaced Cause: emoji-mart/css/emoji-mart.css is imported unlayered at main.js:15. Its `.emoji-mart-emoji { position: relative; display: inline-block }` beats the LESS `.user-profile-photo .emoji-mart-emoji { position: absolute; bottom: -1px; right: -5px; display: flex }` because unlayered CSS always wins over @layer legacy regardless of specificity. Fix (applied): ported emoji positioning styles into UserAvatarStyled SC in UserMenu/styled-components.js. SC is also unlayered, and the nested selector's higher specificity wins over the flat emoji-mart rule. 7. Workflows HiveLogo icon oversized Cause: HiveLogo uses HTML height attribute (height="16") which Preflight's height:auto overrides. Unlike HDS Icon (which sets CSS height via size prop), HiveLogo relies on HTML attributes for sizing. Fix (applied): added inline style={{ height: 16, width: 16 }} to all four HiveLogo usages in AppWorkflow components (getAvailableOperations, AppWorkflowBuilderSendAiCommandDisplay, AppWorkflowsOperationsPicker, AppWorkflowBuzzPromptOverlay). 8. Project status picker text truncation Cause: Preflight sets display:block on , which inside a flex container causes the checkmark image to take a full row, pushing text onto a second line and triggering truncation. Fix (applied): added inline style={{ display: 'inline' }} on the checkmark in CustomSelectListItem.jsx. 9. Manage widgets button icon misalignment Cause: Preflight's display:block on SVG makes the HDS Icon a block element inside a Flex container that lacked explicit cross-axis alignment. Fix (applied): added alignItems="center" to the Flex wrapper in ManageWidgetsDropdown.tsx. 10. Approvals Reporting AG Grid styling lost Cause: AG Grid overrides in portfolio-summary.less (@layer legacy) lose to SC rules in PortfolioViewWrapper (unlayered) for row colors, text colors, header backgrounds, and expand/collapse arrow styling. Fix (applied): ported ag-row, ag-row-group, ag-group-expanded/contracted, ag-header-cell, ag-header-icon, ag-body-viewport rules from LESS into the PortfolioViewWrapper styled-component. 11. Tooltip color inconsistency in dark mode Cause: react-tooltip injects its CSS from JS (style.js) as an unlayered