“Bleed” is bleeding on larger screen sizes

[yansusanto]

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?

---

Versions

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

[dimaMachina]

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]

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

[dimaMachina]

This is intentional behaviour

[yansusanto]

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

[mengxi-ream]

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>

[dimaMachina]

closing since it was per design