Fix top layout dropdown overlap (#4048)

* Fix SceneSelector dropdown rendering above component * Fix top layout dropdown overlap
stream-labs · Feb 25, 2022 · 224d475 · 224d475
1 parent 0b39e42
commit 224d475
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 14 deletions.
diff --git a/app/components-react/editor/elements/SceneSelector.m.less b/app/components-react/editor/elements/SceneSelector.m.less
@@ -7,8 +7,8 @@
   justify-content: flex-end;
 
   > div:last-child {
-    top: 32px !important;
-    height: calc(100% - 32px);
+    top: 44px !important;
+    height: calc(100% - 44px);
   }
 
   :global(.ant-dropdown) {
@@ -17,6 +17,13 @@
   }
 }
 
+:global(.no-top-padding) {
+  .top-container > div:last-child {
+    top: 32px !important;
+    height: calc(100% - 32px);
+  }
+}
+
 .active-scene-container {
   margin-right: auto;
   font-weight: 500;

diff --git a/app/components/editor/layouts/Classic.tsx b/app/components/editor/layouts/Classic.tsx
@@ -40,7 +40,7 @@ export default class Classic extends BaseLayout {
           style={{ height: `${this.resizes.bar1 * 100}%`, padding: '0 8px' }}
         >
           {['2', '3', '4'].map(slot => (
-            <div class={cx(styles.cell, styles.noTopPadding)}>{this.$slots[slot]}</div>
+            <div class={cx(styles.cell, 'no-top-padding')}>{this.$slots[slot]}</div>
           ))}
         </div>
       </div>

diff --git a/app/components/editor/layouts/Default.tsx b/app/components/editor/layouts/Default.tsx
@@ -26,7 +26,7 @@ export default class Default extends BaseLayout {
         style={{ height: `${this.resizes.bar2 * 100}%`, padding: '0 8px' }}
       >
         {['3', '4', '5'].map(slot => (
-          <div class={cx(styles.cell, styles.noTopPadding)}>{this.$slots[slot]}</div>
+          <div class={cx(styles.cell, 'no-top-padding')}>{this.$slots[slot]}</div>
         ))}
       </div>
     );
@@ -53,7 +53,7 @@ export default class Default extends BaseLayout {
         />
         <div
           style={{ height: `${this.resizes.bar1 * 100}%` }}
-          class={cx(styles.cell, styles.noTopPadding)}
+          class={cx(styles.cell, 'no-top-padding')}
         >
           {this.$slots['2']}
         </div>

diff --git a/app/components/editor/layouts/FourByFour.tsx b/app/components/editor/layouts/FourByFour.tsx
@@ -39,8 +39,8 @@ export default class FourByFour extends BaseLayout {
           reverse={true}
         />
         <div class={styles.segmented} style={{ height: `${this.resizes.bar1 * 100}%` }}>
-          <div class={cx(styles.cell, styles.noTopPadding)}>{this.$slots['2']}</div>
-          <div class={cx(styles.cell, styles.noTopPadding)}>{this.$slots['3']}</div>
+          <div class={cx(styles.cell, 'no-top-padding')}>{this.$slots['2']}</div>
+          <div class={cx(styles.cell, 'no-top-padding')}>{this.$slots['3']}</div>
         </div>
         <ResizeBar
           position="top"
@@ -56,8 +56,8 @@ export default class FourByFour extends BaseLayout {
           class={styles.segmented}
           style={{ height: `${this.resizes.bar2 * 100}%`, padding: '0 8px' }}
         >
-          <div class={cx(styles.cell, styles.noTopPadding)}>{this.$slots['4']}</div>
-          <div class={cx(styles.cell, styles.noTopPadding)}>{this.$slots['5']}</div>
+          <div class={cx(styles.cell, 'no-top-padding')}>{this.$slots['4']}</div>
+          <div class={cx(styles.cell, 'no-top-padding')}>{this.$slots['5']}</div>
         </div>
       </div>
     );

diff --git a/app/components/editor/layouts/Layouts.m.less b/app/components/editor/layouts/Layouts.m.less
@@ -35,6 +35,10 @@
   width: 100%;
   min-width: 0;
 
+  &:global(.no-top-padding) {
+    padding-top: 0;
+  }
+
   > div {
     height: 100%;
     display: flex;
@@ -45,7 +49,3 @@
 .side-padded {
   .padding-h-sides();
 }
-
-.no-top-padding {
-  padding-top: 0;
-}
diff --git a/app/components/editor/layouts/Pyramid.tsx b/app/components/editor/layouts/Pyramid.tsx
@@ -40,7 +40,7 @@ export default class Pyramid extends BaseLayout {
           style={{ height: `${this.resizes.bar1 * 100}%`, padding: '0 8px' }}
         >
           {['2', '3'].map(slot => (
-            <div class={cx(styles.cell, styles.noTopPadding)}>{this.$slots[slot]}</div>
+            <div class={cx(styles.cell, 'no-top-padding')}>{this.$slots[slot]}</div>
           ))}
         </div>
       </div>