[polaris.shopify.com] Fixed anchor link scroll margin (#8915)

kyledurand · web-flow · commit 8a81b6a10b72 · 2023-04-11T16:13:49.000-04:00
Top bar was overlaying anchor links (we should also make these easily shareable) Thanks to @BPScott for the 👀 and suggestion ![image](https://user-images.githubusercontent.com/6844391/231194171-58c74d58-b453-4f0e-be27-e966d5d07a9e.png)
diff --git a/.changeset/nice-items-carry.md b/.changeset/nice-items-carry.md
@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': patch
+---
+
+Added scroll-margin-top to anchor links to prevent top bar overlay
diff --git a/polaris.shopify.com/src/styles/globals.scss b/polaris.shopify.com/src/styles/globals.scss
@@ -283,6 +283,10 @@ button {
   }
 }
 
+[id] {
+  scroll-margin-top: var(--header-height);
+}
+
 .sr-only {
   position: absolute;
   width: 1px;

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'polaris.shopify.com': patch
 +---
++
 +Added scroll-margin-top to anchor links to prevent top bar overlay
Original file line number	Diff line number	Diff line change
`@@ -283,6 +283,10 @@ button {`
`283`	`283`	`}`
`284`	`284`	`}`
`285`	`285`
	`286`	`+[id] {`
	`287`	`+ scroll-margin-top: var(--header-height);`
	`288`	`+}`
	`289`	`+`
`286`	`290`	`.sr-only {`
`287`	`291`	`position: absolute;`
`288`	`292`	`width: 1px;`