[699] Fixed styles for Simple Cards widget - #184
Merged
Conversation
Contributor
📝 Walkthrough## Walkthrough
The SCSS for `.sf-simple-cards` was updated to increase the `.sf-simple-cards__card-expand-button` top position, remove explicit margin from `.sf-simple-cards__card-text`, add padding-top for `.sf-simple-cards__card-text` and its `p` children at medium breakpoints, and adjust vertical spacing within `.sf-simple-cards--no-counter` and `.sf-simple-cards--no-expandable` modifiers.
## Changes
| File(s) | Change Summary |
|------------------------------------------------|------------------------------------------------------------------------------------------------------|
| website/modules/asset/ui/src/scss/_services.scss | Increased `.sf-simple-cards__card-expand-button` top from 20px to 25px; removed `margin: 0` from `.sf-simple-cards__card-text`; added `padding-top: 20px` to `.sf-simple-cards__card-text` in `.sf-simple-cards--no-expandable` and its `p` children at medium breakpoint |
## Possibly related PRs
- speedandfunction/website#127: Adjusts spacing and layout properties within `.sf-simple-cards` SCSS, focusing on padding, margins, and positioning.
- speedandfunction/website#148: Builds upon `.sf-simple-cards` style restructuring with incremental spacing and padding adjustments.
- speedandfunction/website#105: Modifies vertical spacing and padding for `.sf-simple-cards` elements, related but distinct styling concerns.
## Suggested reviewers
- IhorMasechko
- VitalyyP
- yuramax📜 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/_services.scss (1)
148-153: Potential unintended whitespace in collapsed stateChanging the default margin from
0to20px 0means the element now reserves 40 px of vertical space even when it’s collapsed (max-height: 0; opacity: 0; overflow: hidden). On screens where the card is expandable, this creates an empty gap between the title and the expand button before the user clicks “expand”.Please double-check the UX for both variants:
- Simple-card with toggle (collapsible) – verify there isn’t extra blank space.
- Simple-card without toggle (non-expandable) – make sure the new spacing matches the design spec.
If the gap is only required when expanded, consider keeping
margin: 0by default and adding the margin in the:checkedrule instead:.sf-simple-cards__card-text { … - margin: 20px 0; + margin: 0; … } .sf-simple-cards__card-toggle:checked ~ .sf-simple-cards__card-wrap .sf-simple-cards__card-text { + margin: 20px 0; }This preserves the intended spacing in the expanded or non-expandable states without introducing layout shift in the collapsed state.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
website/modules/asset/ui/src/scss/_services.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#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#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.
website/modules/asset/ui/src/scss/_services.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 (6)
- GitHub Check: unit-tests
- GitHub Check: e2e-tests
- GitHub Check: lint
- GitHub Check: security-scan
- GitHub Check: Analyze (javascript-typescript)
- GitHub Check: Analyze (actions)
🔍 Vulnerabilities of
|
| digest | sha256:5887ffa949cb78804a8ccaa27fc28cd97183fbb2caee7c458de8f8afa05a882b |
| vulnerabilities |     |
| platform | linux/amd64 |
| size | 290 MB |
| packages | 977 |
📦 Base Image node:23-alpine
| also known as |
|
| digest | sha256:b9d38d589853406ff0d4364f21969840c3e0397087643aef8eede40edbb6c7cd |
| vulnerabilities |   |
Description
| ||||||||||||
Description
| ||||||||||||
Description
|
Anton-88
changed the title
Anton-88
requested review from
VitalyyP and
yuramax
and removed request for
IhorMasechko,
VitalyyP and
yuramax
July 1, 2025 08:03
Anton-88
enabled auto-merge (squash)
July 2, 2025 10:35
|
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
5 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.
Fixed styles for Simple Cards widget to display the data according to design