feat: Update Expandable to use native <details> element

[mydea]

The <details> element is a native HTML element that handles expanding/collapsing out of the box. This is more accessible, and has some additional important benefits for us:

1. It should be covered by search etc. as this is statically rendered now and just "hidden" via CSS.
2. The browser automatically searches in it when using CMD+F - it will auto-open respective details that contain the searched content.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
sentry-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 31, 2025 3:12pm

2 Skipped Deployments

Name	Status	Preview	Comments	Updated (UTC)
changelog	⬜️ Ignored (Inspect)	Visit Preview		Mar 31, 2025 3:12pm
develop-docs	⬜️ Ignored (Inspect)	Visit Preview		Mar 31, 2025 3:12pm

[codecov]

Bundle Report

Changes will increase total bundle size by 2.28kB (0.01%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
sentry-docs-server-cjs	10.61MB	799 bytes (0.01%) ⬆️
sentry-docs-client-array-push	9.44MB	1.48kB (0.02%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: sentry-docs-server-cjs

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
1729.js	-3 bytes	1.58MB	-0.0%
../instrumentation.js	-3 bytes	911.63kB	-0.0%
9523.js	-3 bytes	887.68kB	-0.0%
../app/[[...path]]/page.js	808 bytes	539.78kB	0.15%

Files in ../app/[[...path]]/page.js:

• ./src/components/codeBlock/code-blocks.module.scss → Total Size: 300 bytes

• ./src/components/expandable/index.tsx → Total Size: 3.58kB

• ./src/components/expandable/index.tsx → Total Size: 460 bytes

• ./src/components/codeTabs.tsx → Total Size: 444 bytes

• ./src/components/codeTabs.tsx → Total Size: 5.56kB

• ./src/components/expandable/style.module.scss → Total Size: 324 bytes

App Routes Affected:

App Route	Size Change	Total Size	Change (%)
/[[...path]]	808 bytes	3.09MB	0.03%

view changes for bundle: sentry-docs-client-array-push

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
static/chunks/pages/_app-*.js	-3 bytes	868.67kB	-0.0%
static/css/*.css	33 bytes	739.06kB	0.0%
static/css/*.css	530 bytes	1.49kB	55.15% ⚠️
static/css/*.css	57 bytes	18.7kB	0.31%
static/chunks/8931-*.js	-3 bytes	397.42kB	-0.0%
server/app/_not-*.js	6 bytes	254.7kB	0.0%
server/app/[[...path]]/page_client-*.js	6 bytes	254.67kB	0.0%
server/app/platform-*.js	6 bytes	239.89kB	0.0%
static/chunks/app/[[...path]]/page-*.js	846 bytes	78.73kB	1.09%
static/Tm7rinlNI5s37l-*.js (New)	77 bytes	77 bytes	100.0% 🚀
static/Tm7rinlNI5s37l-*.js (New)	578 bytes	578 bytes	100.0% 🚀
static/oWDKXWNl_DQrLrJUysx5W/_buildManifest.js (Deleted)	-578 bytes	0 bytes	-100.0% 🗑️
static/oWDKXWNl_DQrLrJUysx5W/_ssgManifest.js (Deleted)	-77 bytes	0 bytes	-100.0% 🗑️

Files in static/chunks/app/[[...path]]/page-*.js:

• ./src/components/expandable/style.module.scss → Total Size: 336 bytes

• ./src/components/codeTabs.tsx → Total Size: 6.38kB

• ./src/components/codeBlock/code-blocks.module.scss → Total Size: 309 bytes

• ./src/components/expandable/index.tsx → Total Size: 3.94kB

[lforst]

<3 love me some cmd-f

[coolguyzone]

Just curious, why are we getting rid of the bottom-margin here?

[mydea]

sorry, should have explained: This was a bit hard to work with, as this element is nested in a bunch of other divs, making it impossible to remove this, basically. Also, as far as I've seen this is always in another div that also has margin, so this was redundant - I scanned a bunch of pages and it did not seem to affect the styling, so hopefully this is good 🤞
Without this change, having a code block in an expandable (see example in the component page) looked weird because there was always a margin on bottom.