open float label marker box on the right side of image

client/src/RegionTags/index.jsx

@@ -1,6 +1,6 @@
 // @flow weak
 
-import React from "react"
+import React, { useEffect, useState } from "react";
 import Paper from "@mui/material/Paper"
 import DefaultRegionLabel from "../RegionLabel"
 import LockIcon from "@mui/icons-material/Lock"
@@ -31,22 +31,54 @@ export const RegionTags = ({
 }) => {
   const RegionLabel =
     RegionEditLabel != null ? RegionEditLabel : DefaultRegionLabel
+
+   const [windowDimensions, setWindowDimensions] = useState({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  });
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowDimensions({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
   return regions
     .filter((r) => r.visible || r.visible === undefined)
     .map((region) => {
       const pbox = projectRegionBox(region)
       let margin = 8
       if (region.highlighted && region.type === "box") margin += 6
       const labelBoxHeight =
-        region.editingLabels && !region.locked ? 170 : region.tags ? 60 : 50
+        region.editingLabels && !region.locked ? 220 : region.tags ? 60 : 50
       const displayOnTop = pbox.y > labelBoxHeight
-
-      const coords = displayOnTop
-        ? {
+      const checkBottomSpace = pbox.y + pbox.h + margin / 2 + labelBoxHeight
+      const hasEnoughBottomSpace = checkBottomSpace  < (windowDimensions.height-45)
+      let coords;
+      if (displayOnTop) {
+        coords = {
           left: pbox.x,
           top: pbox.y - margin / 2,
-        }
-        : {left: pbox.x, top: pbox.y + pbox.h + margin / 2}
+        };
+      } else if (hasEnoughBottomSpace) {
+        coords = {
+          left: pbox.x,
+          top: pbox.y + pbox.h + margin / 2,
+        };
+      } else {
+        // Not enough space at the bottom, render on the right
+        coords = {
+          left: pbox.x + pbox.w + margin / 2,
+          top: pbox.y,
+        };
+      }
       if (region.locked) {
         return (
           <div