fix(overlays): add transformation of css

frontend/overlays/package.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "@protobuf-ts/twirp-transport": "^2.9.1",
     "@twir/grpc": "workspace:^",
+    "nested-css-to-flat": "^1.0.5",
     "obs-websocket-js": "^5.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

frontend/overlays/src/pages/overlaysRegistry.tsx

@@ -1,7 +1,9 @@
+import { transform } from 'nested-css-to-flat';
 import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import useWebSocket from 'react-use-websocket';
 
+
 declare global {
 	interface Window {
 		webkitAudioContext: typeof AudioContext
@@ -133,9 +135,9 @@ export const OverlaysRegistry: React.FC = () => {
 		{layers.filter(l => l.type === 'HTML').map((layer) => {
 			return <Fragment key={layer.id}>
 				<style>
-					{`.layer-${layer.id} {
+					{transform(`.layer-${layer.id} {
 						${b64DecodeUnicode(layer.settings.htmlOverlayCss)}
-					}`}
+					}`)}
 				</style>
 				<div
 					key={layer.id}