Fix border-radius overlap in cards with p-0 body

benpaddlejones · benpaddlejones · commit 87b456eb48c6 · 2026-01-10T04:50:06.000Z
- Add border-radius to editor, debug console, and arena container
- Add general CSS rules for card-body.p-0 children to inherit border-radius
- Add border-radius to markdown-body in docs.html
- Update cache version to v=7
diff --git a/app/css/style.css b/app/css/style.css
@@ -25,6 +25,21 @@ body {
   min-height: 400px;
   font-size: 14px;
   transition: height 0.3s ease-in-out, min-height 0.3s ease-in-out;
+  /* Match card border-radius for bottom corners */
+  border-bottom-left-radius: var(--bs-card-inner-border-radius, 0.375rem);
+  border-bottom-right-radius: var(--bs-card-inner-border-radius, 0.375rem);
+}
+
+/* ACE Editor content also needs border-radius */
+#editor .ace_scroller,
+#editor .ace_content,
+#editor .ace_gutter {
+  border-bottom-left-radius: var(--bs-card-inner-border-radius, 0.375rem);
+}
+
+#editor .ace_scroller,
+#editor .ace_content {
+  border-bottom-right-radius: var(--bs-card-inner-border-radius, 0.375rem);
 }
 
 /* Reduced editor height for gamepad mode (Challenge 7) */
@@ -61,7 +76,7 @@ body {
   padding-top: 100%; /* 1:1 aspect ratio */
   background-color: var(--arena-bg);
   border: 2px solid var(--arena-border);
-  border-radius: 4px;
+  border-radius: var(--bs-card-inner-border-radius, 0.375rem);
   overflow: hidden;
 }
 
@@ -71,6 +86,23 @@ body {
   left: 0;
   width: 100%;
   height: 100%;
+  border-radius: inherit;
+}
+
+/* Fix for card-body p-0 - ensure inner elements clip to card corners */
+.card-body.p-0 > *:last-child {
+  border-bottom-left-radius: var(--bs-card-inner-border-radius, 0.375rem);
+  border-bottom-right-radius: var(--bs-card-inner-border-radius, 0.375rem);
+}
+
+.card-body.p-0 > *:first-child:last-child {
+  border-radius: var(--bs-card-inner-border-radius, 0.375rem);
+}
+
+/* Card without header - first child needs top radius too */
+.card > .card-body.p-0:first-child > *:first-child {
+  border-top-left-radius: var(--bs-card-inner-border-radius, 0.375rem);
+  border-top-right-radius: var(--bs-card-inner-border-radius, 0.375rem);
 }
 
 /* Debug Console */
@@ -84,6 +116,9 @@ body {
   overflow-y: auto;
   white-space: pre-wrap;
   word-wrap: break-word;
+  /* Match card border-radius for bottom corners */
+  border-bottom-left-radius: var(--bs-card-inner-border-radius, 0.375rem);
+  border-bottom-right-radius: var(--bs-card-inner-border-radius, 0.375rem);
 }
 
 .debug-console .error {
diff --git a/app/docs.html b/app/docs.html
@@ -22,7 +22,7 @@
       rel="stylesheet"
     />
     <!-- Custom CSS -->
-    <link href="css/style.css?v=2" rel="stylesheet" />
+    <link href="css/style.css?v=7" rel="stylesheet" />
     <style>
       .markdown-body {
         box-sizing: border-box;
@@ -31,6 +31,8 @@
         margin: 0;
         padding: 2rem 3rem;
         background-color: #0d1117;
+        /* Match card border-radius to prevent corner overlap */
+        border-radius: var(--bs-card-inner-border-radius, 0.375rem);
       }
 
       @media (max-width: 767px) {
diff --git a/app/simulator.html b/app/simulator.html
@@ -17,7 +17,7 @@
       rel="stylesheet"
     />
     <!-- Custom CSS -->
-    <link href="css/style.css?v=4" rel="stylesheet" />
+    <link href="css/style.css?v=7" rel="stylesheet" />
   </head>
   <body class="bg-dark">
     <!-- Navbar -->
