fix: prevent long-press text selection and enlarge plan dropdown for touch UX

Add a shared .hold-press utility (user-select/touch-callout/touch-action/tap-highlight off) and apply it with select-none touch-manipulation + onContextMenu preventDefault to all hold-to-confirm buttons (Hold to Reset, Save/Reset Robot Config, Update/Reset All Parameters, ROS bridge refresh) so iOS/Android/Linux touch screens no longer trigger the text-selection cursor or context menu mid-press. Also detach the plan picker popover from the trigger width: w-[36rem], text-[1.625rem], min-h-[5rem] items, with max-h capped by --radix-popover-content-available-height so it fits any viewport.

Author: SeanChangX

src/components/RosBridgeFloat.tsx

@@ -16,13 +16,14 @@ export function RosBridgeFloat() {
     <div
       className={`fixed ${
         isHalfScreen ? "bottom-30" : "bottom-20"
-      } right-6 z-50 flex max-w-[min(100%,calc(100vw-1.5rem))] cursor-pointer select-none items-center gap-6 rounded-2xl border-2 border-[#444] bg-black/70 px-5 py-4 shadow-2xl backdrop-blur-md transition-all duration-300 sm:right-8 sm:gap-8 sm:px-8 sm:py-5`}
+      } right-6 z-50 flex max-w-[min(100%,calc(100vw-1.5rem))] cursor-pointer select-none touch-manipulation hold-press items-center gap-6 rounded-2xl border-2 border-[#444] bg-black/70 px-5 py-4 shadow-2xl backdrop-blur-md transition-all duration-300 sm:right-8 sm:gap-8 sm:px-8 sm:py-5`}
       style={{
         background:
           pressProgress > 0
             ? `linear-gradient(to right, rgba(76, 175, 80, 0.8) ${pressProgress}%, rgba(0, 0, 0, 0.7) ${pressProgress}%)`
             : "rgba(0, 0, 0, 0.7)",
       }}
+      onContextMenu={(e) => e.preventDefault()}
       onMouseDown={() => {
         const timer = setInterval(() => {
           setPressProgress((prev: number) => {

src/components/playmat.tsx

@@ -623,9 +623,11 @@ export default function Playmat() {
                     </Popover.Trigger>
                     <Popover.Portal>
                       <Popover.Content
-                        className="z-[200] w-[var(--radix-popover-trigger-width)] max-h-72 overflow-y-auto rounded-xl border border-[#333] bg-[#0a0a0a] p-1 shadow-2xl"
-                        sideOffset={4}
+                        className="z-[200] w-[36rem] max-w-[calc(100vw-2rem)] max-h-[min(34rem,var(--radix-popover-content-available-height))] overflow-y-auto overscroll-contain rounded-2xl border border-[#333] bg-[#0a0a0a] p-2 shadow-2xl"
+                        sideOffset={9}
                         align="start"
+                        collisionPadding={16}
+                        avoidCollisions
                         onOpenAutoFocus={(e) => e.preventDefault()}
                       >
                         {plans.map((plan: PlanSequence) => (
@@ -637,7 +639,7 @@ export default function Playmat() {
                               setPlanMenuOpen(false);
                             }}
                             className={clsx(
-                              "w-full text-left px-3 py-3 text-lg rounded-lg transition-colors",
+                              "w-full text-left px-5 py-[1.375rem] min-h-[5rem] text-[1.625rem] rounded-xl transition-colors select-none touch-manipulation",
                               selectedPlanId === plan.id
                                 ? "text-white"
                                 : "text-[#ccc] hover:bg-[#1a1a1a] hover:text-white"
@@ -683,7 +685,8 @@ export default function Playmat() {
             <div className="flex items-center justify-between gap-4">
               {/* Reset Button */}
               <div
-                className="flex-1 relative group"
+                className="flex-1 relative group hold-press select-none touch-manipulation"
+                onContextMenu={(e) => e.preventDefault()}
                 onMouseDown={() => {
                   const timer = setInterval(() => {
                     setPressProgress((prev: number) => {

src/components/status.tsx

@@ -1122,13 +1122,14 @@ export default function RobotDashboard() {
         <div className="w-full max-w-2xl sm:max-w-none">
           <button
             type="button"
-            className="relative mt-8 block w-full overflow-hidden rounded-md px-5 py-4 text-center text-xl font-bold uppercase tracking-wider text-white transition-all duration-300"
+            className="relative mt-8 block w-full overflow-hidden rounded-md px-5 py-4 text-center text-xl font-bold uppercase tracking-wider text-white transition-all duration-300 hold-press select-none touch-manipulation"
             style={{
               background:
                 activeButton === "robotConfigSave" && buttonPressProgress > 0
                   ? `linear-gradient(to right, #4caf50 ${buttonPressProgress}%, var(--theme-accent) ${buttonPressProgress}%)`
                   : "var(--theme-accent)",
             }}
+            onContextMenu={(e) => e.preventDefault()}
             onMouseDown={() => startLongPress("robotConfigSave")}
             onMouseUp={cancelLongPress}
             onMouseLeave={cancelLongPress}
@@ -1139,13 +1140,14 @@ export default function RobotDashboard() {
           </button>
           <button
             type="button"
-            className="relative mt-2 block w-full overflow-hidden rounded-md px-5 py-4 text-center text-xl font-bold uppercase tracking-wider text-white transition-all duration-300"
+            className="relative mt-2 block w-full overflow-hidden rounded-md px-5 py-4 text-center text-xl font-bold uppercase tracking-wider text-white transition-all duration-300 hold-press select-none touch-manipulation"
             style={{
               background:
                 activeButton === "robotConfigReset" && buttonPressProgress > 0
                   ? `linear-gradient(to right, #4caf50 ${buttonPressProgress}%, #333 ${buttonPressProgress}%)`
                   : "#333",
             }}
+            onContextMenu={(e) => e.preventDefault()}
             onMouseDown={() => startLongPress("robotConfigReset")}
             onMouseUp={cancelLongPress}
             onMouseLeave={cancelLongPress}
@@ -1707,12 +1709,13 @@ export default function RobotDashboard() {
               </div>
 
               <button
-                className="text-white text-xl font-bold py-4 px-5 rounded-md w-full block text-center uppercase tracking-wider transition-all duration-300 mt-8 relative overflow-hidden"
+                className="text-white text-xl font-bold py-4 px-5 rounded-md w-full block text-center uppercase tracking-wider transition-all duration-300 mt-8 relative overflow-hidden hold-press select-none touch-manipulation"
                 style={{
-                  background: activeButton === 'update' && buttonPressProgress > 0 
+                  background: activeButton === 'update' && buttonPressProgress > 0
                     ? `linear-gradient(to right, #4caf50 ${buttonPressProgress}%, var(--theme-accent) ${buttonPressProgress}%)`
                     : "var(--theme-accent)",
                 }}
+                onContextMenu={(e) => e.preventDefault()}
                 onMouseDown={() => startLongPress('update')}
                 onMouseUp={cancelLongPress}
                 onMouseLeave={cancelLongPress}
@@ -1724,12 +1727,13 @@ export default function RobotDashboard() {
 
               {/* After the update button, add DEFAULT button */}
               <button
-                className="text-white text-xl font-bold py-4 px-5 rounded-md w-full block text-center uppercase tracking-wider transition-all duration-300 mt-2 relative overflow-hidden"
+                className="text-white text-xl font-bold py-4 px-5 rounded-md w-full block text-center uppercase tracking-wider transition-all duration-300 mt-2 relative overflow-hidden hold-press select-none touch-manipulation"
                 style={{
-                  background: activeButton === 'reset' && buttonPressProgress > 0 
+                  background: activeButton === 'reset' && buttonPressProgress > 0
                     ? `linear-gradient(to right, #4caf50 ${buttonPressProgress}%, #333 ${buttonPressProgress}%)`
                     : '#333'
                 }}
+                onContextMenu={(e) => e.preventDefault()}
                 onMouseDown={() => startLongPress('reset')}
                 onMouseUp={cancelLongPress}
                 onMouseLeave={cancelLongPress}

src/index.css

@@ -53,6 +53,15 @@ input[type="range"] {
   touch-action: pan-x;
 }
 
+/* Hold-to-confirm targets: suppress iOS callout, Android selection menu, and text selection magnifier on long press. Pair with Tailwind `select-none touch-manipulation`. */
+.hold-press {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  user-select: none;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
 @theme inline {
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);