apply-responsive-layout

Wrap the fragment in a layout built with Tailwind CSS Grid and Flexbox utilities, using a mobile-first approach. Pair it with a sticky bottom navigation bar on mobile and a sidebar or top bar on desktop so the structure adapts across viewport sizes.

Use hx-push-url on navigation links and pagination so each swap creates a history entry, and hx-history-elt to define which element tracks scroll position. For soft URL updates that should not create entries, use hx-replace-url instead.

Use innerHTML for content areas, outerHTML for navigation items, and beforeend for feed or list appends. Combine hx-target with layout-specific selectors so swaps replace content regions without disrupting headers, nav, or sidebars.

Yes, use hx-select-oob for out-of-band swaps to update multiple regions, such as refreshing both the content pane and sidebar state from a single server response. The server should return only fragments, never the full layout wrapper.

This happens when the server returns the full layout wrapper instead of only the content fragment, which is a known anti-pattern. Configure the server to detect HTMX requests and respond with just the targeted fragment.