Misc CSS fixes

evan-goode · evan-goode · commit dd346df8897c · 2025-04-16T03:04:33.000Z
diff --git a/public/style.css b/public/style.css
@@ -11,6 +11,10 @@
   --font-family: monospace;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 html,
 body {
   margin: 0;
@@ -39,16 +43,20 @@ table {
   border-collapse: collapse;
 }
 
-td:not(:first-child) {
-  padding-left: 0.5rem;
+thead {
+  font-weight: bold;
 }
 
-td:last-child {
-  text-align: right;
+td:not(:last-child) {
+  padding-right: 0.5rem;
 }
 
-thead {
-  font-weight: bold;
+thead tr > td, tbody tr:not(:last-child) > td {
+  padding-bottom: 0.5rem;
+}
+
+td:last-child {
+  text-align: right;
 }
 
 a {
@@ -135,19 +143,29 @@ input[type="password"] {
   border: var(--input-border-width) solid var(--accent);
 }
 
+input.long {
+  width: 22em;
+}
+
+@media (max-width: 600px) {
+  input[type="text"]:not([hidden]),
+  input[type="number"]:not([hidden]),
+  input[type="password"]:not([hidden]),
+  input.long:not([hidden]) {
+    display: block;
+    width: 100%;
+  }
+}
+
 input[type="number"] {
-  width: 3rem;
+  width: 5rem;
 }
 
 input[type="checkbox"]:not(:disabled),
 input[type="radio"]:not(:disabled) {
   cursor: pointer;
 }
 
-input.long {
-  width: 22em;
-}
-
 input[type="text"]::placeholder,
 input[type="password"]::placeholder {
   color: white;
@@ -157,9 +175,8 @@ input[type="password"]::placeholder {
 button,
 input[type="submit"],
 input[type="file"]::file-selector-button {
+  margin: 0.5em 0;
   font-family: var(--font-family);
-  margin: 0.3em var(--button-shadow-size);
-  margin-left: var(--button-shadow-size);
   background-color: var(--accent);
   display: inline-block;
   color: white;
@@ -173,6 +190,10 @@ input[type="file"]::file-selector-button {
     0 0 0 var(--button-highlight-size) black;
 }
 
+input[type="file"]::file-selector-button {
+  margin-right: 0.5em;
+}
+
 button:hover:not(:disabled),
 input[type="submit"]:hover:not(:disabled),
 input[type="file"]::file-selector-button:hover:not(:disabled) {
@@ -233,8 +254,8 @@ fieldset {
 
 #content {
   max-width: 800px;
+  padding: 1em;
   margin: auto;
-  padding: 1rem;
 }
 
 pre {
diff --git a/view/admin.tmpl b/view/admin.tmpl
@@ -23,7 +23,7 @@
       <thead>
         <tr>
           <td style="width: 50%">Link</td>
-          <td>Date Generated</td>
+          <td>Date&nbsp;Generated</td>
           <td></td>
         </tr>
       </thead>
@@ -36,7 +36,7 @@
               >
             </td>
             <td>
-              {{ $invite.CreatedAt.Format "Mon Jan _2 15:04:05 MST 2006" }}
+              {{ $invite.CreatedAt.Format "Jan _2 15:04:05 MST 2006" }}
             </td>
             <td>
               <form
@@ -91,10 +91,10 @@
         <tr>
           <td colspan="2">User</td>
           <td>Players</td>
-          <td>Max # players*</td>
+          <td>Max&nbsp;#&nbsp;players*</td>
           <td>Admin</td>
           <td>Locked</td>
-          <td>Delete Account</td>
+          <td>Delete&nbsp;Account</td>
         </tr>
       </thead>
       <tbody>
@@ -122,7 +122,7 @@
                   <a href="{{ $.App.FrontEndURL }}/web/player/{{ $player.UUID }}">{{ $player.Name }}</a>
                 {{ end }}
               {{ else if gt (len $user.Players) 1 }}
-                {{ len $user.Players }} players
+                {{ len $user.Players }}&nbsp;players
               {{ end }}
             </td>
             <td>
diff --git a/view/layout.tmpl b/view/layout.tmpl
@@ -22,7 +22,9 @@
     </head>
     <body>
       <div id="background"></div>
-      <main id="content">{{ block "content" . }}{{ end }}</main>
+      <main id="content">
+        {{ block "content" . }}{{ end }}
+      </main>
       <script type="module">
         for (const el of document.querySelectorAll(".noscript-hidden")) {
           el.classList.remove("noscript-hidden");
diff --git a/view/user.tmpl b/view/user.tmpl
@@ -45,7 +45,7 @@
           <td colspan="2">Player</td>
           <td>UUID</td>
           {{ if or .App.Config.AllowAddingDeletingPlayers .User.IsAdmin }}
-            <td>Delete Player</td>
+            <td>Delete&nbsp;Player</td>
           {{ end }}
         </tr>
       </thead>
@@ -563,7 +563,7 @@
   </form>
   <p>
     <details>
-      <summary>Delete account</summary>
+      <summary>Delete Account</summary>
       <form
         action="{{ .App.FrontEndURL }}/web/delete-user"
         method="post"
@@ -579,7 +579,7 @@
             {{ .App.FrontEndURL }}
           {{ end }}"
         />
-        <input type="submit" value="Delete account" />
+        <input type="submit" value="Delete Account" />
       </form>
     </details>
   </p>
