From c562f2943723f295c78f63cc0e2892b66a3f9962 Mon Sep 17 00:00:00 2001
From: Peter Bomber <peter.bomber@microsoft.com>
Date: Tue, 10 Oct 2023 13:58:08 +1300
Subject: [PATCH] avoid lengthy kubectl output changing the layout of
 containing elements

---
 webview-ui/src/Kubectl/Kubectl.module.css  | 8 +++++++-
 webview-ui/src/manualTest/kubectlTests.tsx | 2 +-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/webview-ui/src/Kubectl/Kubectl.module.css b/webview-ui/src/Kubectl/Kubectl.module.css
index 206701c8a..b426ca53a 100644
--- a/webview-ui/src/Kubectl/Kubectl.module.css
+++ b/webview-ui/src/Kubectl/Kubectl.module.css
@@ -4,7 +4,8 @@
     grid-template-areas:
         "header header"
         "nav    content";
-    grid-template-columns: 1fr 3fr;
+    /* https://css-tricks.com/preventing-a-grid-blowout/ */
+    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
 }
 
 .mainHeading {
@@ -19,6 +20,11 @@
     grid-area: content;
 }
 
+.mainContent pre {
+    /* Prevent <pre> elements from pushing out the width of the containing page */
+    overflow-x: auto;
+}
+
 ul.commandCategoryList {
     list-style-type: none;
     padding: 0;
diff --git a/webview-ui/src/manualTest/kubectlTests.tsx b/webview-ui/src/manualTest/kubectlTests.tsx
index 0251cd688..5ecb94349 100644
--- a/webview-ui/src/manualTest/kubectlTests.tsx
+++ b/webview-ui/src/manualTest/kubectlTests.tsx
@@ -32,7 +32,7 @@ export function getKubectlScenarios() {
             webview.postMessage({
                 command: "runCommandResponse",
                 parameters: {
-                    output: Array.from({length: 20}, (_, i) => `This is the output of "kubectl ${command}" line ${i + 1}`).join('\n'),
+                    output: Array.from({length: 20}, (_, i) => `This is the output of "kubectl ${command}" line ${i + 1} and it's quite a long line so that we can adequately test whether the output scrolls or wraps correctly.`).join('\n'),
                     errorMessage: ""
                 }
             });