fix: prevent layout shift when hovering over doc header (#867)

aklinker1 · web-flow · commit f597b427e4fd · 2024-12-14T18:48:33.000Z
This closes #866, see issue for video of original issue. Resolves the shift caused by mismatch in the SVG and text heights. https://github.com/user-attachments/assets/1b533313-60bc-4637-97d9-f0b51c4f4106
diff --git a/frontend/static/styles.css b/frontend/static/styles.css
@@ -475,7 +475,7 @@ body .ddoc {
 
   .symbolGroup article > div:hover > div + a.context_button:before {
     content: "View code";
-    @apply hidden md:block text-xs;
+    @apply hidden md:block text-xs leading-none;
   }
 
   .docEntryHeader:hover > .context_button {

Original file line number	Diff line number	Diff line change
`@@ -475,7 +475,7 @@ body .ddoc {`
`475`	`475`
`476`	`476`	`.symbolGroup article > div:hover > div + a.context_button:before {`
`477`	`477`	`content: "View code";`
`478`		`- @apply hidden md:block text-xs;`
	`478`	`+ @apply hidden md:block text-xs leading-none;`
`479`	`479`	`}`
`480`	`480`
`481`	`481`	`.docEntryHeader:hover > .context_button {`