improve mobile styles

src/components/ChatWindow.module.css

@@ -17,7 +17,6 @@
   overflow-y: auto;
   background: rgba(0, 50, 60, 0.65);
   padding: 6px;
-  user-select: text;
   font-size: 12px;
   line-height: 1.25;
   /* Thin scrollbar that doesn't take much space. */
@@ -25,6 +24,12 @@
   scrollbar-color: rgba(44, 172, 181, 0.4) transparent;
 }
 
+@media (pointer: fine) {
+  .ChatWindow {
+    user-select: text;
+  }
+}
+
 @media (max-width: 699px) {
   .ChatWindow {
     font-size: 11px;

src/components/ScoreScreen.module.css

@@ -1,6 +1,7 @@
 .Dialog {
   composes: Dialog from "./GameDialog.module.css";
   width: 600px;
+  max-width: 100%;
   min-height: 360px;
   display: grid;
   grid-template-columns: 100%;
@@ -73,6 +74,7 @@
 
 .Table {
   width: 100%;
+  table-layout: fixed;
   border-collapse: separate;
   border-spacing: 0;
   font-size: 13px;
@@ -95,11 +97,13 @@
 }
 
 .TeamName {
-  width: 50%;
   font-size: 18px;
   font-weight: 500;
   color: #7dffff;
   text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .TeamScore {
@@ -119,13 +123,23 @@
   color: rgba(125, 255, 255, 0.7);
   text-transform: uppercase;
   text-align: left;
+  white-space: nowrap;
 }
 
 .ColumnHeader {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.ColumnHeaderScore {
-  text-align: right !important;
+.ColumnHeaderRow .ColumnHeaderScore {
+  text-align: right;
+  padding-left: 0;
+}
+
+.TeamScore,
+.ColumnHeaderRow .ColumnHeaderScore,
+.PlayerScore {
+  width: 22%;
 }
 
 .ColumnPing {
@@ -152,13 +166,16 @@
 }
 
 .PlayerName {
-  width: 50%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-weight: 500;
 }
 
+.PlayerBody .PlayerName {
+  padding-right: 0;
+}
+
 .PlayerNameLocal {
   composes: PlayerName;
   color: #5dff8a;
@@ -167,6 +184,8 @@
 .PlayerScore {
   text-align: right;
   white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   font-weight: 500;
   color: rgba(176, 213, 201, 0.8);
 }
@@ -233,4 +252,10 @@
   .ColumnPing {
     display: none;
   }
+
+  .CloseButton {
+    width: 220px;
+    height: 36px;
+    margin: 0 auto;
+  }
 }

src/components/ServerBrowser.module.css

@@ -134,6 +134,13 @@
   }
 }
 
+@media (max-width: 399px) {
+  .Table th[data-column="map"],
+  .Table td[data-column="map"] {
+    display: none;
+  }
+}
+
 .Table th[data-column="players"],
 .Table td[data-column="players"],
 .Table th[data-column="ping"],
@@ -152,6 +159,13 @@
   font-weight: 500;
 }
 
+@media (pointer: coarse) {
+  .Table td {
+    padding-top: 6px;
+    padding-bottom: 6px;
+  }
+}
+
 .Table td.EmptyServer {
   opacity: 0.4;
 }
@@ -175,6 +189,16 @@
   font-size: 11px;
 }
 
+.Table th[data-column="players"] {
+  padding-top: 2px;
+  padding-bottom: 2px;
+  vertical-align: bottom;
+}
+
+.PlayersIcon {
+  font-size: 16px;
+}
+
 .Empty td {
   text-align: center;
   color: rgba(201, 220, 216, 0.3);
@@ -279,3 +303,9 @@
     height: 32px;
   }
 }
+
+@media (max-width: 399px) {
+  .ServerCount {
+    display: none;
+  }
+}

src/components/ServerBrowser.tsx

@@ -3,6 +3,7 @@ import type { ServerInfo } from "../../relay/types";
 import styles from "./ServerBrowser.module.css";
 import { useLiveSelector } from "../state/liveConnectionStore";
 import { useSettings } from "./SettingsProvider";
+import { LuUsers } from "react-icons/lu";
 
 export function ServerBrowser({ onClose }: { onClose: () => void }) {
   const servers = useLiveSelector((s) => s.servers);
@@ -109,7 +110,11 @@ export function ServerBrowser({ onClose }: { onClose: () => void }) {
                     data-column="players"
                     onClick={() => handleSort("playerCount")}
                   >
-                    Players
+                    <LuUsers
+                      className={styles.PlayersIcon}
+                      title="Players"
+                      aria-label="Players"
+                    />
                   </th>
                   <th data-column="ping" onClick={() => handleSort("ping")}>
                     Ping
@@ -135,7 +140,9 @@ export function ServerBrowser({ onClose }: { onClose: () => void }) {
                     onClick={() => {
                       setSelectedAddress(server.address);
                       const form = document.forms.namedItem("serverList")!;
-                      const inputs = form.elements.namedItem("serverAddress") as RadioNodeList;
+                      const inputs = form.elements.namedItem(
+                        "serverAddress",
+                      ) as RadioNodeList;
                       const input = Array.from(inputs).find(
                         (input) => input.value === server.address,
                       );
@@ -186,7 +193,7 @@ export function ServerBrowser({ onClose }: { onClose: () => void }) {
                     <td data-column="mod">{server.mod}</td>
                   </tr>
                 ))}
-                {sorted.length === 0 && !serversLoading && (
+                {/* {sorted.length === 0 && !serversLoading && (
                   <tr className={styles.Empty}>
                     <td colSpan={6}>No servers found</td>
                   </tr>
@@ -195,7 +202,7 @@ export function ServerBrowser({ onClose }: { onClose: () => void }) {
                   <tr className={styles.Empty}>
                     <td colSpan={6}>Querying master server…</td>
                   </tr>
-                )}
+                )} */}
               </tbody>
             </table>
           </form>

src/components/ThreeCanvas.tsx

@@ -28,7 +28,7 @@ export function ThreeCanvas({
   const { renderOnDemand: renderOnDemandFromSettings } = useDebug();
   const renderOnDemand = renderOnDemandFromProps || renderOnDemandFromSettings;
   const { fpsLimit } = useSettings();
-  const fpsLimitActive = fpsLimit != null;
+  const fpsLimitActive = fpsLimit != null && !renderOnDemand;
 
   return (
     <Canvas