feat: Control scheme improvement

frontend/react/src/ui/contextmenus/mapcontextmenu.tsx

@@ -37,12 +37,14 @@ export function MapContextMenu(props: {}) {
     });
     ContextActionSetChangedEvent.on((contextActionSet) => setcontextActionSet(contextActionSet));
     MapContextMenuRequestEvent.on((latlng) => {
+      setUnit(null);
       setLatLng(latlng);
       const containerPoint = getApp().getMap().latLngToContainerPoint(latlng);
       setXPosition(getApp().getMap().getContainer().offsetLeft + containerPoint.x);
       setYPosition(getApp().getMap().getContainer().offsetTop + containerPoint.y);
     });
     UnitContextMenuRequestEvent.on((unit) => {
+      setLatLng(null);
       setUnit(unit);
       const containerPoint = getApp().getMap().latLngToContainerPoint(unit.getPosition());
       setXPosition(getApp().getMap().getContainer().offsetLeft + containerPoint.x);
@@ -100,8 +102,8 @@ export function MapContextMenu(props: {}) {
             <div
               ref={contentRef}
               className={`
-            absolute flex min-w-80 gap-2 rounded-md bg-olympus-600
-          `}
+                absolute flex min-w-80 gap-2 rounded-md bg-olympus-600
+              `}
             >
               <div
                 className={`

frontend/react/src/ui/panels/controlspanel.tsx

@@ -91,14 +91,14 @@ export function ControlsPanel(props: {}) {
         target: faFighterJet,
         text: "Show unit actions",
       });
-      controls.push({
-        actions: shortcuts["toggleRelativePositions"]?.toActions(),
-        text: "Activate group movement",
-      });
-      controls.push({
-        actions: [...shortcuts["toggleRelativePositions"]?.toActions(), "Wheel"],
-        text: "Rotate formation",
-      });
+      //controls.push({
+      //  actions: shortcuts["toggleRelativePositions"]?.toActions(),
+      //  text: "Activate group movement",
+      //});
+      //controls.push({
+      //  actions: [...shortcuts["toggleRelativePositions"]?.toActions(), "Wheel"],
+      //  text: "Rotate formation",
+      //});
     } else if (appState === OlympusState.SPAWN) {
       controls = [
         {

frontend/react/src/ui/panels/infobar.tsx

@@ -21,9 +21,10 @@ export function InfoBar(props: {}) {
           <div
             key={idx}
             className={`
-              absolute w-fit translate-x-[-50%] gap-2 text-nowrap rounded-full
+              absolute w-[250px] translate-x-[-50%] gap-2 rounded-full
               bg-olympus-800/90 px-4 py-2 text-center text-sm text-white
               shadow-md backdrop-blur-lg backdrop-grayscale
+              sm:w-fit sm:text-nowrap
             `}
             style={{ top: `${idx * 20}px` }}
           >

frontend/react/src/ui/panels/maptoolbar.tsx

@@ -140,12 +140,16 @@ export function MapToolBar(props: {}) {
           {!scrolledTop && (
             <FaChevronUp
               className={`
-                absolute top-0 h-6 w-full rounded-lg px-3.5 py-1 text-gray-200
+                absolute top-0 h-6 w-full rounded-lg bg-red-500 px-3.5 py-1
+                text-gray-200
                 dark:bg-olympus-900
               `}
             />
           )}
-          <div className={`flex flex-col gap-2 overflow-y-auto no-scrollbar p-2`} onScroll={(ev) => onScroll(ev.target)} ref={scrollRef}>
+          <div className={`
+            pointer-events-auto flex flex-col gap-2 overflow-y-auto no-scrollbar
+            p-2
+          `} onScroll={(ev) => onScroll(ev.target)} ref={scrollRef}>
             <>
               <div className="flex flex-col gap-1">
                 <OlStateButton