fix: address UI inconsistencies and improve code quality

src/components/about-app/about-app.ts

@@ -54,8 +54,8 @@ export class AppAbout extends LitElement {
               </ul>
             </sl-details>
             <sl-details summary="PWA Scorecard" open>
-              <div style="display: flex; flex-direction: row; grid-gap: 1rem;">
-                <div class="hide-at-800">
+              <div style="display: flex; flex-direction: row; gap: 1rem;">
+                <div class="hide-at-950">
                   <img
                     src="/assets/PWAReportCard.png"
                     alt="PWA Builder Scorecard"

src/components/about-modal.ts

@@ -26,11 +26,6 @@ export class AboutModal extends LitElement {
     this.isOpen = false;
   }
 
-  // confirm() {
-  //   this.dispatchEvent(new CustomEvent('close'));
-  //   this.close();
-  // }
-
   render() {
     if (!this.isOpen) {
       return html``;

src/components/confirmation-modal.ts

@@ -33,12 +33,12 @@ export class ConfirmationModal extends LitElement {
         @sl-after-close=${this.close}
       >
         <p>${this.message}</p>
-        <sl-button slot="footer" variant="danger" @click=${this.confirm}>
-          Confirm
-        </sl-button>
         <sl-button slot="footer" variant="default" @click=${this.close}>
           Cancel
         </sl-button>
+        <sl-button slot="footer" variant="danger" @click=${this.confirm}>
+          Confirm
+        </sl-button>
       </sl-dialog>
     `;
   }

src/components/game-tracker/game-tracker-styles.ts

@@ -10,6 +10,6 @@ export const gameTrackerStyles = css`
   sl-radio-group::part(form-control-input) {
     display: flex;
     flex-direction: row;
-    grid-gap: 1rem;
+    gap: 1rem;
   }
 `;

src/components/game-tracker/player-input.ts

@@ -75,7 +75,7 @@ export class PlayerInput extends LitElement {
 
   render() {
     return html`
-      <div style="display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; grid-gap: 1rem; padding-left: 1rem; padding-right: 1rem;">
+      <div style="display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; gap: 1rem; padding-left: 1rem; padding-right: 1rem;">
         <form
           class="input-validation-custom"
           @submit=${this.handleSubmit}
@@ -107,7 +107,7 @@ export class PlayerInput extends LitElement {
             Add Player
           </sl-button>
         </form>
-        <div style="display: flex; flex-direction: column; grid-gap: .5rem; flex: 1;">
+        <div style="display: flex; flex-direction: column; gap: .5rem; flex: 1;">
           <p style="margin-top: .25rem; margin-bottom: .25rem;">
             <strong>Player List</strong>
           </p>
@@ -121,7 +121,7 @@ export class PlayerInput extends LitElement {
               setTimeout(() => (alert.open = true), 2000);
             });
           </script>
-          <div style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; grid-gap: .5rem; width: 100%;">
+          <div style="display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; gap: .5rem; width: 100%;">
             ${this.players.map(player => html`
               <sl-tag variant="primary" removable @sl-remove=${() => this.removePlayer(player)}>
                 ${player}

src/components/game-tracker/standings-display.ts

@@ -35,7 +35,7 @@ export class StandingsDisplay extends LitElement {
             <th>Losses</th>
             <th>Draws</th>
             <th>Points</th>
-            <th class="hide-at-800">Win Percentage</th>
+            <th class="hide-at-950">Win Percentage</th>
           </tr>
         </thead>
         <tbody>
@@ -46,7 +46,7 @@ export class StandingsDisplay extends LitElement {
               <td style="text-align: center;">${standing.losses}</td>
               <td style="text-align: center;">${standing.draws}</td>
               <td style="text-align: center;">${standing.points}</td>
-              <td class="hide-at-800" style="text-align: center;">${standing.winPercentage || 0}</td>
+              <td class="hide-at-950" style="text-align: center;">${standing.winPercentage || 0}</td>
             </tr>
           `)}
         </tbody>

src/components/game-tracker/standings-tracker.ts

@@ -291,7 +291,7 @@ export class StandingsTracker extends LitElement {
           </sl-button>
         </sl-button-group>
       </div>
-      <div style="display: flex; flex-direction: column; grid-gap: 1rem;">
+      <div style="display: flex; flex-direction: column; gap: 1rem;">
         <sl-details summary="Match details" open>
           <match-input .players=${this.players.map(player => ({ name: player }))} @match-recorded=${(e: CustomEvent) => this.recordMatch(e.detail)}></match-input>
         </sl-details>
@@ -309,12 +309,12 @@ export class StandingsTracker extends LitElement {
           </sl-tab-panel>
           <sl-tab-panel name="history">
             <div slot="header">
-              <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center; grid-gap: .5rem; width: 100%;">
+              <div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: .5rem; width: 100%;">
                 Match results
                 <sl-tooltip content="Export Results">
                   <sl-button variant="success" size="small" pill label="export match results" @click=${this.exportMatchResults}>
                     <sl-icon slot="prefix" library="default" name="file-earmark-excel-fill" label="Export Results"></sl-icon>
-                    Export <span class="hide-at-800">Standings</span>
+                    Export <span class="hide-at-950">Standings</span>
                   </sl-button>
                 </sl-tooltip>
               </div>

src/components/match-tracker/match-tracker.ts

@@ -5,6 +5,7 @@ import '../icons/mana-icon';
 import '../icons/mtg-symbols';
 import '@shoelace-style/shoelace/dist/components/button/button.js';
 import '@shoelace-style/shoelace/dist/components/card/card.js';
+import '@shoelace-style/shoelace/dist/components/icon/icon.js';
 
 import { sharedStyles } from '../../styles/shared-styles';
 import { shoelaceStyles } from '../../styles/shoelace-styles';
@@ -84,6 +85,44 @@ export class MatchTracker extends LitElement {
     counterStyles,
     manaStyles,
     css`
+      main {
+        height: calc(100vh - 80px);
+        padding: 0;
+        margin: 0;
+        overflow: hidden;
+      }
+
+      .wrapper {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+      }
+
+      sl-tab-group {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      sl-tab-panel[name="tracker"] {
+        height: 100%;
+        overflow: auto;
+      }
+
+      .tracker-grid {
+        height: 100%;
+        display: flex;
+        flex-wrap: wrap;
+      }
+
+      .player-column {
+        width: 50%;
+        display: flex;
+        flex-direction: column;
+      }
+
       sl-input::part(form-control-help-text) {
         color: var(--sl-color-neutral-700);
       }
@@ -97,17 +136,22 @@ export class MatchTracker extends LitElement {
         margin-right: 1rem;
         margin-left: 1rem;
       }
-      @media (min-width: 900px) {
+      @media (min-width: 950px) {
         .form-2-column {
           flex-direction: row;
         }
       }
-      @media (max-width: 900px) {
+      @media (max-width: 950px) {
         .form-player-input {
           margin-right: 0;
           margin-left: 0;
         }
       }
+      sl-button.life-counter::part(base) {
+        height: 4rem;
+        justify-content: center;
+        line-height: 4rem;
+      }
     `
   ]
   @state() playerLogs: LogEntry[] = [];
@@ -424,16 +468,16 @@ export class MatchTracker extends LitElement {
 
     return html`
       <main>
-        <div style="display: flex; flex-direction: column; grid-gap: 1rem;">
+        <div class="wrapper">
           <sl-tab-group active-tab=${this.activeTab}>
             <sl-tab slot="nav" panel="tracker" class="ios-tab">Life</sl-tab>
             <sl-tab slot="nav" panel="results" class="ios-tab">Results</sl-tab>
             <sl-tab slot="nav" panel="standings" class="ios-tab">Standings</sl-tab>
             <sl-tab slot="nav" panel="action-log" class="ios-tab">Match Log</sl-tab>
             <sl-tab slot="nav" panel="setup" class="ios-tab">Setup</sl-tab>
             <sl-tab-panel name="tracker">
-              <div style="display: flex; flex-wrap: wrap;">
-                <div style="width: 50%;">
+              <div class="tracker-grid">
+                <div class="player-column">
                   <sl-card class="player-one" id="topLeft">
                     <form style="position: relative; height: 100%; justify-content: space-between;">
                       <sl-button variant="default" size="large" class="life-counter player-one" @click=${() => this.updateLife(1, 1, 'Gain')}>
@@ -452,7 +496,7 @@ export class MatchTracker extends LitElement {
                         <sl-icon src="/assets/icons/loyalty-down.svg" slot="prefix" class="ms ms-loyalty-down ms-2x"></sl-icon>
                         Lose
                       </sl-button>
-                      <span class="hide-at-800" style="position: absolute; right: 8px; bottom: 8px;">
+                      <span class="hide-at-950" style="position: absolute; right: 8px; bottom: 8px;">
                         <sl-icon src="/assets/icons/saga.svg" slot="prefix" class="ms ms-saga-1 ms-4x"></sl-icon>
                       </span>
                     </form>
@@ -475,13 +519,13 @@ export class MatchTracker extends LitElement {
                         <sl-icon src="/assets/icons/loyalty-down.svg" slot="prefix" class="ms ms-loyalty-down ms-2x"></sl-icon>
                         Lose
                       </sl-button>
-                      <span class="hide-at-800" style="position: absolute; right: 8px; top: 8px;">
+                      <span class="hide-at-950" style="position: absolute; right: 8px; top: 8px;">
                         <sl-icon src="/assets/icons/saga.svg" slot="prefix" class="ms ms-saga-3 ms-4x"></sl-icon>
                       </span>
                     </form>
                   </sl-card>
                 </div>
-                <div style="width: 50%;">
+                <div class="player-column">
                   <sl-card class="player-two" id="bottomLeft">
                     <form style="position: relative; height: 100%; justify-content: space-between;">
                       <sl-button variant="default" size="large" class="life-counter player-two" @click=${() => this.updateLife(2, 1, 'Gain')}>
@@ -500,7 +544,7 @@ export class MatchTracker extends LitElement {
                         <sl-icon src="/assets/icons/loyalty-down.svg" slot="prefix" class="ms ms-loyalty-down ms-2x"></sl-icon>
                         Lose
                       </sl-button>
-                      <span class="hide-at-800" style="position: absolute; left: 8px; bottom: 8px;">
+                      <span class="hide-at-950" style="position: absolute; left: 8px; bottom: 8px;">
                         <sl-icon src="/assets/icons/saga.svg" slot="prefix" class="ms ms-saga-2 ms-4x"></sl-icon>
                       </span>
                     </form>
@@ -523,19 +567,12 @@ export class MatchTracker extends LitElement {
                         <sl-icon src="/assets/icons/loyalty-down.svg" slot="prefix" class="ms ms-loyalty-down ms-2x"></sl-icon>
                         Lose
                       </sl-button>
-                      <span class="hide-at-800" style="position: absolute; left: 8px; top: 8px;">
+                      <span class="hide-at-950" style="position: absolute; left: 8px; top: 8px;">
                         <sl-icon src="/assets/icons/saga.svg" slot="prefix" class="ms ms-saga-4 ms-4x"></sl-icon>
                       </span>
                     </form>
                   </sl-card>
                 </div>
-                <style>
-                sl-button.life-counter::part(base) {
-                  height: 4rem;
-                  justify-content: center;
-                  line-height: 4rem;
-                }
-                </style>
               </div>
             </sl-tab-panel>
             <sl-tab-panel name="standings">