Merge pull request #1908 from anuradha9712/fix-live-preview

fix(docs): fix width of live preview component
innovaccer · Jul 7, 2023 · 569a205 · 569a205
2 parents 4f34462 + 4df2750
commit 569a205
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/docs/src/components/PropsTable/card.css b/docs/src/components/PropsTable/card.css
@@ -7,5 +7,9 @@
 }
 
 .live-provider {
-  overflow-x: scroll;
+  width: calc(var(--spacing-9) * 3);
+}
+
+.overflow-scroll {
+  overflow: scroll;
 }
diff --git a/docs/src/components/PropsTable/index.js b/docs/src/components/PropsTable/index.js
@@ -193,8 +193,12 @@ const StoryComp = ({ componentData, dataProvider }) => {
                 </div>
               </CardHeader>
               <CardBody className="d-flex flex-column align-items-center">
-                <div className="w-100" ref={testRef}>
-                  <LivePreview data-test="Docs-liveProvider" className="p-8 mw-100 mh-100 d-block live-provider mb-3" style={{ zoom: zoom }} />
+                <div className="w-100 overflow-scroll" ref={testRef}>
+                  <LivePreview
+                    data-test="Docs-liveProvider"
+                    className="p-8 mh-100 d-block live-provider mb-3"
+                    style={{ zoom: zoom }}
+                  />
                   <LiveError />
                 </div>
                 <div className="d-flex justify-content-end w-100 mb-6">