Merge pull request #513 from sharetribe/scroll-margin-to-id-attributes

Fix: target element didn't seem to work well with scroll-margin

CHANGELOG.md

@@ -14,16 +14,17 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2024-XX-XX
 
-- [change] Require account type when creating a Stripe account 
+- [fix] target element didn't seem to work well with scroll-margin.
+  [#513](https://github.com/sharetribe/web-template/pull/513)
+- [change] Require account type when creating a Stripe account
   [#512](https://github.com/sharetribe/web-template/pull/512)
 - [add] Add currently available translations for DE, ES, FR.
   [#511](https://github.com/sharetribe/web-template/pull/511)
 
 ## [v6.2.0] 2024-11-26
 
-- [add] Remove bank account collection from the template, so that it is collected in the
-  Stripe Onboarding flow instead.
-  [#470](https://github.com/sharetribe/web-template/pull/470)
+- [add] Remove bank account collection from the template, so that it is collected in the Stripe
+  Onboarding flow instead. [#470](https://github.com/sharetribe/web-template/pull/470)
 - [add] Add currently available translations for DE, ES, FR.
   [#508](https://github.com/sharetribe/web-template/pull/508)
 - [add] Add support for currencies not supported by Stripe in inquiry processes.

src/containers/PageBuilder/BlockBuilder/BlockContainer/BlockContainer.module.css

@@ -1,7 +1,7 @@
 @import '../../../../styles/customMediaQueries.css';
 
 .root {
-  &:target {
+  &[id] {
     scroll-margin-top: calc(var(--topbarHeight) + 24px);
 
     @media (--viewportMedium) {

src/containers/PageBuilder/SectionBuilder/SectionContainer/SectionContainer.module.css

@@ -11,7 +11,7 @@
     background-color: var(--colorWhite);
   }
 
-  &:target {
+  &[id] {
     scroll-margin-top: var(--topbarHeight);
     @media (--viewportMedium) {
       scroll-margin-top: var(--topbarHeightDesktop);