“Bleed” is bleeding on larger screen sizes

shuding / nextra

Simple, powerful and flexible site generation framework with everything you love from Next.js.

https://nextra.site

MIT License

11.31k stars 1.24k forks source link

“Bleed” is bleeding on larger screen sizes #2923

Open yansusanto opened 3 months ago

yansusanto commented 3 months ago

The <Bleed> component is bleeding too much on both edges with -mx-24 on screen resolution higher than 1600x900 (20" desktop), thus overlapping the sidebar on both sides.

May I suggest that we use -mx-12 instead?

Bleed-–-Nextra

Versions

"next": "^13.0.6",
"nextra": "^3.0.0-alpha.24",
"nextra-theme-docs": "^3.0.0-alpha.24",

dimaMachina commented 3 months ago

this was fixed in v3 https://github.com/shuding/nextra/pull/2866 https://nextra-v2-9c3amvff4-shud.vercel.app/docs/docs-theme/built-ins/bleed can you confirm in preview deployment?

yansusanto commented 3 months ago

No it is not fixed yet here https://nextra-v2-9c3amvff4-shud.vercel.app/docs/docs-theme/built-ins/bleed.

dimaMachina commented 3 months ago

This is intentional behaviour

yansusanto commented 3 months ago

Noted with thanks. Would it be better if we make the negative margin smaller so that it doesn't overlap the sidebar?

mengxi-ream commented 5 days ago

You can customize your Bleed use -mx-6 like

      <div className="relative mt-6 -mx-6 sm:mx-0 rounded-none sm:rounded-xl border-y sm:border border-zinc-200 dark:border-zinc-800 overflow-hidden">
        {children}
      </div>