search

frctl / fractal

A tool to help you build and document website component libraries and design systems.
https://fractal.build
MIT License
2.11k stars 171 forks source link

Bug in nav-collapse margin-inline sizing #1276

Open janbrasna opened 11 months ago

janbrasna commented 11 months ago

Steps to reproduce the issue

  1. Open https://demo.fractal.build demo site on desktop and start making the window smaller
  2. Once it hits breakpoint @include mq($until: nav-collapse) the menu disappears
  3. However the main content is covered or cut off

https://github.com/frctl/fractal/assets/1784648/91c99414-2f42-4079-8e2c-eb0ccd0a0916

Reproduces how often:

100%

Reduced test case

can be reproduced live, in official demo, and many showcase implementations (ghent, mozilla etc.)

Context

janbrasna commented 11 months ago

I believe there's some flawed logic in

https://github.com/frctl/fractal/blob/dd6cd938653b24cd23456d10b9c28d3bc436c4c3/packages/mandelbrot/assets/scss/core/_mixins.scss#L136

where some of the amounts should be negative, or maybe the whole argument here:

https://github.com/frctl/fractal/blob/dd6cd938653b24cd23456d10b9c28d3bc436c4c3/packages/mandelbrot/assets/scss/components/_frame.scss#L29

might be * -1 negative to fix this.