fix: prevent details/code content from overflowing on mobile

- Add overflow-x: auto and word-wrap to details content
- Make code/pre blocks wrap instead of forcing horizontal scroll
- Add overflow-wrap to .better_r text containers

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: turtle

src/sass/base/_basic.sass

@@ -75,6 +75,8 @@ section
 	line-height: 1.5
 	text-align: justify
 	text-rendering: optimizelegibility
+	overflow-wrap: break-word
+	word-wrap: break-word
 
 @media print
 	header, footer, .lt_particles, .skip-link, #gt-link, .snackbar, .alert-container

src/sass/components/_details.sass

@@ -19,6 +19,8 @@ details
 			background-color: var(--bg-details)
 	& > div
 		padding: .5rem
+		overflow-x: auto
+		word-wrap: break-word
 details[open]
 	summary 
 		background-color: var(--bg-details-open)

src/sass/elements/_code.sass

@@ -8,6 +8,8 @@ pre
 	border-radius: var(--radius)!important
 	border-left: var(--radius) solid var(--primary)
 	background-color: var(--bg)
+	overflow-x: auto
+	max-width: 100%
 	& > code
 		margin: 0
 		padding: 1.5rem 1.0rem
@@ -17,7 +19,8 @@ kbd,
 samp
 	padding: .1rem .3rem
 	background: var(--bg2)
-	white-space: pre
+	white-space: pre-wrap
+	word-break: break-word
 	font-size: 90%
 	border-radius: 6px
 kbd