test: Add stories for horizontal scrollbar (#2317)

Adjust stories and add RTC layout example with horizontal scrollbar ![image](https://github.com/user-attachments/assets/95282980-a368-44b4-9c1a-fa5c4c1be992) --------- Co-authored-by: t0oF <[email protected]>
equinor · Oct 17, 2024 · 866b25d · 866b25d
1 parent 96c7b5b
commit 866b25d
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git a/typescript/packages/well-log-viewer/src/Storybook/ExternalLayout.stories.tsx b/typescript/packages/well-log-viewer/src/Storybook/ExternalLayout.stories.tsx
@@ -11,13 +11,23 @@ import { tabDecorator } from "./helpers/MuiComponentsTabHelper";
 // eslint-disable-next-line @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports
 const args = require("../../../../../example-data/facies3wells.json");
 
-const RTCWellLogViewer: React.FunctionComponent = () => {
+interface IRTCWellLogViewerProps {
+    width?: string;
+}
+
+const RTCWellLogViewer: React.FunctionComponent<IRTCWellLogViewerProps> = (
+    props
+) => {
     return (
         <Grid container direction={"column"} justifyContent="flex-start">
             <div style={{ width: "100%", height: "100%" }}>
                 <div
                     data-testid="well-log-views"
-                    style={{ width: "100%", height: "90vh" }}
+                    style={{
+                        width: props.width ?? "100%",
+                        height: "80vh",
+                        position: "relative",
+                    }}
                 >
                     <SyncLogViewer {...{ ...args, id: "c1" }} />
                 </div>
@@ -42,3 +52,12 @@ export const RTCTabsLayout: StoryObj<typeof RTCWellLogViewer> = {
         </React.StrictMode>
     ),
 };
+
+export const RTCTabsLayoutWithScrollbar: StoryObj<typeof RTCWellLogViewer> = {
+    decorators: [tabDecorator],
+    render: () => (
+        <React.StrictMode>
+            <RTCWellLogViewer {...{ width: "1700px" }} />
+        </React.StrictMode>
+    ),
+};
diff --git a/...s__/welllogviewer-demo-classificationlayout--rtc-tabs-layout-with-scrollbar.png b/...s__/welllogviewer-demo-classificationlayout--rtc-tabs-layout-with-scrollbar.png
diff --git a/typescript/packages/well-log-viewer/src/Storybook/helpers/MuiComponentsTabHelper.tsx b/typescript/packages/well-log-viewer/src/Storybook/helpers/MuiComponentsTabHelper.tsx
@@ -58,7 +58,6 @@ const TestComponentArea: React.FC<React.PropsWithChildren> = ({ children }) => {
     //---------------------------------------------------------------------------------
     // The Page rendering
     //---------------------------------------------------------------------------------
-
     const direction: GridDirection = "column";
 
     const ref = React.useRef(null);
@@ -72,7 +71,7 @@ const TestComponentArea: React.FC<React.PropsWithChildren> = ({ children }) => {
     const testComponent = renderTestComponent(renderer, ref, tab);
 
     return (
-        <div>
+        <div style={{ overflow: "auto" }}>
             <Grid container direction={direction} justifyContent="flex-start">
                 <div>tab title</div>
                 {testComponent}