feat: initial VERY VERY incomplete steam frame support

1 files changed, 42 insertions, 13 deletions

diff --git a/frontend/src/components/NotificationBadge.tsx b/frontend/src/components/NotificationBadge.tsx
index 3c5d8215..1d14d576 100644
--- a/frontend/src/components/NotificationBadge.tsx
+++ b/frontend/src/components/NotificationBadge.tsx
@@ -2,23 +2,52 @@ import { CSSProperties, FunctionComponent } from 'react';
 
 interface NotificationBadgeProps {
   show?: boolean;
+  vr?: boolean;
   style?: CSSProperties;
 }
 
-const NotificationBadge: FunctionComponent<NotificationBadgeProps> = ({ show, style }) => {
+const NotificationBadge: FunctionComponent<NotificationBadgeProps> = ({ show, style, vr }) => {
   return show ? (
-    <div
-      style={{
-        position: 'absolute',
-        top: '8px',
-        right: '8px',
-        height: '10px',
-        width: '10px',
-        background: 'orange',
-        borderRadius: '50%',
-        ...style,
-      }}
-    />
+    vr ? (
+      // whoever made transform:scale completely break absolute positioning goes straight to super turbo hell this took me an hour
+      <div
+        style={{
+          top: 0,
+          left: 0,
+          marginLeft: 'auto',
+          width: 0,
+          height: 0,
+          overflow: 'visible',
+          transform: 'translate(0px, 0px)',
+        }}
+      >
+        <div
+          style={{
+            position: 'fixed',
+            top: '-18px',
+            right: '-6px',
+            width: '10px',
+            height: '10px',
+            background: 'orange',
+            borderRadius: '50%',
+            ...style,
+          }}
+        />
+      </div>
+    ) : (
+      <div
+        style={{
+          position: 'absolute',
+          top: '8px',
+          right: '8px',
+          height: '10px',
+          width: '10px',
+          background: 'orange',
+          borderRadius: '50%',
+          ...style,
+        }}
+      />
+    )
   ) : null;
 };