B99 — strip de ações edge-to-edge no mobile + gap menor
- Bleed do slot home-actions com -mx-4 (compensa p-4 do scroll) só no mobile - Gap horizontal da strip: gap-3 → gap-2 - Unit pin das classes de bleed em campaignHomeLayout Co-authored-by: Francisco Solla <fsolla@users.noreply.github.com>
This commit is contained in:
parent
73f256e227
commit
afa05fd5fc
3 changed files with 15 additions and 2 deletions
|
|
@ -140,7 +140,7 @@ export const CampaignHomeActionStrip = ({
|
|||
>
|
||||
<ul
|
||||
role="list"
|
||||
className="m-0 flex min-w-max list-none snap-x snap-proximity gap-3 p-0 pb-1"
|
||||
className="m-0 flex min-w-max list-none snap-x snap-proximity gap-2 p-0 pb-1"
|
||||
>
|
||||
{actions?.map(({ id, ...button }) => (
|
||||
<li key={id ?? button.href ?? button.label} className="m-0 list-none p-0">
|
||||
|
|
|
|||
|
|
@ -64,7 +64,10 @@ export const CampaignHomeLayout = ({
|
|||
slot="home-actions-chrome"
|
||||
className="order-1 md:order-2"
|
||||
>
|
||||
<div data-slot="home-actions" className="min-w-0">
|
||||
<div
|
||||
data-slot="home-actions"
|
||||
className="min-w-0 -mx-4 w-[calc(100%+2rem)] md:mx-0 md:w-auto"
|
||||
>
|
||||
{actions}
|
||||
</div>
|
||||
</HomeChromeRetractionShell>
|
||||
|
|
|
|||
|
|
@ -20,6 +20,16 @@ describe('CampaignHomeLayout', () => {
|
|||
expect(actions?.closest('[data-slot="home-dock"]')).not.toBeNull()
|
||||
})
|
||||
|
||||
it('bleeds home-actions edge-to-edge on mobile (compensates scroll p-4)', () => {
|
||||
const { container } = render(<CampaignHomeLayout actions={<p>Actions block</p>} />)
|
||||
|
||||
const actions = container.querySelector('[data-slot="home-actions"]')
|
||||
expect(actions?.className).toContain('-mx-4')
|
||||
expect(actions?.className).toContain('w-[calc(100%+2rem)]')
|
||||
expect(actions?.className).toContain('md:mx-0')
|
||||
expect(actions?.className).toContain('md:w-auto')
|
||||
})
|
||||
|
||||
it('renders search slot inside home-dock when provided', () => {
|
||||
render(
|
||||
<CampaignHomeLayout
|
||||
|
|
|
|||
Loading…
Reference in a new issue