Project: Convert a Desktop Component to Responsive
By the end of this lesson, you'll be able to:
- Add supportedFormFactors to an existing desktop-oriented component
- Replace fixed widths with SLDS grid and responsive utilities
- Replace a hover-only interaction with a tap-friendly alternative
Prerequisites: "Touch Interactions and Mobile Navigation"
What We're Converting
Module 10's accountManagementDashboard was built with desktop assumptions — a fixed-width layout and no explicit mobile targeting. This project walks through converting it into a genuinely responsive, mobile-supported component.
Step 1: Declare Mobile Support
<!-- accountManagementDashboard.js-meta.xml -->
<targetConfigs>
<targetConfig targets="lightning__RecordPage">
<supportedFormFactors>
<supportedFormFactor type="Large" />
<supportedFormFactor type="Small" />
</supportedFormFactors>
</targetConfig>
</targetConfigs>Step 2: Replace Fixed Widths
/* Before */
.dashboard-container {
width: 1200px;
}
/* After */
.dashboard-container {
width: 100%;
max-width: 1200px;
}<!-- Before: a fixed two-column layout with no stacking behavior -->
<div class="slds-grid">
<div class="dashboard-container">...</div>
</div>
<!-- After: stacks to one column on small screens -->
<div class="slds-grid slds-wrap">
<div class="slds-col slds-size_1-of-1 slds-large-size_2-of-3">...</div>
</div>Step 3: Replace the Hover-Only Row Action
/* Before — never fires on touch */
.row-actions {
display: none;
}
.data-row:hover .row-actions {
display: block;
}<!-- After — the datatable's own type: 'action' column (Module 10)
already renders a proper tap-friendly action menu, replacing
the hover-only custom markup entirely -->Rather than patching the hover-only CSS, the fix here is to lean on lightning-datatable's own built-in row-action column (Module 10, Lesson 2) — which was always tap-friendly to begin with, making the custom hover-only markup unnecessary.
Why This Matters in Real Projects
This exact sequence — declare form factor support, replace fixed widths with responsive layout, replace hover-only interactions — is the realistic, repeatable path for taking any existing desktop-only component and making it genuinely usable across the whole range of devices real users actually have.
Exercise
Convert this fixed two-column layout to stack to one column on small screens and two-thirds/one-third on large screens.
Show hint
Use slds-size_1-of-1 combined with slds-large-size classes.
Exercise
Challenge: explain, as a comment, why using lightning-datatable's built-in action column (Module 10) is a better fix for the hover-only row actions than adding a tap-toggle to the custom hover markup.
Show hint
Think about which approach requires less new custom code to maintain.
Project: Convert a Desktop Component to Responsive Quiz
My Notes
Log in to keep private notes on this lesson.
Questions about this lesson
No questions yet — be the first to ask.
Log in to ask a question about this lesson.
Summary
A hands-on capstone applying this module's three lessons to a real retrofit — taking a desktop-only component and making it genuinely usable on mobile.