Fix positioning of app menus

Author: devklick

src/components/BorderedApp/BorderedApp.scss

@@ -8,7 +8,6 @@
     "title-bar"
     "content";
   border-radius: 10px 10px 0 0;
-  backdrop-filter: blur(8px) brightness(130%);
   box-shadow: 0px -2px 10px 1px rgb(0, 0, 0, 0.5);
   position: fixed;
 

src/components/BorderedApp/BorderedAppMenu/BorderedAppMenu.scss

@@ -4,12 +4,10 @@
   align-items: center;
   &-items {
     width: auto;
-    position: fixed;
+    position: absolute;
+    white-space: nowrap;
     box-sizing: border-box;
     box-shadow: 0 0 2px rgb(0, 0, 0, 0.5);
-    // Cant use backdrop-filter on fixed elements :(
-    //   backdrop-filter: blur(8px) brightness(130%);
-    // background-color: darkmagenta;
 
     &__content {
       box-sizing: border-box;

src/components/BorderedApp/BorderedAppMenu/BorderedAppMenu.tsx

@@ -34,10 +34,10 @@ function BorderedAppMenuItem({
     // still it's initial value. This avoids incorrectly adding
     // multiple times when the effect fires multiple times.
     if (elementPosition.current.x === position.x) {
-      elementPosition.current.x += rect?.width ?? 0;
+      elementPosition.current.x = rect?.width ?? 0;
     }
     if (elementPosition.current.y === position.y) {
-      elementPosition.current.y += (rect?.height ?? 0) * (itemNo - 1);
+      elementPosition.current.y = (rect?.height ?? 0) * (itemNo - 1);
     }
   }, [elementRef, itemNo, position]);
   const [open, setOpen] = useState<boolean>(false);