app: Remove detected default OBS styles

This avoids having to explicitly tell people to remove these default
styles, since the cause issues with the alignment of the overlays.

src/overlay/Router.tsx

@@ -7,6 +7,7 @@ import globalCss from 'src/shared/globalCss';
 import store from 'src/shared/store';
 
 import NotFound from './components/NotFound';
+import {ensureNoOBSDefaultStyles} from './utils/obsFixes';
 import {registeredOverlays} from '.';
 
 type Props = RouteComponentProps<{overlayKey: string}>;
@@ -27,11 +28,15 @@ const MapOverlay: React.FC<Props> = observer(props => {
   return <descriptor.component config={instance.config} />;
 });
 
-const Router = () => (
-  <BrowserRouter>
-    <Global styles={globalCss} />
-    <Route path="/:overlayKey" component={MapOverlay} />
-  </BrowserRouter>
-);
+const Router = () => {
+  React.useEffect(ensureNoOBSDefaultStyles, []);
+
+  return (
+    <BrowserRouter>
+      <Global styles={globalCss} />
+      <Route path="/:overlayKey" component={MapOverlay} />
+    </BrowserRouter>
+  );
+};
 
 export default Router;

src/overlay/utils/obsFixes.tsx

@@ -0,0 +1,33 @@
+/**
+ * The default browser source styles that OBS injects for a new browser source.
+ *
+ * We should remove these default since the margin auto will break alignment
+ * for our overlays
+ */
+const DEFAULT_STYLES =
+  'body { background-color: rgba(0, 0, 0, 0); margin: 0px auto; overflow: hidden; }';
+
+/**
+ * Locate the style element containing the default OBS browser source styles
+ */
+export const findDefaultOBSStlyeNode = () =>
+  Array.from(document.querySelectorAll('head style:not([data-emotion])')).find(
+    el => el.innerHTML === DEFAULT_STYLES
+  );
+
+export const ensureNoOBSDefaultStyles = () => {
+  findDefaultOBSStlyeNode()?.remove();
+
+  const head = document.querySelector('head');
+
+  if (head === null) {
+    return () => null;
+  }
+  const observer = new MutationObserver(() => {
+    findDefaultOBSStlyeNode()?.remove();
+  });
+
+  observer.observe(head, {childList: true, attributes: false});
+
+  return () => observer.disconnect();
+};