Add Responsive Behavior

# Add Responsive Behavior

## Recipe

- Category: Implementation
- Recommended mode: Agent Mode
- Risk level: Low to Medium
- Estimated scope: Small to Medium

## Purpose

Add robust responsive behavior to an existing Lovable interface without redesigning the product or weakening the desktop experience.

This recipe focuses on layout adaptation, content priority, interaction changes, overflow handling, touch usability, and breakpoint-specific behavior. It is not a generic “make it mobile-friendly” prompt. The goal is to make the same feature usable across relevant viewport sizes while preserving its hierarchy, meaning, and core actions.

## Use When

- a page works on desktop but breaks on smaller screens
- tables, forms, dashboards, sidebars, filters, modals, or navigation need responsive behavior
- content overflows or becomes unreadable
- mobile interactions need different placement or controls
- dense desktop layouts need prioritization on narrow screens
- responsive behavior is inconsistent across related components
- a feature needs verification across mobile, tablet, and desktop widths

## Do Not Use When

- the interface needs a full visual redesign
- the design system or layout strategy is still undefined
- the task is primarily about accessibility rather than responsive layout
- only one isolated CSS defect needs a tiny fix
- the feature has no meaningful smaller-screen use case
- the requested change alters product scope or information architecture

## Inputs

- `[TARGET]`: Route, page, component, or flow
- `[PRIMARY_TASK]`: Main user task the layout must support
- `[CURRENT_ISSUES]`: Known responsive failures
- `[SUPPORTED_VIEWPORTS]`: Mobile, tablet, desktop, wide desktop, or exact ranges
- `[CONTENT_PRIORITY]`: What must remain most visible
- `[CRITICAL_ACTIONS]`: Actions that must remain easy to reach
- `[EXISTING_PATTERNS]`: Current responsive components or conventions
- `[DESIGN_CONSTRAINTS]`: Required visual language, spacing, density, or component rules
- `[PRESERVED_BEHAVIOR]`: Desktop or existing behavior that must not regress
- `[OUT_OF_SCOPE]`: Explicit exclusions
- `[VERIFICATION]`: Required viewport and interaction checks

## Prompt