Make event names the same size

Author: NixFey

src/components/MultiDisplay/EventRow/PlayoffRow/index.tsx

@@ -8,7 +8,7 @@ import {
   // update,
 } from 'firebase/database';
 // @ts-ignore
-import { Textfit } from '@gmurph91/react-textfit';
+// import { Textfit } from '@gmurph91/react-textfit';
 import { useEffect, useState } from 'preact/hooks';
 import DoubleEliminationBracketMapping, {
   BracketMatchNumber,
@@ -209,12 +209,12 @@ const PlayoffRow = ({
             {/* Use event short name */}
             {useShortName && (
               <div
-                className={`${styles.textCenter} ${styles.bold}`}
-                style={{ width: '15vw' }}
+                className={`${styles.textLeft} ${styles.bold} ${styles.eventName}`}
+                // style={{ width: '15vw', fontSize: '8.5vw' }}
               >
-                <Textfit mode="single" forceSingleModeWidth max="300">
+                {/* <Textfit mode="single" forceSingleModeWidth max="300"> */}
                   {event.nameShort || event.name}
-                </Textfit>
+                {/* </Textfit> */}
               </div>
             )}
           </td>

src/components/MultiDisplay/EventRow/QualRow/index.tsx

@@ -9,7 +9,7 @@ import {
   // update,
 } from 'firebase/database';
 // @ts-ignore
-import { Textfit } from '@gmurph91/react-textfit';
+// import { Textfit } from '@gmurph91/react-textfit';
 import styles from '../sharedStyles.module.scss';
 import { Break, MatchOrBreak, QualMatchData } from '@/models/MatchData';
 import AllianceFader from '../AllianceFader';
@@ -218,12 +218,12 @@ const QualRow = ({
             {/* Use event short name */}
             {useShortName && (
               <div
-                className={`${styles.textCenter} ${styles.bold}`}
-                style={{ width: '15vw' }}
+                className={`${styles.textLeft} ${styles.bold} ${styles.eventName}`}
+                // style={{ width: '15vw', fontSize: '8.5vw' }}
               >
-                <Textfit mode="single" forceSingleModeWidth max="300">
+                {/* <Textfit mode="single" forceSingleModeWidth max="300"> */}
                   {event.nameShort || event.name}
-                </Textfit>
+                {/* </Textfit> */}
               </div>
             )}
           </td>

src/components/MultiDisplay/EventRow/sharedStyles.module.scss

@@ -9,6 +9,10 @@ $cell-vertical-negative: -3vh;
     text-align: center;
 }
 
+.textLeft {
+  text-align: left !important;
+}
+
 .matchNumber {
     text-align: center;
     font-size: $matchnumber-size;
@@ -18,6 +22,12 @@ $cell-vertical-negative: -3vh;
     line-height: 0.8;
 }
 
+.eventName {
+  text-align: left;
+  font-size: calc($matchnumber-size * 0.8);
+  font-weight: bold;
+}
+
 .noTeamNumbers .matchNumber {
   top: 0;
   font-size: calc($matchnumber-size * 0.9);

src/components/MultiDisplay/index.tsx

@@ -42,10 +42,10 @@ const MultiQueueing = () => {
       <table>
         <thead>
           <tr style={{ textAlign: 'center', fontSize: '7vh' }}>
-            <th style={{ width: '18vw', borderRight: '6px solid white' }}>{clock}</th>
-            <th style={{ width: '27.33vw' }}>On Field</th>
-            <th style={{ width: '27.33vw' }}>Up Next</th>
-            <th style={{ width: '27.33vw' }}>Queueing</th>
+            <th style={{ width: '22vw', borderRight: '6px solid white' }}>{clock}</th>
+            <th style={{ width: '26vw' }}>On Field</th>
+            <th style={{ width: '26vw' }}>Up Next</th>
+            <th style={{ width: '26vw' }}>Queueing</th>
           </tr>
         </thead>
         <tbody>