From af22e90d951faca5ece358fde729dc8ff030ae28 Mon Sep 17 00:00:00 2001 From: Khushal Malhotra Date: Fri, 27 Feb 2026 12:05:47 +0530 Subject: [PATCH] fix: prevent horizontal overflow for long code snippets and URLs - Add width constraints and proper overflow handling to code blocks - Implement word wrapping for long URLs to prevent layout breakage - Ensure responsive design on smaller screens Signed-off-by: Khushal Malhotra --- .../src/lib/components/renderers/code.svelte | 44 +++- cornucopia.owasp.org/static/css/base.css | 199 +++++++++--------- 2 files changed, 143 insertions(+), 100 deletions(-) diff --git a/cornucopia.owasp.org/src/lib/components/renderers/code.svelte b/cornucopia.owasp.org/src/lib/components/renderers/code.svelte index 0f563d8ff..5e1347baa 100644 --- a/cornucopia.owasp.org/src/lib/components/renderers/code.svelte +++ b/cornucopia.owasp.org/src/lib/components/renderers/code.svelte @@ -7,11 +7,47 @@ let { lang = "javascript", text }: Props = $props(); -

{lang}:

-

{text}

+
+

{lang}:

+ 
{text}
+
+ \ No newline at end of file + diff --git a/cornucopia.owasp.org/static/css/base.css b/cornucopia.owasp.org/static/css/base.css index 6dfb88b2f..6a593abb8 100644 --- a/cornucopia.owasp.org/static/css/base.css +++ b/cornucopia.owasp.org/static/css/base.css @@ -1,136 +1,143 @@ /* This file contains all base styling and CSS variables */ -:root -{ - --accent: #61b6e6; - --background: #1f2937; - --background-color: rgb(246, 249, 252); - --white : #ededed; - --green: rgb(0, 209, 0); - --font-body : ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --transition: all ease .2s; - --box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; -} - -body -{ - font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - color:#1f2937; - margin:0; - padding: 0; +:root { + --accent: #61b6e6; + --background: #1f2937; + --background-color: rgb(246, 249, 252); + --white: #ededed; + --green: rgb(0, 209, 0); + --font-body: + ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol", "Noto Color Emoji"; + --transition: all ease 0.2s; + --box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; +} + +body { + font-family: + ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", + "Segoe UI Symbol", "Noto Color Emoji"; + color: #1f2937; + margin: 0; + padding: 0; } -html -{ - scroll-behavior:smooth; +html { + scroll-behavior: smooth; } -a -{ - text-decoration: underline; - padding: .10rem; - border-radius: .25rem; - color: var(--background); - transition: var(--transition); +a { + text-decoration: underline; + padding: 0.1rem; + border-radius: 0.25rem; + color: var(--background); + transition: var(--transition); + word-wrap: break-word; + overflow-wrap: break-word; + word-break: break-word; + max-width: 100%; } -h1,h2,h3,h4,h5,h6 -{ - font-weight: bold; - color: #1f2937 +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: bold; + color: #1f2937; } -h1 -{ - padding: .5rem; +h1 { + padding: 0.5rem; } -a:visited -{ - color:#800080; +a:visited { + color: #800080; } /* Add a 'external link' svg to all links that are external */ -.link-with-external-indicator[href^="http"]:not([href*="cornucopia-mvp.vercel.app"]):not([href*="localhost"]):after { - content: ''; - display: inline-block; - margin-left: 0.2em; - width: 1rem; - height: 1rem; - -webkit-mask: url('/icons/external-link.svg') no-repeat 50% 50%; - mask: url('/icons/external-link.svg') no-repeat 50% 50%; - -webkit-mask-size: cover; - mask-size: cover; - background-size: contain; - background-repeat: no-repeat; - background-position: center; - background-color: currentColor; +.link-with-external-indicator[href^="http"]:not( + [href*="cornucopia-mvp.vercel.app"] + ):not([href*="localhost"]):after { + content: ""; + display: inline-block; + margin-left: 0.2em; + width: 1rem; + height: 1rem; + -webkit-mask: url("/icons/external-link.svg") no-repeat 50% 50%; + mask: url("/icons/external-link.svg") no-repeat 50% 50%; + -webkit-mask-size: cover; + mask-size: cover; + background-size: contain; + background-repeat: no-repeat; + background-position: center; + background-color: currentColor; } .display-s { - display: contents + display: contents; } -.how-to-play -{ - width:59vw; - height:auto; - aspect-ratio:16/9; +.how-to-play { + width: 59vw; + height: auto; + aspect-ratio: 16/9; } .error-container { - width: 90%; - margin: auto; - padding: 0rem; - display: flex; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - margin-top: 4rem; + width: 90%; + margin: auto; + padding: 0rem; + display: flex; + display: flex; + flex-direction: row; + flex-wrap: nowrap; + margin-top: 4rem; } .error-text { - outline: 1px rgb(231, 231, 231) solid; - height: 100%; - min-height: 22vw; - width: calc(50% - 4rem); - opacity: 80%; - border-radius: 1rem; - background-color: rgb(255, 255, 255); - padding: 1rem 2rem 1rem 1rem; - box-shadow: var(--box-shadow); + outline: 1px rgb(231, 231, 231) solid; + height: 100%; + min-height: 22vw; + width: calc(50% - 4rem); + opacity: 80%; + border-radius: 1rem; + background-color: rgb(255, 255, 255); + padding: 1rem 2rem 1rem 1rem; + box-shadow: var(--box-shadow); } .error-text.desktop-left { - padding: 1rem 1rem 1rem 2rem; + padding: 1rem 1rem 1rem 2rem; } .error-image { - width: 50%; - text-align: center; + width: 50%; + text-align: center; } .error.desktop-left { - flex-direction: row; + flex-direction: row; } .hide { - display: none; + display: none; } @media (max-aspect-ratio: 1/1) { - .error-container { - flex-direction: column; - } - - .error-image { - width: 90%; - padding: 0; - margin: auto; - } - - .error-text { - padding: 1rem; - height: 100%; - width: calc(100% - 2rem); - } -} \ No newline at end of file + .error-container { + flex-direction: column; + } + + .error-image { + width: 90%; + padding: 0; + margin: auto; + } + + .error-text { + padding: 1rem; + height: 100%; + width: calc(100% - 2rem); + } +}