From ca313fd38321ad27e9dd90880cfbd254b2b3baca Mon Sep 17 00:00:00 2001
From: Evan <evanpelle@gmail.com>
Date: Thu, 30 Jan 2025 11:56:36 -0800
Subject: [PATCH] have playerinfo stay under optionsmenu

---
 src/client/graphics/layers/OptionsMenu.ts       | 4 +---
 src/client/graphics/layers/PlayerInfoOverlay.ts | 4 ++--
 src/client/graphics/layers/TopBar.ts            | 2 +-
 src/client/index.html                           | 8 ++++++--
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/client/graphics/layers/OptionsMenu.ts b/src/client/graphics/layers/OptionsMenu.ts
index e3b400d4d..d522fcb9e 100644
--- a/src/client/graphics/layers/OptionsMenu.ts
+++ b/src/client/graphics/layers/OptionsMenu.ts
@@ -64,9 +64,7 @@ export class OptionsMenu extends LitElement implements Layer {
       return html``;
     }
     return html`
-      <div
-        class="fixed top-0 lg:top-4 right-0 lg:right-4 z-50 pointer-events-auto"
-      >
+      <div class="top-0 lg:top-4 right-0 lg:right-4 z-50 pointer-events-auto">
         <div
           class="bg-opacity-60 bg-gray-900 p-1 lg:p-2 rounded-lg backdrop-blur-md"
         >
diff --git a/src/client/graphics/layers/PlayerInfoOverlay.ts b/src/client/graphics/layers/PlayerInfoOverlay.ts
index ece80be11..e772818c7 100644
--- a/src/client/graphics/layers/PlayerInfoOverlay.ts
+++ b/src/client/graphics/layers/PlayerInfoOverlay.ts
@@ -228,9 +228,9 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
       : "opacity-0 invisible pointer-events-none";
 
     return html`
-      <div class="fixed top-24 right-3 z-50 flex flex-col md:top-20 md:right-2">
+      <div class="flex w-full  z-50 flex flex-col">
         <div
-          class="bg-opacity-70 bg-gray-900 rounded-lg shadow-lg backdrop-blur-sm transition-all duration-300 min-w-[120px] md:min-w-[100px] text-white text-lg md:text-base ${containerClasses}"
+          class="bg-opacity-70 bg-gray-900 rounded-lg shadow-lg backdrop-blur-sm transition-all duration-300  text-white text-lg md:text-base ${containerClasses}"
         >
           ${this.player != null ? this.renderPlayerInfo(this.player) : ""}
           ${this.unit != null ? this.renderUnitInfo(this.unit) : ""}
diff --git a/src/client/graphics/layers/TopBar.ts b/src/client/graphics/layers/TopBar.ts
index 3266e7b61..e689f7e22 100644
--- a/src/client/graphics/layers/TopBar.ts
+++ b/src/client/graphics/layers/TopBar.ts
@@ -36,7 +36,7 @@ export class TopBar extends LitElement implements Layer {
     const goldPerSecond = this.game.config().goldAdditionRate(myPlayer) * 10;
     return html`
       <div
-        class="fixed top-0 z-50 bg-black/90 text-white text-sm p-1 rounded grid grid-cols-1 sm:grid-cols-2 w-2/3 sm:w-2/3 md:w-1/2 lg:hidden"
+        class="fixed top-0 z-50 bg-black/90 text-white text-sm p-1 rounded grid grid-cols-1 sm:grid-cols-2 w-1/2 sm:w-2/3 md:w-1/2 lg:hidden"
       >
         <!-- Pop section (takes 2 columns on desktop) -->
         <div
diff --git a/src/client/index.html b/src/client/index.html
index b7ecaf17e..e561f1226 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -176,11 +176,15 @@
     <emoji-table></emoji-table>
     <leader-board></leader-board>
     <build-menu></build-menu>
-    <options-menu></options-menu>
-    <player-info-overlay></player-info-overlay>
     <win-modal></win-modal>
     <top-bar></top-bar>
 
+    <div class="fixed flex-col top-0 right-0 z-50 max-w-1/3 sm:max-w-1/5">
+      <options-menu></options-menu>
+    <player-info-overlay></player-info-overlay>
+    </div>
+
+
     <div class="fixed bottom-0 flex w-full flex-col-reverse sm:flex-row z-50">
       <div class="w-full sm:w-1/3">
         <control-panel></control-panel>