[693] Fix names truncation - #183
Conversation
📝 Walkthrough""" WalkthroughThis update restructures the testimonial card layout by introducing new wrapper and container divs in the HTML and adjusts related SCSS styles for both carousel and testimonial components. It refines margins, paddings, line heights, truncation limits, and removes certain spacing rules to achieve a more compact and flexible testimonial presentation. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant TestimonialsWidget
participant SCSS
User->>TestimonialsWidget: Loads testimonials carousel
TestimonialsWidget->>TestimonialsWidget: Renders testimonial card HTML with new wrapper/container divs
TestimonialsWidget->>SCSS: Applies updated styles for layout, spacing, and truncation
SCSS-->>TestimonialsWidget: Styles testimonial card elements
TestimonialsWidget-->>User: Displays updated testimonial card layout
Possibly related PRs
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
⏰ 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 (
|
🔍 Vulnerabilities of
|
| digest | sha256:866743be9de0239a0923550a182278b6dbe816047e2a81053a9a4fbaec47bd66 |
| vulnerabilities |     |
| platform | linux/amd64 |
| size | 290 MB |
| packages | 977 |
📦 Base Image node:23-alpine
| also known as |
|
| digest | sha256:b9d38d589853406ff0d4364f21969840c3e0397087643aef8eede40edbb6c7cd |
| vulnerabilities |   |
Description
| ||||||||||||
Description
| ||||||||||||
Description
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
website/modules/asset/ui/src/scss/_testimonials.scss (2)
40-44: Padding shorthand inconsistency could break horizontal alignment
The default breakpoint uses a 4-value padding (4px 12px 0 24px), but the medium breakpoint switches to the 3-value form (32px 40px 0).
That implicitly sets left = right = 40 px, losing the original 24 px left offset. On medium screens the bio block may visually “jump” to the right compared with the image column.- padding: 32px 40px 0; + /* keep 4-value shorthand for consistent left offset */ + padding: 32px 40px 0 24px;
58-60: Duplicate font override between_testimonials.scssand_carousel.scss
_testimonials.scsssets the medium-breakpoint font for.sf-person__title, but an almost-identical rule exists (with different defaults) in_carousel.scss. If the import order changes, the resulting font-size/line-height will be unpredictable. Consider colocating this rule in a single partial or adding an explicit!defaultstrategy to avoid cascade fights.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
website/modules/asset/ui/src/scss/_carousel.scss(1 hunks)website/modules/asset/ui/src/scss/_testimonials.scss(2 hunks)website/modules/testimonials-carousel-widget/views/widget.html(1 hunks)
🧰 Additional context used
🧠 Learnings (3)
📓 Common learnings
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.
website/modules/asset/ui/src/scss/_carousel.scss (2)
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 (2)
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.
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: lint
- GitHub Check: e2e-tests
- GitHub Check: unit-tests
- GitHub Check: security-scan
🔇 Additional comments (3)
website/modules/asset/ui/src/scss/_carousel.scss (2)
36-46: Two-line truncation & margin reset look good
Settingmargin: 0, adjustingline-heightto 120 %, and switching to@include truncate-lines(2)neatly implements the multi-line ellipsis requirement without side effects.
47-66: Allow .sf-person__container to shrink on narrow viewports
On very small screens (≈320 px), the image (102 px) plus the 160 px min‐width can exceed the available space and cause overflow.• In website/modules/asset/ui/src/scss/_carousel.scss (around lines 47–66), update the container:
- min-width: 160px; + /* allow container to shrink on narrow screens */ + min-width: 0; + /* flexibly fill remaining space */ + flex: 1 1 auto;website/modules/testimonials-carousel-widget/views/widget.html (1)
35-44: HTML restructuring matches SCSS, but watch the{% endif %}placement
The closing</div>for.sf-person__containeris outside the{% if card.organization %}block, which is correct, but the{% endif %}now sits between sibling elements (container close and the following link).
Twig ignores whitespace, yet future edits could accidentally move tags into the conditional. Keep an eye on this when refactoring further. Otherwise the new wrapper / container markup aligns perfectly with the new SCSS.
a75b956
|
5 participants
Changes:
Updated text display to support up to two lines instead of one
Applied truncation after the second line (multi-line ellipsis)