Terminal logs overflow bug (#446)

* update storybook

* add story for dev. add overflow to concise view for when view gets real small causing text to overflow. expand width on xterm screen to be reactive to container width with scroll on x axis overflow.

* expand rows on xterminal to 5000 so user can scroll back through output of stream.

containers/conciseLogs/conciseLogs.styled.ts

@@ -10,6 +10,7 @@ export const Container = styled.div`
   height: 448px;
   max-height: 450px;
   padding: 24px;
+  overflow: scroll;
 `;
 
 export const EstimatedTime = styled.div`

containers/terminalLogs/terminalLogs.stories.tsx

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import TerminalLogs from '.';
+
+const meta: Meta<typeof TerminalLogs> = {
+  component: TerminalLogs,
+};
+
+export default meta;
+
+export const Default: StoryObj<typeof TerminalLogs> = {};

containers/terminalLogs/terminalLogs.styled.ts

@@ -66,6 +66,13 @@ export const TerminalView = styled.div`
     border-radius: 4px;
   }
 
+  & .xterm-screen {
+    height: 100% !important;
+    width: 100% !important;
+    max-width: 100% !important;
+    overflow-x: scroll;
+  }
+
   & span:not([class]) {
     color: white;
   }

containers/terminalLogs/terminalLogs.tsx

@@ -81,6 +81,7 @@ const TerminalLogs: FunctionComponent = () => {
       const terminal = new XTerminal({
         convertEol: true,
         cols: 105,
+        rows: 5000,
         disableStdin: true,
         logLevel: 'off',
         scrollback: 5000,

package.json

@@ -69,14 +69,14 @@
     "@faker-js/faker": "^7.5.0",
     "@mdx-js/react": "^2.2.1",
     "@next/eslint-plugin-next": "^13.0.4",
-    "@storybook/addon-actions": "^7.6.6",
-    "@storybook/addon-essentials": "^7.6.6",
-    "@storybook/addon-interactions": "^7.6.6",
-    "@storybook/addon-links": "^7.6.6",
-    "@storybook/addon-mdx-gfm": "^7.6.6",
+    "@storybook/addon-actions": "^7.6.10",
+    "@storybook/addon-essentials": "^7.6.10",
+    "@storybook/addon-interactions": "^7.6.10",
+    "@storybook/addon-links": "^7.6.10",
+    "@storybook/addon-mdx-gfm": "^7.6.10",
     "@storybook/mdx2-csf": "^1.1.0",
-    "@storybook/nextjs": "^7.6.6",
-    "@storybook/react": "^7.6.6",
+    "@storybook/nextjs": "^7.6.10",
+    "@storybook/react": "^7.6.10",
     "@storybook/testing-library": "^0.2.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.3.0",
@@ -109,7 +109,7 @@
     "jest-environment-jsdom": "^29.2.2",
     "prettier": "^2.7.1",
     "process": "^0.11.10",
-    "storybook": "^7.6.6",
+    "storybook": "^7.6.10",
     "ts-jest": "^28.0.8",
     "ts-node": "^10.9.1",
     "typescript": "^4.8.4"