Issue feat: Fix landing page issues#2969
Conversation
There was a problem hiding this comment.
Code Review
This pull request improves the responsiveness and layout of the landing page and its components, including the header, program cards, and role cards. Key updates include centering grid content, adjusting responsive breakpoints, and refining typography and spacing. Feedback was provided regarding the use of unstable keys in list rendering, which could lead to rendering bugs.
| : (imageItem as any)?.description || '/images/default.png'; | ||
| return ( | ||
| <Grid item xs={12} sm={6} md={4} key={program.tenantId || index}> | ||
| <Grid item xs={12} sm={6} md={3} key={program.tenantId || index}> |
There was a problem hiding this comment.
Using program.tenantId || index as a key is potentially problematic. If tenantId is present but not unique across programs (e.g., if multiple programs belong to the same tenant), React will encounter duplicate keys, which can lead to rendering bugs and performance issues. If tenantId is guaranteed to be unique for each program, the fallback to index is redundant. If it is not guaranteed to be unique, consider using a more stable and unique identifier if available.
| <Grid item xs={12} sm={6} md={3} key={program.tenantId || index}> | |
| <Grid item xs={12} sm={6} md={3} key={program.tenantId}> |
| : (imageItem as any)?.description || '/images/default.png'; | ||
| return ( | ||
| <Grid item xs={12} sm={6} md={4} key={program.tenantId || index}> | ||
| <Grid item xs={12} sm={6} md={3} key={program.tenantId || index}> |
There was a problem hiding this comment.
Using program.tenantId || index as a key is potentially problematic. If tenantId is present but not unique across programs, React will encounter duplicate keys, leading to rendering issues. If tenantId is guaranteed to be unique, the fallback to index is redundant. If it is not guaranteed to be unique, consider using a more stable and unique identifier if available.
| <Grid item xs={12} sm={6} md={3} key={program.tenantId || index}> | |
| <Grid item xs={12} sm={6} md={3} key={program.tenantId}> |
|


No description provided.