LWCIntermediatemobileuxdynamic-components
Build responsive master-detail LWC layout for tablet field service
Real World Scenario
Desktop master-detail LWC unusable on tablet: master list hidden, detail panel requires horizontal scroll.
Expected Answer
• SLDS grid with formFactor-aware column classes
• Master list full width mobile; split view desktop via CSS container query or formFactor
• Back navigation from detail to master on small formFactor
• Touch-friendly list row height and swipe optional actions
• Test breakpoints on iPad Safari and Android tablet
• Avoid fixed pixel widths breaking responsive grid
• Lazy load detail panel data only on row selection
Follow-Up Questions & Answers
Click to expand — each follow-up includes a direct, interview-ready answer
Direct answer: SLDS grid with formFactor-aware column classes Also consider: Master list full width mobile; split view desktop via CSS container query or formFactor In practice: Back navigation from detail to master on small formFactor Balance speed of delivery with maintainability.
Architect Perspective
Field service UX is tablet-first—desktop-only master-detail fails primary user device.