make options menu scale better

src/client/graphics/layers/OptionsMenu.ts

@@ -71,7 +71,7 @@ export class OptionsMenu extends LitElement implements Layer {
           <div class="flex items-center gap-1 lg:gap-2">
             <button
               class="${!this.showPauseButton ? "hidden" : ""} 
-                               w-6 h-6 lg:w-10 lg:h-10 flex items-center justify-center 
+                               w-8 h-8 lg:w-10 lg:h-10 flex items-center justify-center 
                                bg-opacity-70 bg-gray-700 text-opacity-90 text-white
                                border-none rounded cursor-pointer
                                hover:bg-opacity-60 hover:bg-gray-600
@@ -83,14 +83,14 @@ export class OptionsMenu extends LitElement implements Layer {
               ${this.isPaused ? "▶" : "⏸"}
             </button>
             <div
-              class="w-14 h-6 lg:w-20 lg:h-10 flex items-center justify-center 
+              class="w-14 h-8 lg:w-20 lg:h-10 flex items-center justify-center 
                               bg-opacity-50 bg-gray-700 text-opacity-90 text-white 
                               rounded text-sm lg:text-xl"
             >
               ${this.timer}
             </div>
             <button
-              class="w-6 h-6 lg:w-10 lg:h-10 flex items-center justify-center 
+              class="w-8 h-8 lg:w-10 lg:h-10 flex items-center justify-center 
                                bg-opacity-70 bg-gray-700 text-opacity-90 text-white
                                border-none rounded cursor-pointer
                                hover:bg-opacity-60 hover:bg-gray-600

src/client/graphics/layers/PlayerInfoOverlay.ts

@@ -181,7 +181,11 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
 
     return html`
       <div class="p-2">
-        <div class="font-bold mb-1 ${isAlly ? "text-green-500" : "text-white"}">
+        <div
+          class="text-bold text-sm lg:text-lg font-bold mb-1 ${isAlly
+            ? "text-green-500"
+            : "text-white"}"
+        >
           ${player.name()}
         </div>
         <div class="text-sm opacity-80">

src/client/index.html

@@ -179,18 +179,19 @@
     <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">
+    <div class="fixed right-0 top-0 z-50 flex flex-col w-32 sm:w-32 lg:w-48">
       <options-menu></options-menu>
-    <player-info-overlay></player-info-overlay>
+      <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>
       </div>
-      <div class="w-full sm:w-2/3 sm:fixed sm:right-0 sm:bottom-0 sm:flex justify-end">
-        <events-display></events-displayflex >
+      <div
+        class="w-full sm:w-2/3 sm:fixed sm:right-0 sm:bottom-0 sm:flex justify-end"
+      >
+        <events-display></events-display>
       </div>
     </div>