style improvements

- added empty state to list
- styled scrollbars
- progressbar shows time elapsed
- timers are monospace
- prevent overflow in titles

client/src/features/control/MessageControl.jsx

@@ -89,8 +89,8 @@ export default function MessageControl() {
             placeholder='only the presenter screens see this'
             className={style.inline}
           >
-            <EditablePreview />
-            <EditableInput className={style.editable13} />
+            <EditablePreview className={style.padleft} />
+            <EditableInput className={style.padleft} />
           </Editable>
           <VisibleIconBtn
             active={pres.visible}
@@ -109,8 +109,8 @@ export default function MessageControl() {
             placeholder='public screens will render this'
             className={style.inline}
           >
-            <EditablePreview />
-            <EditableInput className={style.editable13} />
+            <EditablePreview className={style.padleft} />
+            <EditableInput className={style.padleft} />
           </Editable>
           <VisibleIconBtn
             active={publ.visible}
@@ -129,8 +129,8 @@ export default function MessageControl() {
             placeholder='visible in lower third screen'
             className={style.inline}
           >
-            <EditablePreview />
-            <EditableInput />
+            <EditablePreview className={style.padleft} />
+            <EditableInput className={style.padleft} />
           </Editable>
 
           <VisibleIconBtn

client/src/features/control/MessageControl.module.css

@@ -27,8 +27,11 @@
 }
 
 .inline {
-  padding-left: 0.5em;
   border-radius: 4px;
   background-color: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.05);
 }
+
+.padleft {
+  padding-left: 0.5em;
+}