responsive-layouts
Building Responsive Layouts in Vaadin 25
Use the Vaadin MCP tools (search_vaadin_docs, get_component_java_api) to look up the latest documentation whenever uncertain about a specific API detail. Always set vaadin_version to "25" and ui_language to "java".
For an exact Java API signature or to read source, use the javadoc MCP (mcp__javadoc__* — find via ToolSearch javadoc if not loaded) to read Javadoc and sources from Maven Central instead of unpacking jars from ~/.m2.
Design Philosophy
Responsiveness in Vaadin means adapting the UI to best use available screen space — not just squeezing or stretching elements. The goal is to present the right amount of information and interaction for each viewport size.
Three strategies, in order of increasing effort:
- Reduce features on small screens — hide secondary filters, collapse panels. Suitable when mobile is an occasional access mode.
- Build a responsive UI — same features, different layout. Use CSS media/container queries and responsive components. The recommended approach for most apps.
- Build separate UIs — independent mobile and desktop experiences. Only worth the effort when interaction patterns differ fundamentally (e.g., swipe-based mobile vs. data-grid desktop).
Start with strategy 2 unless you have a strong reason not to.