-
Notifications
You must be signed in to change notification settings - Fork 1
[932] feat: add footer badge and update responsive layout #238
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[932] feat: add footer badge and update responsive layout #238
Conversation
WalkthroughThe footer component markup and SCSS were reworked: a new badge-centric layout replaces the legacy links container, splitting footer links into left and right groups and adding a badge image block. Responsive styles were added/adjusted (padding, margins, typography, alignment, ordering, and absolute positioning at medium breakpoints) and mobile-specific sizing/spacing were introduced. The footer HTML structure was reorganized to support the new layout and the copyright fallback year was updated to 2026. Possibly related PRs
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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. Comment |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@website/modules/asset/ui/src/scss/_footer.scss`:
- Line 31: Replace the hardcoded color value in the declaration using "color:
`#7c7c7b`;" in _footer.scss with a SCSS variable: if it should match existing
mid-gray use $gray-500, otherwise add a new variable (e.g. $footer-text-color or
$gray-600) to your color variables and use that here; update the variable
definition where other color tokens are declared and swap the hex literal in the
footer rule for the chosen variable to keep consistency.
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (1)
website/public/images/proud-icon.pngis excluded by!**/*.png
📒 Files selected for processing (2)
website/modules/asset/ui/src/scss/_footer.scsswebsite/views/fragments/fragments.html
🧰 Additional context used
🧠 Learnings (5)
📓 Common learnings
Learnt from: yuramax
Repo: speedandfunction/website PR: 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.
📚 Learning: 2025-05-26T15:57:01.766Z
Learnt from: yuramax
Repo: speedandfunction/website PR: 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.
Applied to files:
website/modules/asset/ui/src/scss/_footer.scss
📚 Learning: 2025-12-05T10:45:00.494Z
Learnt from: IhorMasechko
Repo: speedandfunction/website PR: 226
File: website/modules/asset/ui/src/scss/_cases.scss:1399-1414
Timestamp: 2025-12-05T10:45:00.494Z
Learning: In website/modules/asset/ui/src/scss/_cases.scss, the .cs_partnership element intentionally uses min-width: 430px as per specific task requirements, even though this may cause horizontal overflow on small mobile devices (320px-375px viewports). This is an intentional design decision.
Applied to files:
website/modules/asset/ui/src/scss/_footer.scss
📚 Learning: 2025-05-29T07:16:52.843Z
Learnt from: IhorMasechko
Repo: speedandfunction/website PR: 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.
Applied to files:
website/modules/asset/ui/src/scss/_footer.scss
📚 Learning: 2025-08-29T09:36:15.180Z
Learnt from: Anton-88
Repo: speedandfunction/website PR: 223
File: website/modules/asset/ui/src/scss/_cases.scss:1289-1296
Timestamp: 2025-08-29T09:36:15.180Z
Learning: In website/modules/asset/ui/src/scss/_cases.scss, the user Anton-88 prefers to keep position: sticky for the .filter-modal__content despite potential technical concerns, citing the complicated modal structure as the reason.
Applied to files:
website/modules/asset/ui/src/scss/_footer.scss
⏰ 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). (4)
- GitHub Check: security-scan
- GitHub Check: unit-tests
- GitHub Check: e2e-tests
- GitHub Check: lint
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
🔍 Vulnerabilities of
|
| digest | sha256:10c31c6c82ea0eb629257d8ac9f6915489392165d33a448983baef3b2c4371ed |
| vulnerabilities | |
| platform | linux/amd64 |
| size | 291 MB |
| packages | 985 |
📦 Base Image node:23-alpine
| also known as |
|
| digest | sha256:b9d38d589853406ff0d4364f21969840c3e0397087643aef8eede40edbb6c7cd |
| vulnerabilities |
Description
| ||||||||||||||||||||||||
Description
Description
| ||||||||||||||||||||||||
Description
| ||||||||||||||||||||||||
Description
| ||||||||||||||||||||||||
Description
| ||||||||||||||||||||||||
Description
| ||||||||||||||||||||||||
Description
| ||||||||||||||||||||||||
Description
| ||||||||||||||||||||||||
Description
| ||||||||||||||||||||||||
Description
| ||||||||||||||||||||||||
Description
| ||||||||||||||||||||||||
Description
| ||||||||||||||||||||||||
Description
| ||||||||||||||||||||||||
Description
| ||||||||||||||||||||||||
Description
| ||||||||||||||||||||||||
Description
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@website/modules/asset/ui/src/scss/_footer.scss`:
- Around line 52-80: The badge is positioned absolute at breakpoint-medium
causing overlap because the row drops its bottom margin; inside the
.sf-footer__badge-row breakpoint-medium block add reserved vertical space (e.g.,
set a min-height or padding-bottom equal to the badge height, ~80px) so the
absolute .sf-footer__badge won’t cover .sf-footer__bottom, or alternatively stop
using position:absolute on .sf-footer__badge and keep it in the flow; update the
CSS in the .sf-footer__badge-row and/or .sf-footer__badge rules around the
breakpoint-medium include to implement the chosen fix.
📜 Review details
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
website/modules/asset/ui/src/scss/_footer.scss
🧰 Additional context used
🧠 Learnings (5)
📓 Common learnings
Learnt from: yuramax
Repo: speedandfunction/website PR: 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.
📚 Learning: 2025-05-26T15:57:01.766Z
Learnt from: yuramax
Repo: speedandfunction/website PR: 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.
Applied to files:
website/modules/asset/ui/src/scss/_footer.scss
📚 Learning: 2025-12-05T10:45:00.494Z
Learnt from: IhorMasechko
Repo: speedandfunction/website PR: 226
File: website/modules/asset/ui/src/scss/_cases.scss:1399-1414
Timestamp: 2025-12-05T10:45:00.494Z
Learning: In website/modules/asset/ui/src/scss/_cases.scss, the .cs_partnership element intentionally uses min-width: 430px as per specific task requirements, even though this may cause horizontal overflow on small mobile devices (320px-375px viewports). This is an intentional design decision.
Applied to files:
website/modules/asset/ui/src/scss/_footer.scss
📚 Learning: 2025-05-29T07:16:52.843Z
Learnt from: IhorMasechko
Repo: speedandfunction/website PR: 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.
Applied to files:
website/modules/asset/ui/src/scss/_footer.scss
📚 Learning: 2025-08-29T09:36:15.180Z
Learnt from: Anton-88
Repo: speedandfunction/website PR: 223
File: website/modules/asset/ui/src/scss/_cases.scss:1289-1296
Timestamp: 2025-08-29T09:36:15.180Z
Learning: In website/modules/asset/ui/src/scss/_cases.scss, the user Anton-88 prefers to keep position: sticky for the .filter-modal__content despite potential technical concerns, citing the complicated modal structure as the reason.
Applied to files:
website/modules/asset/ui/src/scss/_footer.scss
⏰ 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). (4)
- GitHub Check: e2e-tests
- GitHub Check: lint
- GitHub Check: unit-tests
- GitHub Check: security-scan
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
Add footer badge and improve responsive layout
Adds a "Proud Member of The Bureau" badge to the footer and restructures the layout for responsive behavior. On desktop the badge is centered with navigation links split left and right; mobile order is Mission → Badge → Links → Copyright. Adjusts mission and copy typography, spacings (20px between links on mobile), image sizing, and breakpoint alignments for improved readability.