[{"data":1,"prerenderedAt":151},["ShallowReactive",2],{"$fQyOva-5rHCbR6i39GBzXU7uWSSrOnWw6TcXDQdom52s":3},{"item":4,"meta":87},{"id":5,"title":6,"alt":7,"date":8,"design-phase":9,"designer":10,"era":11,"extension":12,"featured":13,"gallery":14,"image":16,"meta":27,"narrative":74,"project":75,"source-file":74,"stem":76,"subject":77,"tags":78,"tool":84,"type":85,"__hash__":86},"archive\u002Farchive\u002F2026-q3\u002F2026-10-01-c104-sticky-band.md","Sticky Band — Filter and Jump Pills Pin as One, Table Headers Pin Under Them","The sticky band pinned: jump pills on the left, the global filter on the right over a backing strip, and the Installs ledger header pinned directly beneath.","2026-10-01","1.0","mark","seed","md",false,[15,18,21,24],{"src":16,"alt":17},"\u002Fcycles\u002Fdesign\u002Fc104-band-pinned.png","Band pinned: pills and filter side by side at 8px over the backing; the ledger header pinned at 81px.",{"src":19,"alt":20},"\u002Fcycles\u002Fdesign\u002Fc104-band-before.png","Before c104: the pinned header slides under the pills and filter, which cover its first and last columns.",{"src":22,"alt":23},"\u002Fcycles\u002Fdesign\u002Fc104-band-wide.png","A 14-column ledger: UxOverflowX arms horizontal scroll, so only this header gives up pinning.",{"src":25,"alt":26},"\u002Fcycles\u002Fdesign\u002Fc104-fable-provider-pinned.png","The band ported to the Fable app: provider detail with the Harnesses header pinned under the pills and filter.",{"body":28},{"type":29,"value":30,"toc":70},"minimark",[31,44,63],[32,33,34,35,39,40,43],"p",{},"It began as a bug report: no table header in qdash pinned on scroll. ",[36,37,38],"code",{},"DataTable","'s always-on ",[36,41,42],{},"overflow-x-auto"," wrapper had become the header's sticky container, and that box never scrolls vertically. Fixing it made headers pin, and showed what the bug had been hiding: they pinned under the jump pills, which covered the first columns.",[32,45,46,47,50,51,54,55,58,59,62],{},"The answer is one band. The global filter and the jump pills stay sticky where they sit and register with ",[36,48,49],{},"useStickyBand",", which publishes the height they take as ",[36,52,53],{},"--q-sticky-top",". ",[36,56,57],{},"UxStickyBand"," backs them once they pin, table headers pin directly underneath, and a pill jump lands 16px below. Tables are meant to fit. ",[36,60,61],{},"UxOverflowX"," lets the rare one that doesn't scroll sideways, and only that table gives up its pinned header.",[32,64,65,66,69],{},"It shipped in q-nuxt-layer 0.9.24 and is ported to all eleven detail pages in the c99 Fable app. The mock at ",[36,67,68],{},"\u002Fpages\u002Fsticky-band"," switches between the band and the old layout.",{"title":71,"searchDepth":72,"depth":72,"links":73},"",2,[],null,"dashboard","archive\u002F2026-q3\u002F2026-10-01-c104-sticky-band","product",[79,80,81,82,83],"c104","qcontrol","sticky","table","layer","Playwright capture","screengrab","vIhKMb2x2nHGoSSm6RlfBtIOH4FMOGVwh8CfGe1IZtA",{"eras":88,"designers":111,"subjects":119,"projects":139},[89,96,103,106],{"id":90,"name":91,"description":92,"startDate":93,"endDate":94,"order":95},"ideation","Ideation","First dashboard and site mockups, pre-brand.","2022-01","2025-09",0,{"id":97,"name":98,"description":99,"startDate":100,"endDate":101,"order":102},"pre-seed","Pre-Seed","Establishing identity, voice, and visual language.","2025-10","2026-01",1,{"id":11,"name":104,"description":105,"startDate":101,"order":72},"Seed","Building the product and its interface.",{"id":107,"name":108,"description":109,"order":110},"post-seed","Post-Seed","Scaling the product and expanding reach.",3,[112,115],{"id":10,"name":113,"role":114},"Mark","Founder \u002F Design",{"id":116,"name":117,"role":118},"sarah","Sarah Parson","Illustration \u002F Design",[120,124,128,131,135],{"id":121,"label":122,"description":123},"front-site","Front Site","Public website and marketing pages.",{"id":125,"label":126,"description":127},"pitch-deck","Pitch Deck","Investor and partner presentations.",{"id":77,"label":129,"description":130},"Product","Application UI and dashboard.",{"id":132,"label":133,"description":134},"cli","Command Line Tools","Terminal interfaces and output.",{"id":136,"label":137,"description":138},"brand-system","Brand System","Style guide, brand documents, MCP server.",[140,144,147],{"id":141,"label":142,"description":143},"brochure-site","Brochure Site","Public marketing website — messaging, landing pages, campaigns.",{"id":75,"label":145,"description":146},"Dashboard","Product application UI — the tool customers use.",{"id":148,"label":149,"description":150},"brand","Brand","Brand system, style guides, design tokens, and tooling.",1794599288270]