fix: Increase recommendations section height

[gocanto]

Summary

• raise the recommendations section minimum height values to provide 40% more space
• add the custom scrollbar styling to the recommendations list
• expand the height of the recommendations list container to match the new layout and update supporting tests

Testing

• make format
• npm run test -- --run tests/support/heights.test.ts (fails: vitest not found in container)

Summary by CodeRabbit

Release Notes

• Style

  • Enhanced recommendations section with improved responsive height calculation for better layout adaptation

• Tests

  • Updated test expectations to align with adjusted height calculations

[gemini-code-assist]

Summary of Changes

Hello @gocanto, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request enhances the user interface by significantly increasing the minimum height of the recommendations section, providing more room for content. Additionally, it introduces a custom scrollbar for a more polished look and feel. The changes are supported by updates to the height calculation utility and its associated tests, ensuring consistency and correctness across the application.

Highlights

• Recommendations Section Height: The minimum height of the recommendations section has been increased by 40% to provide more visible space for content.
• Custom Scrollbar: A custom scrollbar styling has been applied to the recommendations list for improved aesthetics.
• Height Calculation Updates: The internal height calculation logic and corresponding tests have been updated to reflect the new minimum height values for the recommendations section.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[coderabbitai]

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

Walkthrough

This PR updates the recommendations section's minimum height from 30rem/32rem to 42rem/44.8rem and refactors the height infrastructure to use dynamic CSS variables. It replaces fixed CSS classes with computed getters, applies inline style bindings to the recommendations component, and updates corresponding test values to reflect the new layout dimensions.

Changes

Cohort / File(s)	Change Summary
CSS Height Calculation src/css/support/blog.css	Replaces fixed height utility (h-96) on .recommendations-list with dynamic CSS variable calculation (calc(var(--recommendations-section-min) \* 0.8)); retains overflow and scroll behavior
Component Style Binding src/partials/RecommendationPartial.vue	Adds computed style object (recommendationsSectionStyle) with dynamic min-height via CSS variable (--recommendations-section-min); imports Heights utility and applies inline styles to recommendations section
Height Infrastructure Refactor src/support/heights.ts	Converts static private constants for resume section heights to dynamic computed getters; builds responsive height classes at runtime from existing minInResume values; updates safelist generation
Test Constants Update tests/support/heights.test.ts	Updates recommendations min-height from { base: 30, lg: 32 } to { base: 42, lg: 44.8 }; adjusts total resume height from 96rem/102rem to 108rem/114.8rem; updates corresponding Tailwind class strings and safelist values

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

The changes are cohesive and follow a clear pattern across multiple files, but require understanding how CSS variables, computed properties, and height infrastructure interact. The refactoring from static to computed getters adds moderate complexity, and the numeric updates need verification against design requirements.

Possibly related PRs

• fix: Add fixed heights for resume content sections #108: Directly related—modifies the same resume-height infrastructure (Heights utility and RecommendationPartial component) to wire dynamic height values into the recommendation section
• feat: Add pagination to resume recommendations #126: Modifies RecommendationPartial to add pagination logic alongside height management
• [feature] Resumen page #3: Refactors RecommendationPartial for dynamic recommendations rendering, intersecting with the component changes here

Suggested labels

testing

Poem

🐰 Taller grows the list of praise,
From thirty to forty-two its gaze,
CSS whispers through the air,
Variables dance with measured care,
Heights computed, tests aligned—
A rabbit-reviewed design refined! 🎨✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title "fix: Increase recommendations section height" directly aligns with the main change described across the PR's files: increasing the recommendations section minimum height values from base: 30/lg: 32 to base: 42/lg: 44.8 (a 40% increase). The title is concise, specific, and clearly summarizes the primary objective without vague language or unnecessary details. A teammate scanning the commit history would immediately understand that this PR increases the recommendations section's height. The title follows conventional commit practices with the "fix:" prefix, which is appropriate for this enhancement.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch gus/increase-recommendations-component-height-2025-10-21

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 4aa44cc and 25638e3.

📒 Files selected for processing (4)

• src/css/support/blog.css (1 hunks)
• src/partials/RecommendationPartial.vue (3 hunks)
• src/support/heights.ts (1 hunks)
• tests/support/heights.test.ts (3 hunks)

🧰 Additional context used

🧬 Code graph analysis (1)

tests/support/heights.test.ts (1)

src/support/heights.ts (1)

• Heights (8-52)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: vitest

🔇 Additional comments (6)

src/css/support/blog.css (2)

16-20: Excellent refactoring with CSS variables!

This change directly addresses the past review comment about hardcoded values. Using calc(var(--recommendations-section-min) * 0.8) makes the relationship between the section minimum and list height explicit and maintainable. When the base height changes in heights.ts, the list height will automatically adjust.

---

16-20: Custom-scrollbar styling is properly implemented.

The verification confirms that the .custom-scrollbar class is fully defined in src/css/support/theme.css (lines 63–95) with comprehensive scrollbar styling, including color theming, Firefox compatibility, and webkit pseudo-elements for modern browsers. No further action needed.

src/support/heights.ts (2)

12-12: LGTM - Height values increased by 40%.

The recommendations section minimum heights have been correctly increased from {base: 30, lg: 32} to {base: 42, lg: 44.8}, which represents the 40% increase mentioned in the PR objectives.

---

15-30: Excellent refactoring - eliminates data duplication!

This refactoring directly addresses the past review comment. By converting classesInResume and safeInResume to getters that compute values from minInResume, you've eliminated manual synchronization and made minInResume the single source of truth. Any future changes to height values will automatically propagate through all derived properties.

Based on learnings

src/partials/RecommendationPartial.vue (1)

2-2: Clean integration of dynamic height styling.

The inline style binding with the CSS variable --recommendations-section-min creates a clean bridge between TypeScript and CSS. This approach allows the height logic to remain centralized in Heights.resumeSectionMinHeights() while making it available for CSS calculations. The computed property ensures reactivity if the heights logic ever becomes dynamic.

Also applies to: 64-68

tests/support/heights.test.ts (1)

12-12: LGTM - Test expectations correctly updated.

All test expectations have been updated to reflect the new height values. The calculations are correct:

• Recommendations: base 42rem, lg 44.8rem (40% increase)
• Total: 26 + 34 + 42 + 6(gaps) = 108rem base, 28 + 36 + 44.8 + 6 = 114.8rem lg
• Safelist includes all individual section classes plus total height classes

Also applies to: 24-24, 29-29, 38-41

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[gemini-code-assist]

Code Review

This pull request successfully increases the height of the recommendations section and applies custom scrollbar styling. The changes are consistent across the CSS, TypeScript constants, and tests. However, I've identified a couple of areas where maintainability could be improved by reducing data duplication and magic numbers. My suggestions aim to make the height constants more robust and easier to manage in the future.