feat: improve mobile layout for materials#121
Merged
Conversation
Contributor
WalkthroughMaterials imports ChangesFeatured Cards Responsive Rendering
Possibly related PRs
🚥 Pre-merge checks | ✅ 3 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/home/materials.tsx (1)
11-24:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winUse one source field for featured card copy to avoid breakpoint-specific text drift.
descriptionandcaptionnow duplicate the same content, but desktop readsdescription(Line 43) while mobile readscaption(Line 49). The strings already differ, so users see different text depending on viewport. Keep onlycaptionin the data and map it toCardIcon.descriptionat render time.💡 Proposed simplification
const featuredCards = [ { title: "Carica", - description: - "Hai appunti, dispense o temi d'esame che vuoi condividere? Caricali qui! Il tuo contributo é prezioso per aiutare migliaia di colleghi con materiale aggiornato!", caption: "Hai appunti, dispense o temi d'esame che vuoi condividere? Caricali qui! Il tuo contributo è prezioso per aiutare migliaia di colleghi con materiale aggiornato!", @@ { title: "Visualizza", - description: - "Cerca cio che ti serve per il tuo prossimo esame. Naviga tra i corsi di studio e trova facilmente appunti, esercizi e dispense condivisi da altri studenti come te.", caption: - "Cerca cio che ti serve per il tuo prossimo esame. Naviga tra i corsi di studio e trova facilmente appunti, esercizi e dispense condivisi da altri studenti come te.", + "Cerca ciò che ti serve per il tuo prossimo esame. Naviga tra i corsi di studio e trova facilmente appunti, esercizi e dispense condivisi da altri studenti come te.", @@ {featuredCards.map((card) => ( - <CardIcon key={card.title} {...card} className="h-full" /> + <CardIcon key={card.title} {...card} description={card.caption} className="h-full" /> ))}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/home/materials.tsx` around lines 11 - 24, The data object uses both description and caption causing breakpoint-specific text drift; remove the duplicated description field from the material entries and ensure the render maps the single caption field into the CardIcon component's description prop (i.e., use caption as the sole source and pass it to CardIcon.description where the list is rendered), so desktop and mobile show the same copy consistently.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@src/components/home/materials.tsx`:
- Around line 11-24: The data object uses both description and caption causing
breakpoint-specific text drift; remove the duplicated description field from the
material entries and ensure the render maps the single caption field into the
CardIcon component's description prop (i.e., use caption as the sole source and
pass it to CardIcon.description where the list is rendered), so desktop and
mobile show the same copy consistently.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 97cb321f-c6c4-4687-8173-87c6328b03d1
📒 Files selected for processing (1)
src/components/home/materials.tsx
toto04
requested changes
Jun 2, 2026
…for mobile CardCaption
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
src/components/home/materials.tsx (1)
42-46: ⚡ Quick winAvoid redundant spread props when rendering
CardCaption
CardCaptiononly acceptstitle,caption,icon,iconPosition, andclassName, so{...card}forwardingdescription,size, andhrefis redundant (no caption duplication happens). Forward only the propsCardCaptionactually uses and keepcaption={card.description}.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/home/materials.tsx` around lines 42 - 46, The CardCaption rendering forwards the entire card object via {...card}, which leaks unused props (description, size, href); update the featuredCards map to stop spreading and instead pass only the props CardCaption expects: title, icon, iconPosition, className, plus caption={card.description}; specifically replace <CardCaption key={card.title} {...card} caption={card.description} ... /> with an explicit prop list (title={card.title} icon={card.icon} iconPosition={card.iconPosition} caption={card.description} className="h-full w-fit") so only the required fields are forwarded.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@src/components/home/materials.tsx`:
- Around line 42-46: The CardCaption rendering forwards the entire card object
via {...card}, which leaks unused props (description, size, href); update the
featuredCards map to stop spreading and instead pass only the props CardCaption
expects: title, icon, iconPosition, className, plus caption={card.description};
specifically replace <CardCaption key={card.title} {...card}
caption={card.description} ... /> with an explicit prop list (title={card.title}
icon={card.icon} iconPosition={card.iconPosition} caption={card.description}
className="h-full w-fit") so only the required fields are forwarded.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 6a20b557-fc3e-4685-abbe-95a211702e3e
📒 Files selected for processing (1)
src/components/home/materials.tsx
toto04
approved these changes
Jun 2, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Enhance the mobile layout of the materials section and address a biome-related bug.