diff --git a/index.html b/index.html
index 26adcb019..27264b346 100644
--- a/index.html
+++ b/index.html
@@ -277,7 +277,7 @@
     >
       <!-- Bottom HUD: contents on mobile, fixed on desktop -->
       <div
-        class="contents sm:flex sm:fixed sm:bottom-0 sm:left-[calc(50%-250px)] sm:z-[200] sm:flex-col sm:pointer-events-none sm:w-[500px] min-[1200px]:mb-4"
+        class="contents sm:flex sm:fixed sm:bottom-0 sm:inset-x-0 sm:mx-auto sm:z-[200] sm:flex-col sm:pointer-events-none sm:w-[500px] min-[1200px]:mb-4"
         data-draggable="bottom-hud"
         style="padding-bottom: env(safe-area-inset-bottom)"
       >
diff --git a/src/client/graphics/DraggableController.ts b/src/client/graphics/DraggableController.ts
index ca35c9c24..b84d02e84 100644
--- a/src/client/graphics/DraggableController.ts
+++ b/src/client/graphics/DraggableController.ts
@@ -148,7 +148,7 @@ export class DraggableController {
   }
 
   private handlePointerDown(e: PointerEvent): void {
-    if (this._locked) return;
+    if (this._locked || e.button !== 0) return;
     const target = e.target as HTMLElement;
     if (target.closest("button, input, select, textarea, a, [data-no-drag]")) {
       return;
@@ -322,12 +322,16 @@ export class DraggableController {
   }
 
   private save(): void {
-    const data = {
-      locked: this._locked,
-      x: this._offsetX,
-      y: this._offsetY,
-    };
-    localStorage.setItem(this.storageKey, JSON.stringify(data));
+    try {
+      const data = {
+        locked: this._locked,
+        x: this._offsetX,
+        y: this._offsetY,
+      };
+      localStorage.setItem(this.storageKey, JSON.stringify(data));
+    } catch {
+      // Quota exceeded or storage unavailable — position won't persist
+    }
   }
 
   private load(): void {
diff --git a/src/client/graphics/layers/DraggablePanel.ts b/src/client/graphics/layers/DraggablePanel.ts
index a8193f5b0..5346ed309 100644
--- a/src/client/graphics/layers/DraggablePanel.ts
+++ b/src/client/graphics/layers/DraggablePanel.ts
@@ -5,11 +5,8 @@ import { DraggableController } from "../DraggableController";
 
 /**
  * Non-wrapper element: place inside a panel and it renders a lock/reset
- * toolbar on the right side. Drag behaviour is applied to the nearest
+ * toolbar on the outside edge. Drag behaviour is applied to the nearest
  * ancestor with a matching `data-draggable` attribute.
- *
- * The toolbar is always visible so it contributes to the panel's bounding
- * rect for collision detection.
  */
 @customElement("draggable-panel")
 export class DraggablePanel extends LitElement {
diff --git a/src/client/graphics/layers/PlayerInfoOverlay.ts b/src/client/graphics/layers/PlayerInfoOverlay.ts
index 0e94a892a..5a365e24d 100644
--- a/src/client/graphics/layers/PlayerInfoOverlay.ts
+++ b/src/client/graphics/layers/PlayerInfoOverlay.ts
@@ -519,7 +519,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
 
     return html`
       <div
-        class="fixed top-0 left-0 right-0 sm:left-[calc(50%-250px)] sm:right-auto z-[1001]"
+        class="fixed top-0 inset-x-0 sm:mx-auto sm:w-[500px] z-[1001]"
         style="margin-top: ${this.barOffset}px;"
         @click=${() => this.hide()}
         @contextmenu=${(e: MouseEvent) => e.preventDefault()}