[704] align tag count and improve truncation behavior - #189
Conversation
📝 WalkthroughWalkthroughThe changes refactor the tag display and styling in the case studies page filter. The SCSS is updated to use flexbox for tag links, introduce new classes for tag label and count, and improve truncation and alignment. The HTML is modified to wrap tag labels and counts in separate spans with these new classes for consistent styling. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant CaseStudiesPage
participant CSS
User->>CaseStudiesPage: Views filter tags
CaseStudiesPage->>CaseStudiesPage: Renders tags with <span class="tag-label"> and <span class="tag-count">
CaseStudiesPage->>CSS: Applies flexbox, truncation, and alignment styles
User->>CaseStudiesPage: Interacts with tags (hover, select, clear)
CaseStudiesPage->>CSS: Applies hover/focus and selected tag styles
Suggested reviewers
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}
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (1)
website/modules/asset/ui/src/scss/_cases.scss (1)
280-334: Flex truncation edge-case: addmin-width:0to allow.tag-labelto wrap/clampInside a flex row the child that should shrink (here
.tag-label) needsmin-width:0(or the parent needs it) otherwise-webkit-line-clampnever kicks in and text may overflow..tag-link { display: flex; align-items: center; gap: 6px; + min-width: 0; // allow children to shrink/truncate … .tag-label { @include truncate-lines(2); + min-width: 0; // doubly safe } }Without this, long labels on narrow viewports overflow despite the clamp.
🧹 Nitpick comments (1)
website/modules/case-studies-page/views/index.html (1)
146-164: Consider moving the brackets out of the translation string for cleaner styling & i18nThe literal
[ {{ count }} ]is now wrapped in its own.tag-countspan.
Keeping the square brackets in the template couples visual punctuation with data and makes localisation / RTL support harder.
A more flexible pattern is to output only the number and add the brackets via CSS::before / ::afteron.tag-count.-<span class="tag-count">[ {{ count }} ]</span> +<span class="tag-count">{{ count }}</span>…and in SCSS:
.tag-count::before { content: '['; margin-right: 2px; } .tag-count::after { content: ']'; margin-left: 2px; }This avoids hard-coded spaces, keeps semantics pure, and lets designers tweak spacing purely in CSS.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
website/modules/asset/ui/src/scss/_cases.scss(4 hunks)website/modules/case-studies-page/views/index.html(2 hunks)
🧰 Additional context used
🧠 Learnings (3)
📓 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: 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#84
File: website/modules/case-studies-page/views/index.html:87-90
Timestamp: 2025-05-14T09:44:56.398Z
Learning: For the Case Study cards in website/modules/case-studies-page/views/index.html, the "type" and "industry" fields are temporarily hard-coded with values "Mobile Development" and "Manufacturing" as placeholders. These will be replaced with dynamic data ({{ article.type }} and {{ article.industry }}) in a future task.
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/case-studies-page/views/index.html (1)
Learnt from: yuramax
PR: speedandfunction/website#84
File: website/modules/case-studies-page/views/index.html:87-90
Timestamp: 2025-05-14T09:44:56.398Z
Learning: For the Case Study cards in website/modules/case-studies-page/views/index.html, the "type" and "industry" fields are temporarily hard-coded with values "Mobile Development" and "Manufacturing" as placeholders. These will be replaced with dynamic data ({{ article.type }} and {{ article.industry }}) in a future task.
website/modules/asset/ui/src/scss/_cases.scss (5)
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: CR
PR: speedandfunction/website#0
File: .cursor/rules/code-conventions.mdc:0-0
Timestamp: 2025-07-01T07:44:33.011Z
Learning: Applies to modules/asset/ui/src/index.js : modules/asset/ui/src/index.js: relaxed function lines and style rules
Learnt from: CR
PR: speedandfunction/website#0
File: .cursor/rules/code-conventions.mdc:0-0
Timestamp: 2025-07-01T07:44:33.011Z
Learning: Applies to modules/asset/ui/src/swipers.js : modules/asset/ui/src/swipers.js: relaxed import rules
Learnt from: yuramax
PR: speedandfunction/website#121
File: website/modules/asset/ui/src/scss/_vacancies.scss:81-89
Timestamp: 2025-05-26T15:54:06.220Z
Learning: In CSS, when evaluating cascade conflicts, always check specificity carefully. A nested sibling selector like `.vacancy-card + .sf-vacancies_footer h2` has higher specificity than a general descendant selector like `.sf-vacancies_footer h2`, so the more specific rule will take precedence and won't be overridden by the less specific one.
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: lint
- GitHub Check: unit-tests
- GitHub Check: e2e-tests
- GitHub Check: security-scan
🔇 Additional comments (2)
website/modules/asset/ui/src/scss/_cases.scss (2)
285-288: Negative left margin enlarges the clickable area outside the list – verify hit-testing
margin-left:-8pxcounteracts the new symmetric padding but also pushes the anchor 8 px left of its list item, making it overlap the parent border.On touch devices this can cause “double tap” behaviour when two adjacent items overlap.
Please confirm this was intentional; if the goal is purely visual alignment, usepadding-inline:0 8pxinstead of negative margins.
560-561: Mixin removal promised in PR description is still presentThe PR description states
@include truncate-lines(1)was removed from.remove-tag, but it is still here.
Because.remove-tagisinline-flexwith a fixed size, the mixin does nothing and adds unnecessary CSS.-.remove-tag { - … - @include truncate-lines(1); -} +.remove-tag { + … +}Please drop the mixin to align code with the stated objective and avoid dead CSS.
Likely an incorrect or invalid review comment.
🔍 Vulnerabilities of
|
| digest | sha256:781ab920f563ba15c57718911b7e72ac4fb8c849ea411085a38a833b0f38c5dc |
| vulnerabilities |     |
| platform | linux/amd64 |
| size | 290 MB |
| packages | 977 |
📦 Base Image node:23-alpine
| also known as |
|
| digest | sha256:b9d38d589853406ff0d4364f21969840c3e0397087643aef8eede40edbb6c7cd |
| vulnerabilities |   |
Description
| ||||||||||||
Description
| ||||||||||||
Description
|
|
5 participants
Key fixes include:
🧭 Tag count alignment: Tag count now appears immediately after the tag label (no awkward spacing).
📐 Spacing adjustments: Replaced margin: 0 -8px with margin-left: -8px to avoid unintended right-side offset.
✂️ Truncation fix: Removed invalid @include truncate-lines(1) from .remove-tag which doesn’t apply to inline-flex elements.