Switches the dedicated server detail page from 2-column (configurator
+ sticky summary) to 3-column (anchor rail | configurator | sticky
summary) — option D from the visual companion exploration. Power-user
shape: every section visible at once, rail tracks completion state,
sticky-on-both-sides keeps navigation + price always in reach.
- New ConfigSectionRail.vue: vertical list of section anchors
(CPU, RAM, OS, Storage, Network, etc.) with three states
(untouched, touched ✓, active ●). Click to smooth-scroll.
- Configurator wraps each group in <section :id="cfg-<slug>"> with
scroll-margin-top: 92px to clear the navbar on scroll-into-view.
- IntersectionObserver in DedicatedConfigurator/index.vue updates
store.activeAnchorId as sections cross the upper viewport.
rootMargin '-92px 0px -65% 0px' picks the section nearest the top.
- Store: activeAnchorId reactive ref, isGroupTouched() helper
(compares selection against seeded default; drive bay groups
also require quantity > 0 to count), groupAnchorId() and
shortGroupLabel() helpers.
- Detail-grid CSS: 180px | 1fr | 380px on desktop. Rail hides at
≤1280px (tablet keeps the summary). Full stack at ≤1024px.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Andrew
f0df110b47