feat: optimize table for mobile

Author: coderbyheart

src/Schedule.tsx

@@ -39,6 +39,8 @@ const Countdown = ({
 	)
 }
 
+const formatTimezone = (tz: string) => tz.split('/')[1].replace('_', ' ')
+
 export const Schedule = ({
 	conferenceDate,
 	eventTimezoneName,
@@ -52,19 +54,20 @@ export const Schedule = ({
 	const eventTime = toEventTime({ conferenceDate, userTimeZone })
 	const userTime = toUserTime({ conferenceDate, eventTimezoneName })
 	const userFormat = formatUserTime({ userTimeZone })
+
 	return (
 		<Table>
 			<thead>
 				<tr>
 					<th>
 						Conf Time
 						<br />
-						<small>{eventTimezoneName}</small>
+						<small>{formatTimezone(eventTimezoneName)}</small>
 					</th>
 					<th>
 						Your Time
 						<br />
-						<small>{userTimeZone}</small>
+						<small>{formatTimezone(userTimeZone)}</small>
 					</th>
 					<th>Starts in</th>
 					<th>Session</th>

src/style/Table.tsx

@@ -33,14 +33,6 @@ export const Table = styled.table`
 			font-size: 14px;
 		}
 	}
-	thead {
-		tr:first-child {
-			th {
-				font-size: 16px;
-				padding: 1rem;
-			}
-		}
-	}
 	td.time {
 		text-align: right;
 		width: 10%;