From 2a633c939420d2410323aa099e7798e72f12652d Mon Sep 17 00:00:00 2001
From: cqb13 <cqb13.main@gmail.com>
Date: Wed, 13 Sep 2023 21:26:27 -0400
Subject: [PATCH] Mobile style for scoring

---
 components/general/button.tsx         | 2 +-
 components/scoring/scoreSetupMenu.tsx | 2 +-
 components/scoring/scoringChart.tsx   | 8 +++-----
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/components/general/button.tsx b/components/general/button.tsx
index 9170f9e..3f9a3aa 100644
--- a/components/general/button.tsx
+++ b/components/general/button.tsx
@@ -10,7 +10,7 @@ export default function Button({ title, onClick, selected }: Props) {
   return (
     <button
       type='button'
-      className={`inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-lightest text-sm font-medium text-gray-700 hover:shadow-card active:shadow-bar ${
+      className={`inline-flex items-center justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-lightest text-sm font-medium text-gray-700 hover:shadow-card active:shadow-bar ${
         selected ? "border-highlight" : ""
       }`}
       onClick={onClick}
diff --git a/components/scoring/scoreSetupMenu.tsx b/components/scoring/scoreSetupMenu.tsx
index dfafae9..236c188 100644
--- a/components/scoring/scoreSetupMenu.tsx
+++ b/components/scoring/scoreSetupMenu.tsx
@@ -32,7 +32,7 @@ export default function ScoreSetupMenu(props: ScoreSetupMenuProps) {
         items={["Indoor", "Outdoor"]}
         setSelected={updateLocation}
       />
-      <div className='flex gap-2 items-center'>
+      <div className='flex gap-2 items-center max-smSm:flex-col'>
         <Slider
           title='Distance'
           jump={1}
diff --git a/components/scoring/scoringChart.tsx b/components/scoring/scoringChart.tsx
index 218fad9..e31ec1d 100644
--- a/components/scoring/scoringChart.tsx
+++ b/components/scoring/scoringChart.tsx
@@ -147,7 +147,7 @@ export default function ScoringChart(props: Props) {
       ) : null}
       <table className='shadow-card block rounded-md p-10 border border-gray-300'>
         <thead className=''>
-          {window.innerWidth > 768 ? <th>End</th> : null}
+          <th>End</th>
           {Array.from(Array(props.arrowsPerEnd), (x, i) => i + 1).map(
             (_, columnIndex) => (
               <th key={columnIndex}>Arrow {columnIndex + 1}</th>
@@ -160,17 +160,15 @@ export default function ScoringChart(props: Props) {
         </thead>
         <tbody>
           {data[currentSplit]?.map((row: number[], rowIndex: number) => (
-            <tr key={rowIndex}>
-              {window.innerWidth < 768 && props.arrowsPerEnd > 3 ? null : (
+            <tr key={rowIndex} className="w-full">
                 <td>{rowIndex + 1}</td>
-              )}
               {row.map((column: number, columnIndex: number) => (
                 <td key={columnIndex}>
                   <input
                     type='text'
                     id={`${columnIndex + 1}-${rowIndex + 1}`}
                     pattern='[0-9mxMX]*'
-                    className='bg-lightest border border-gray-300 rounded-sm outline-none focus:border-highlight px-2'
+                    className='bg-lightest border border-gray-300 rounded-sm outline-none focus:border-highlight px-2 w-11/12'
                     value={column}
                     onChange={(event) =>
                       handleChange(event, rowIndex, columnIndex)