docs(fundamentals): fix example-row-detail positioning

[dancormier]

STACKS-657

---

This PR resolves positioning issues with the annotations used in color fundamentals docs page.

Before

After

How to test

1. Spin this PR up locally (npm run start)
2. Head to the Color Fundamentals page
3. Verify that the annotations under each of the monochromatic color strips are positioned as expected
4. Bonus: Since this fix necessitated changes to the accessibility docs code, verify that annotations under examples are positioned as expected

[netlify]

✅ Deploy Preview for stacks ready!

Name	Link
🔨 Latest commit	57789bc
🔍 Latest deploy log	https://app.netlify.com/sites/stacks/deploys/6747891849a906000884c147
😎 Deploy Preview	https://deploy-preview-1859--stacks.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[giamir]

It looks good to me from a dev perspective.
I have only left a small thing to address in a comment.

@CGuindon can give a final thumbs up from a design perspective.

[giamir]

Issue: Looking at the example-row-detail.html partial I think that what we called customHeight in this file should be called connectorHeight instead.

Sidenote (out of scope)
I think we could find a better name for this partial. It took me a while to understand what Example Row Detail even mean and I still have some doubt. Perhaps something likeannotation.html or connected-annotation.html could work at least based on its usage here. Thoughts?

[dancormier]

Issue: Looking at the example-row-detail.html partial I think that what we called customHeight in this file should be called connectorHeight instead.

Ah, nice catch! I've resolved this in this commit.

Sidenote (out of scope) I think we could find a better name for this partial. It took me a while to understand what Example Row Detail even mean and I still have some doubt. Perhaps something likeannotation.html or connected-annotation.html could work at least based on its usage here. Thoughts?

I agree. I think example-row-detail is one of those placeholder names that just accidentally became semi-permanent. I think annotation.html or example-annotation.html makes the sense to me (I'd argue against connected-annotation.html to keep the name tied to purpose as opposed to presentation).

I'll make a follow up PR for that to keep this PR focused. Thanks for the feedback.

Update: Here's the PR

[giamir]

Thanks for the PR, I have merged it now.
You might want to rebase this branch then. Hopefully there are not nasty conflicts to fix. 🤞