Fix clipping and scrolling of the source showcase sidebar (stream-lab…

…s#4213)
elemanhillary · Jul 13, 2022 · f14dbbd · f14dbbd
1 parent f96b9f7
commit f14dbbd
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 30 deletions.
diff --git a/app/components-react/windows/source-showcase/SourceShowcase.m.less b/app/components-react/windows/source-showcase/SourceShowcase.m.less
@@ -2,22 +2,11 @@
   width: 100%;
   height: 100%;
   padding: 24px;
-  padding-top: 64px;
   background: var(--section);
 
-  .image-container {
-    min-height: 200px;
-    overflow: hidden;
-    position: relative;
-  }
-
   img, video {
     width: 100%;
     height: auto;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
   }
 }
 

diff --git a/app/components-react/windows/source-showcase/index.tsx b/app/components-react/windows/source-showcase/index.tsx
@@ -10,6 +10,7 @@ import { $t } from 'services/i18n';
 import { useSourceShowcaseSettings } from './useSourceShowcase';
 import styles from './SourceShowcase.m.less';
 import SourceGrid from './SourceGrid';
+import Scrollable from 'components-react/shared/Scrollable';
 
 const { Content, Sider } = Layout;
 
@@ -95,26 +96,26 @@ function SideBar() {
       collapsedWidth={0}
     >
       <div className={styles.preview}>
-        {displayData?.demoFilename && (
-          <div className={styles.imageContainer}>
-            {displayData?.demoVideo && (
-              <video autoPlay loop key={previewSrc}>
-                <source src={previewSrc} />
-              </video>
-            )}
-            {!displayData?.demoVideo && <img src={previewSrc} />}
-          </div>
-        )}
-        <h2>{displayData?.name}</h2>
-        <div>{displayData?.description}</div>
-        {displayData?.supportList?.length > 0 && (
-          <div className={styles.supportHeader}>{$t('Supports:')}</div>
-        )}
-        <ul style={{ fontSize: '13px' }}>
-          {displayData?.supportList?.map(support => (
-            <li key={support}>{support}</li>
+        {displayData?.demoFilename &&
+          (displayData?.demoVideo ? (
+            <video autoPlay loop key={previewSrc}>
+              <source src={previewSrc} />
+            </video>
+          ) : (
+            <img src={previewSrc} />
           ))}
-        </ul>
+        <Scrollable style={{ height: '100%' }}>
+          <h2 style={{ marginTop: '24px' }}>{displayData?.name}</h2>
+          <div>{displayData?.description}</div>
+          {displayData?.supportList?.length > 0 && (
+            <div className={styles.supportHeader}>{$t('Supports:')}</div>
+          )}
+          <ul style={{ fontSize: '13px' }}>
+            {displayData?.supportList?.map(support => (
+              <li key={support}>{support}</li>
+            ))}
+          </ul>
+        </Scrollable>
       </div>
     </Sider>
   );