From 4d440b2f09a9c223ec6a4fb42e54e96f9684ab13 Mon Sep 17 00:00:00 2001
From: Arunodoy18 <arunodoy630@gmail.com>
Date: Thu, 26 Feb 2026 00:26:57 +0530
Subject: [PATCH] fix(copi): prevent horizontal overflow in game engine layout
 (fixes #2334)

---
 copi.owasp.org/assets/css/app.css             | 19 +++++++++++++++++++
 copi.owasp.org/assets/css/cards.scss          |  3 +++
 .../copi_web/components/layouts/app.html.heex |  2 +-
 3 files changed, 23 insertions(+), 1 deletion(-)

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 @@
-<div class="min-h-full">
+<div class="min-h-full overflow-x-hidden">
   <div class="bg-gray-800">
     <nav class="bg-gray-800">
       <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">