diff --git a/copi.owasp.org/assets/css/app.css b/copi.owasp.org/assets/css/app.css index 5c7f8134a..cea35ffdf 100644 --- a/copi.owasp.org/assets/css/app.css +++ b/copi.owasp.org/assets/css/app.css @@ -2,6 +2,22 @@ @import "tailwindcss/components"; @import "tailwindcss/utilities"; +/* Prevent horizontal page overflow on all viewports */ +:root { + overflow-x: hidden; + max-width: 100%; +} + +/* + Game table: player card slots are rendered in a single flex row. + When the total card width exceeds the viewport the table must scroll + internally rather than pushing the page layout wider. +*/ +#table { + overflow-x: auto; + max-width: 100%; +} + #copied-url { field-sizing: content; display: inline-block; @@ -12,6 +28,9 @@ #copy-url-container { white-space: nowrap; + /* Prevent the URL bar overflowing the viewport */ + max-width: 100%; + overflow-x: auto; } #copy-url-btn { diff --git a/copi.owasp.org/assets/css/cards.scss b/copi.owasp.org/assets/css/cards.scss index 01b4cdd7e..66ff73b1d 100644 --- a/copi.owasp.org/assets/css/cards.scss +++ b/copi.owasp.org/assets/css/cards.scss @@ -1654,6 +1654,9 @@ $wildcard-mobile-color: rgb(251, 182, 124); .card-player { display: flex; + /* Prevent flex items from shrinking below their card width when the + parent #table container activates its overflow-x scroll context. */ + flex-shrink: 0; .name { margin-right: clamp(6px, 0.6vw, 8px); diff --git a/copi.owasp.org/lib/copi_web/components/layouts/app.html.heex b/copi.owasp.org/lib/copi_web/components/layouts/app.html.heex index 2519d17db..2fb0b1eab 100644 --- a/copi.owasp.org/lib/copi_web/components/layouts/app.html.heex +++ b/copi.owasp.org/lib/copi_web/components/layouts/app.html.heex @@ -1,4 +1,4 @@ -
+