fix: sandbox ui updated (#7175)

sandbox/client.html

@@ -64,8 +64,22 @@
 
     pre {
       min-height: 39px;
+      white-space: pre-wrap; /* wrap long lines instead of stretching the panel */
+      word-wrap: break-word;
       overflow: auto;
     }
+
+    .box{
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-gap: 40px; /* Increased gap between input and response columns */
+    }
+
+    .response {
+      min-width: 0; /* prevents content overflow from pushing layout */
+      overflow-x: auto;
+    }
+
     .header{
       display: flex;
       flex-direction: row;
@@ -73,11 +87,6 @@
       align-items: center;
       margin-bottom: 2rem; /* Added space below the header */
     }
-    .box{
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      grid-gap: 40px; /* Increased gap between input and response columns */
-    }
 
     #theme-toggle {
         padding: 5px 10px;