Livewire grid & embeddables

Grid components x-layout.*

Located in resources/views/components/layout/, these wrap a 12-column grid so you rarely write CSS by hand.

Component	Purpose
x-layout.container	Adds horizontal padding and centers content
x-layout.row	Flex container (display: flex; flex-wrap)
x-layout.col	Sets width via breakpoint props or span

Supported props

• span (1-12)
• sm, md, lg, xl, 2xl
• class for extra utilities

<x-layout.col span="12" md="6" lg="4" class="tw-mb-6">
  {{ $slot }}
</x-layout.col>

Internally the component applies tw-basis-* tw-flex-none to lock the width.

Breakpoint flow

1. Default width is 12/12.
2. Override with md, lg, etc.
3. Latest rule wins (Tailwind cascade).

Best practice: do not combine span + a breakpoint in the same tag; span only affects the base breakpoint.

Embeddable components (iframe)

Some UI pieces render inside an iframe to isolate styles (e.g. the Reader toggle list).

Layout livewire-components

@extends('layouts.livewire-components')
@section('content')
    <livewire:reader.toggle-list />
@endsection

The layout:

• Injects livewire-embeddable-component.css (only if you @push('styles')).
• Registers livewire-embeddable-component.js to listen for postMessage and auto-resize the iframe height.

JS snapshot

// livewire-embeddable-component.js
window.addEventListener('DOMContentLoaded', () => {
  const height = document.body.scrollHeight;
  window.parent.postMessage({ type: 'resize', height }, '*');
});

Accessibility notes

• The outer iframe should include a descriptive title.
• Do not focus elements hidden inside the iframe; manage focus in the parent document.

Pre-PR checklist

• You used x-layout.*, not Bootstrap classes.
• Tested at 320 px / 1024 px.
• If embeddable, verified auto-resize in Reader and Dashboard.

---

Last updated: 2025-07-14