[697] Unified styles for testimonials - #202
Merged
Merged
Conversation
Contributor
📝 Walkthrough## Walkthrough
The SCSS for testimonials was updated to apply truncation and font styling directly to `.sf-person__content` instead of its nested `p` elements. The truncation line counts were adjusted at default and medium breakpoints, and the text color changed from `$gray-500` to `$gray-300`. Layout-specific styles were reorganized without logic changes.
## Changes
| File(s) | Change Summary |
|----------------------------------------------|---------------------------------------------------------------------------------------------------|
| website/modules/asset/ui/src/scss/_testimonials.scss | Applied truncation and font styles directly to `.sf-person__content`; adjusted truncation line counts and changed text color from `$gray-500` to `$gray-300`; reorganized styles for single testimonial layout |
## Possibly related PRs
- speedandfunction/website#87: Introduced and structured the `_testimonials.scss` file including responsive testimonial layouts and typography/truncation styles.
## Suggested reviewers
- VitalyyP
- yuramax
- IhorMasechko
- killev📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (6)
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
website/modules/asset/ui/src/scss/_testimonials.scss (1)
68-70: Double-check contrast & inheritance of the new$gray-300text colorApplying
color: $gray-300;at the wrapper level pushes that light gray to all child text on mobile widths (until a nested rule overrides it).
Please ensure:
$gray-300still meets WCAG contrast for body copy against the testimonials’ background.- Links and headings that don’t explicitly override this color remain readable.
If either check fails, consider keeping the mobile paragraph color consistent with the medium breakpoint (
$gray-500) or limiting the rule to a more specific child selector.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
website/modules/asset/ui/src/scss/_testimonials.scss(1 hunks)
🧰 Additional context used
🧠 Learnings (2)
📓 Common learnings
Learnt from: yuramax
PR: speedandfunction/website#120
File: website/modules/asset/ui/src/index.js:43-67
Timestamp: 2025-05-26T06:19:32.209Z
Learning: When reviewing PRs focused on styling, defer functional JavaScript improvements to separate tasks to maintain clear scope separation.
Learnt from: yuramax
PR: speedandfunction/website#139
File: website/jest.config.cjs:4-4
Timestamp: 2025-06-03T16:27:46.172Z
Learning: When reviewing PRs, focus suggestions on the main objectives stated in the PR description. Skip suggestions for incidental changes that are unrelated to the PR's primary purpose, especially when the user explicitly requests to stay focused on the main feature/improvement.
Learnt from: VitalyyP
PR: speedandfunction/website#169
File: website/modules/asset/ui/src/js/formValidation.js:68-71
Timestamp: 2025-06-10T14:41:10.045Z
Learning: In the website project, the `.sf-form` CSS class selector is intentionally used in form validation because it's the class used in the form widget template, not an inconsistency that needs to be fixed.
Learnt from: yuramax
PR: speedandfunction/website#121
File: website/modules/asset/ui/src/scss/_vacancies.scss:99-102
Timestamp: 2025-05-26T15:57:01.766Z
Learning: In website/modules/asset/ui/src/scss/_vacancies.scss, the margin shorthand (e.g., `margin: 0 0 8px`) in `.sf-vacancies_footer h2` is intentionally used to reset all margins and set specific bottom margins, rather than using `margin-bottom` alone. This approach ensures clean baseline styling that doesn't inherit unwanted margins, while still allowing the sibling selector `.vacancy-card + .sf-vacancies_footer h2` to add top margins when a vacancy card precedes the footer.
Learnt from: IhorMasechko
PR: speedandfunction/website#132
File: website/modules/asset/ui/src/scss/_not-found.scss:52-64
Timestamp: 2025-05-29T07:16:52.843Z
Learning: In website/modules/asset/ui/src/scss/_not-found.scss, the .two-buttons container with flex-direction: row and child .sf-button elements having width: 100% does not cause overflow issues and renders correctly, despite theoretical expectations.
website/modules/asset/ui/src/scss/_testimonials.scss (3)
Learnt from: yuramax
PR: speedandfunction/website#121
File: website/modules/asset/ui/src/scss/_vacancies.scss:99-102
Timestamp: 2025-05-26T15:57:01.766Z
Learning: In website/modules/asset/ui/src/scss/_vacancies.scss, the margin shorthand (e.g., `margin: 0 0 8px`) in `.sf-vacancies_footer h2` is intentionally used to reset all margins and set specific bottom margins, rather than using `margin-bottom` alone. This approach ensures clean baseline styling that doesn't inherit unwanted margins, while still allowing the sibling selector `.vacancy-card + .sf-vacancies_footer h2` to add top margins when a vacancy card precedes the footer.
Learnt from: IhorMasechko
PR: speedandfunction/website#132
File: website/modules/asset/ui/src/scss/_not-found.scss:52-64
Timestamp: 2025-05-29T07:16:52.843Z
Learning: In website/modules/asset/ui/src/scss/_not-found.scss, the .two-buttons container with flex-direction: row and child .sf-button elements having width: 100% does not cause overflow issues and renders correctly, despite theoretical expectations.
Learnt from: yuramax
PR: speedandfunction/website#191
File: website/modules/asset/ui/src/scss/_leadership-team.scss:213-216
Timestamp: 2025-07-02T08:15:36.152Z
Learning: In website/modules/asset/ui/src/scss/_leadership-team.scss, the `.leader-bio` element intentionally uses `overflow-y: hidden` at the `breakpoint-extra-large` level to completely remove scrollbars on desktop devices, while maintaining `overflow-y: auto` at the `breakpoint-large` level for tablets. This design decision relies on content managers controlling bio text length to prevent overflow on desktop, ensuring a clean scrollbar-free experience on larger screens.
⏰ Context from checks skipped due to timeout of 90000ms (6)
- GitHub Check: lint
- GitHub Check: unit-tests
- GitHub Check: security-scan
- GitHub Check: e2e-tests
- GitHub Check: Analyze (actions)
- GitHub Check: Analyze (javascript-typescript)
🔍 Vulnerabilities of
|
| digest | sha256:1a181e36fc9efa4b703dfb3f00837d2ee010d169b4ae0dca79660a6d26352350 |
| vulnerabilities |     |
| platform | linux/amd64 |
| size | 290 MB |
| packages | 977 |
📦 Base Image node:23-alpine
| also known as |
|
| digest | sha256:b9d38d589853406ff0d4364f21969840c3e0397087643aef8eede40edbb6c7cd |
| vulnerabilities |    |
Description
| ||||||||||||
Description
| ||||||||||||
Description
|
yuramax
changed the title
yuramax
suggested changes
Jul 4, 2025
yuramax
left a comment
yuramax
left a comment
Contributor
There was a problem hiding this comment.
Anton, could you please update the font size/line height for the testimonials? It doesn't quite match the design. Thanks!
…ithub.com/speedandfunction/website into 697-unify-styles-for-testimonials-content
killev
enabled auto-merge (squash)
July 4, 2025 20:31
|
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
4 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.
Unified styles for testimonials