[932] feat: add footer badge and update responsive layout#238
[932] feat: add footer badge and update responsive layout#238IhorMasechko merged 3 commits intomainfrom
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.
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.
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.