stevenpetryk / mafs

React components for interactive math
https://mafs.dev
MIT License
3.24k stars 90 forks source link

CodeAndExample: collapsable code is overflowing on Safari #81

Closed ggcr closed 1 year ago

ggcr commented 1 year ago

Hi @stevenpetryk

Noticed that the Collapsable code from the Docs is overflowing in Safari. Check the attached images below.

Issue

The problem is that overflow: clip; is not supported for Safari 15.6.

MacOS

macOS Monterey 12.5

Safari Version

Version 15.6 (17613.3.9.1.5)

Captura de Pantalla 2023-01-10 a las 20 22 00

Google Chrome Version

Version 108.0.5359.124

Captura de Pantalla 2023-01-10 a las 20 23 37

Proposed solution

Setting overflow: auto by default works because the max-height property will crop the text either way.

Tested it on Safari 16.2 and it works too

Captura de pantalla 2023-01-10 a las 21 45 21