style: gap support

obs does not seem to handle css gap

client/src/features/viewers/backstage/Paginator.module.css

@@ -1,7 +1,8 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;800&display=swap');
+
 .entries {
   display: flex;
   flex-direction: column;
-  gap: 1.5vh;
 }
 
 .navItem,
@@ -20,5 +21,47 @@
   align-self: center;
   justify-content: flex-end;
   display: flex;
-  gap: 1vw;
+  margin-bottom: 2.5vh;
+}
+
+.nav > div {
+  margin-left: 0.5vw;
+}
+
+.entryStart,
+.entryEnd {
+  font-family: 'Open Sans', sans-serif;
+  min-width: 5vw;
+  opacity: 0.9;
+}
+
+.entryTitle {
+  align-self: center;
+}
+
+.entryPast,
+.entryNow,
+.entryFuture {
+  background-color: rgba(255, 255, 255, 0.03);
+  display: flex;
+  font-size: 1.3vw;
+  padding: 0.2vh 1vw;
+  margin-bottom: 1.5vh;
+}
+
+.entryPast {
+  color: #aaa;
+  font-size: 1.2vw;
+}
+
+.entryFuture {
+  color: #ddd;
+}
+
+.entryNow {
+  color: #fff;
+  line-height: 5vh;
+  background-color: rgba(255, 255, 255, 0.09);
+  border-bottom: 0.5vh solid #ff7597aa;
+  margin-left: -0.5vw;
 }

client/src/features/viewers/backstage/StageManager.module.css

@@ -42,7 +42,7 @@
 /* =================== TITLES ===================*/
 
 .infoContainer > div {
-  overflow:hidden;
+  overflow: hidden;
 }
 
 .nextContainer > div,
@@ -164,44 +164,6 @@
   height: 95%;
 }
 
-
-.entryStart,
-.entryEnd {
-  font-size: 1.5vw;
-  min-width: 3.5vw;
-}
-
-
-.entryTitle {
-  align-self: center;
-}
-.entryPast,
-.entryNow,
-.entryFuture {
-  background-color: rgba(255, 255, 255, 0.03);
-  display: flex;
-  gap: 1.5vw;
-  font-size: 1.3vw;
-  padding: 0.2vh 1vw;
-}
-
-.entryPast {
-  color: #aaa;
-  font-size: 1.2vw;
-}
-
-.entryFuture {
-  color: #ddd;
-}
-.entryNow {
-  font-size: 1.3vw;
-  color: #fff;
-  line-height: 4vh;
-  background-color: rgba(255, 255, 255, 0.09);
-  border-bottom: 0.5vh solid #ff7597aa;
-  margin-left: -0.5vw;
-}
-
 /* =================== OVERLAY ===================*/
 
 .message {

client/src/features/viewers/backstage/TodayItem.jsx

@@ -1,5 +1,5 @@
 import { stringFromMillis } from '../../../common/dateConfig';
-import style from './StageManager.module.css';
+import style from './Paginator.module.css';
 export default function TodayItem(props) {
   const { selected, timeStart, timeEnd, title } = props;
 

client/src/features/viewers/lower/Lower.module.css

@@ -18,7 +18,6 @@
   display: flex;
   flex-direction: column;
   width: 45vw;
-  gap: 3vh;
   border-radius: 0 1vh 1vh 0;
 }
 
@@ -42,6 +41,7 @@
 
 .titleContainer,
 .subtitleContainer {
+  margin-bottom: 1vh;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;