app: Fix alignment of overlay empty state

src/overlay/index.tsx

@@ -1,5 +1,4 @@
 import taggedNowPlaying from './overlays/taggedNowPlaying';
-import cueCounter from './overlays/cueCounter';
 
 type OverlayType = typeof registeredOverlays[number]['type'];
 
@@ -65,4 +64,4 @@ export type OverlayInstance<T extends OverlayType = any> = {
  *
  * Add new entries here to register new overlays
  */
-export const registeredOverlays = [taggedNowPlaying, cueCounter] as const;
+export const registeredOverlays = [taggedNowPlaying] as const;

src/renderer/views/overlayConfig/components/AvailableOverlays.tsx

@@ -99,9 +99,9 @@ const Container = styled(motion.div)`
 `;
 
 Container.defaultProps = {
-  initial: {opacity: 0, scale: 0.95},
-  animate: {opacity: 1, scale: 1},
-  exit: {opacity: 0, scale: 1.05},
+  initial: {opacity: 0, x: -20},
+  animate: {opacity: 1, x: 0},
+  exit: {opacity: 0},
   transition: {duration: 0.2},
 };
 

src/renderer/views/overlayConfig/components/EmptyState.tsx

@@ -14,9 +14,7 @@ const Wrapper = styled('div')`
   grid-template-rows: max-content max-content;
   grid-gap: 0.25rem;
   font-size: 0.875rem;
-  flex: 1;
   justify-content: center;
-  align-self: center;
   justify-items: center;
 `;
 

src/renderer/views/overlayConfig/components/OverlayList.tsx

@@ -11,14 +11,19 @@ import {WEBSERVER_PORT} from 'src/shared/constants';
 import Example from './Example';
 import EmptyState from './EmptyState';
 
-const OverlayList = observer(() => (
-  <Container>
-    {store.config.overlays.length === 0 && <EmptyState />}
-    {store.config.overlays.map((instance, i) => (
-      <OverlayEntry index={i} key={instance.key} />
-    ))}
-  </Container>
-));
+const OverlayList = observer(() =>
+  store.config.overlays.length === 0 ? (
+    <EmptyContainer>
+      <EmptyState />
+    </EmptyContainer>
+  ) : (
+    <Container>
+      {store.config.overlays.map((instance, i) => (
+        <OverlayEntry index={i} key={instance.key} />
+      ))}
+    </Container>
+  )
+);
 
 const OverlayEntry = observer(({index}: {index: number}) => {
   const instance = store.config.overlays[index];
@@ -125,4 +130,10 @@ const Container = styled('div')`
   padding: 1.5rem;
 `;
 
+const EmptyContainer = styled('div')`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+
 export default OverlayList;

src/renderer/views/overlayConfig/index.tsx

@@ -95,13 +95,16 @@ const BackButton = styled('button')`
 `;
 
 const Container = styled('div')`
+  position: relative;
   flex-grow: 1;
-  display: grid;
-  grid-template: 1fr / 1fr;
 
   > * {
-    grid-column: 1;
-    grid-row: 1;
+    overflow-y: scroll;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
   }
 `;