Reverse engineering Linear – part 1: Header (pustelto.com)

The author used AI to decompile Linear’s minified frontend and, in the first of a planned series, reverse-engineered the app’s header to extract engineering patterns worth copying. The header breaks into Title, Tabs, Side (actions), and optional Subheader; while deceptively simple, it hides smart solutions for responsive layout, state, and interaction handling. This exploration is meant to learn from Linear’s engineering and surface practical techniques for building robust UIs. Key technical takeaways: a ResponsiveSlot system (managed by a small MobX store created per Header and provided via React context) uses ResizeObservers and a priority prop to measure available space and hide lower-priority slots dynamically — a container-query-like approach that avoids rigid CSS breakpoints. Tabs are hidden via visibility: hidden (not removed from the DOM) to avoid layout flicker and preserve drag-and-drop (DnD Kit) and reordering; a useLayoutEffect-driven width calculation ensures the active tab remains visible and computes the “more” button placement. The author notes a likely CSS issue (missing min-width: 0) preventing the feature from triggering without tweaks. Overall, the header demonstrates composable React patterns, localized reactive state with MobX, and performance-conscious responsive design valuable to engineers building complex, adaptive interfaces.