The <body> tag has inline styles for margin, max-width, padding, and a gradient background. The side panel must snapshot and restore all of these exactly.
margin: 0 auto;
max-width: 1200px;
padding: 0 20px;
background: linear-gradient(180deg, #0f1117 0%, #1a1028 30%, #0f1117 100%);
When a side panel opens, it typically adds margin to the body to prevent content overlap. This modifies the body's inline style attribute. When the panel closes, the original inline styles must be restored exactly — not just removed. If the host site relies on body inline styles for layout, a naive implementation could break the entire page.
The correct approach is to snapshot the body's complete inline style string before making any modifications. This snapshot captures not just margin, but every property the host site has set inline — padding, max-width, background, custom properties, and more.
When the panel collapses, the snapshot is restored by replacing the entire body style attribute. This is safer than trying to selectively remove individual properties, which could miss properties or accidentally remove ones that were part of the original inline styles.
A particularly tricky edge case is multiple rapid open/close cycles. Each open should snapshot the current styles (which should be the originals if the previous close restored correctly). If any cycle fails to restore, the error compounds in subsequent cycles.
When the panel auto-collapses due to viewport resize, it must also restore inline styles correctly. This combines the breakpoint resize behavior with the style snapshot/restore mechanism. Both must work together seamlessly.
Visual testing is essential for this fixture. The centered layout, max-width constraint, and gradient background are all visually distinctive. After each open/close cycle, verify that the body still appears centered with the gradient intact and the content doesn't shift or change width.
It's important to check both the body's inline style attribute (which should be the exact snapshot) and the computed styles (which should match the expected visual). The style inspector above shows both, making it easy to catch discrepancies.
Besides this fixture's styles, other common host body inline styles include: overflow-x: hidden, position: relative, font-size, custom background-color, and CSS custom properties. A robust snapshot/restore mechanism handles all of these generically.