schedule key fixes and style tweaks, fix login autocompletes

apps/nextjs/pages/[event]/schedule.tsx

@@ -383,7 +383,8 @@ export default function EventSchedule({ event }: EventScheduleProps) {
 											if (dayElement != null) {
 												dayElement.scrollIntoView({ behavior: "smooth", block: "start" });
 											}
-										}}>
+										}}
+										key={day}>
 										{format(date, "EEEE")}
 										<br />
 										{format(date, "LLL d")}
@@ -459,7 +460,7 @@ function getAllDays(runs: Run[], eventTimezone: string, showLocalTime: boolean)
 		}
 	}
 
-	const sortedDays = days.sort((a, b) => {
+	days.sort((a, b) => {
 		const dateA = new Date(a);
 		const dateB = new Date(b);
 		return dateA.getTime() - dateB.getTime();
@@ -527,9 +528,10 @@ function generateRunItems(
 		<div className={styles.day}>
 			{runDays.map(({ day, runs }, i) => {
 				let yesterdayRunTime = 0;
+				let yesterdaysFinalRun;
 
 				if (i != 0) {
-					const yesterdaysFinalRun = runDays[i - 1].runs.at(-1);
+					yesterdaysFinalRun = runDays[i - 1].runs.at(-1);
 
 					if (yesterdaysFinalRun) {
 						const endOfYesterdayRun = addSeconds(
@@ -565,20 +567,26 @@ function generateRunItems(
 						<DateDivider date={runDay} />
 						<div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
 							<div className={styles.visualiser}>
-								{yesterdayRunTime > 0 && (
+								{/* {yesterdayRunTime > 0 && yesterdaysFinalRun && (
 									<RunVisualiser
 										run={runDays[i - 1].runs.at(-1)!}
 										proportion={(yesterdayRunTime / totalSeconds) * 100}
+										block={blocks.get(yesterdaysFinalRun.id)}
+										key={`spillover-${yesterdaysFinalRun.id}`}
 									/>
-								)}
+								)} */}
 								{runs.map((run, i) => {
 									let width =
 										(Math.max(runEstimateToSeconds(run.estimate), 300) / totalSeconds) * 100;
 
 									if (i == runs.length - 1) {
 										// If the run goes to the next day, subtract the overlap
+										const runScheduledTime = new Date(
+											new Date(run.scheduledTime).toLocaleString("en", {
+												timeZone: settings.showLocalTime ? eventTimezone : undefined,
+											}),
+										);
 
-										const runScheduledTime = new Date(run.scheduledTime);
 										const finalRunEndTime = addSeconds(
 											runScheduledTime,
 											runEstimateToSeconds(run.estimate),
@@ -589,19 +597,25 @@ function generateRunItems(
 											runScheduledTime.getMonth(),
 											runScheduledTime.getDate(),
 										);
-
 										nextDay.setDate(nextDay.getDate() + 1);
 
 										if (nextDay.getDate() === finalRunEndTime.getDate()) {
-											const overlapTime = nextDay.getTime() - finalRunEndTime.getTime();
+											const overlapTime = finalRunEndTime.getTime() - nextDay.getTime();
 											const overlapSeconds = overlapTime / 1000;
 											width =
 												((runEstimateToSeconds(run.estimate) - overlapSeconds) / totalSeconds) *
 												100;
 										}
 									}
 
-									return <RunVisualiser run={run} proportion={width} block={blocks.get(run.id)} />;
+									return (
+										<RunVisualiser
+											run={run}
+											proportion={width}
+											block={blocks.get(run.id)}
+											key={`vis-${run.id}`}
+										/>
+									);
 								})}
 							</div>
 							<div className={styles.runs}>
@@ -647,45 +661,31 @@ interface RunItemProps {
 }
 
 // Runner parsing
-function runnerParsing(runnersArray: Run["runners"]) {
-	if (runnersArray.length == 0) {
-		return <>???</>;
+function runnerParsing(runnersArray: Run["runners"], key?: string) {
+	if (runnersArray.length === 0) {
+		return <span key={key}>???</span>;
 	}
 
-	return (
-		<div key={runnersArray[0].username}>
-			{runnersArray.map((runner, i) => {
-				const { username } = runner;
-				// If only one name or second last in the list to not include a comma
-				if (runnersArray.length === 1 || i === runnersArray.length - 2) {
-					return (
-						<a key={username} href={`/user/${username}`} target="_blank" rel="noreferrer">
-							{username}
-						</a>
-					);
-				}
+	const runners = runnersArray.map((runner, i) => {
+		const { username } = runner;
+		return (
+			<a key={`${username}-${key}-${i}`} href={`/user/${username}`} target="_blank" rel="noreferrer">
+				{username}
+			</a>
+		);
+	});
 
-				// End of names
-				if (i === runnersArray.length - 1) {
-					return (
-						<>
-							<span key={`${username}-end`}> and </span>
-							<a key={username} href={`/user/${username}`} target="_blank" rel="noreferrer">
-								{username}
-							</a>
-						</>
-					);
-				}
+	const lastRunner = runners.pop();
 
-				return (
+	return (
+		<div key={key}>
+			{runners.length > 0 &&
+				runners.reduce((prev, curr) => (
 					<>
-						<a key={username} href={`/user/${username}`} target="_blank" rel="noreferrer">
-							{username}
-						</a>
-						<span key={`${username}-mid`}>, </span>
+						{prev}, {curr}
 					</>
-				);
-			})}
+				))}{" "}
+			{runners.length > 0 && "and"} {lastRunner}
 		</div>
 	);
 }
@@ -779,7 +779,7 @@ const RunItem: React.FC<RunItemProps> = (props: RunItemProps) => {
 			<div className={styles.metaData} style={{ color: props.block?.textColour }}>
 				<span className={styles.runners}>
 					<img src={RunnerIcon.src} style={{ filter: overwriteFilter }} />
-					{run.runners.length > 0 ? runnerParsing(run.runners) : run.racer}
+					{run.runners.length > 0 ? runnerParsing(run.runners, run.id) : run.racer}
 				</span>
 				<span className={styles.estimate}>
 					<img src={EstimateIcon.src} style={{ filter: overwriteFilter }} />
@@ -798,7 +798,10 @@ const RunItem: React.FC<RunItemProps> = (props: RunItemProps) => {
 						<PaidIcon /> Incentives
 					</span>
 					{run.donationIncentiveObject?.map((incentive) => (
-						<span className={styles.donationIncentive} style={{ color: props.block?.textColour }}>
+						<span
+							className={styles.donationIncentive}
+							style={{ color: props.block?.textColour }}
+							key={incentive.id}>
 							{incentive.title}
 						</span>
 					))}
@@ -820,7 +823,7 @@ const RunVisualiser = ({ run, proportion, block }: { run: Run; proportion: numbe
 					<h2>{run.category}</h2>
 					<h3>
 						<img src={RunnerIcon.src} />
-						{run.runners.length > 0 ? runnerParsing(run.runners) : run.racer}
+						{run.runners.length > 0 ? runnerParsing(run.runners, `vis-run-${run.id}`) : run.racer}
 					</h3>
 				</div>
 			}

apps/nextjs/pages/signin.tsx

@@ -76,6 +76,7 @@ export const SignInPage: React.FC = () => {
 					<TextField
 						label="Email"
 						variant="outlined"
+						autoComplete="email"
 						value={email}
 						onChange={(event) => {
 							setEmail(event.target.value);
@@ -85,7 +86,8 @@ export const SignInPage: React.FC = () => {
 
 					<TextField
 						label="Password"
-						type={'password'}
+						type="password"
+						autoComplete="current-password"
 						variant="outlined"
 						value={password}
 						onChange={(event) => {

apps/nextjs/pages/signup.tsx

@@ -91,7 +91,7 @@ export default function SignUpPage() {
 						label="Password"
 						type="password"
 						helperText="Minimum 8 characters"
-						autoComplete="password"
+						autoComplete="new-password"
 					/>
 					<TextField
 						value={username}

apps/nextjs/styles/Schedule.event.module.scss

@@ -169,7 +169,7 @@ $normalWidth: 800px;
 		padding: 1rem;
 		margin-top: 1rem;
 		text-align: center;
-		
+
 		position: sticky;
 		top: 0;
 		background: rgba(255, 255, 255, 0.808);
@@ -186,9 +186,9 @@ $normalWidth: 800px;
 		border-bottom: 2px solid $secondary;
 	}
 
-	.runs {
-		padding: 0 1rem;
-	}
+	// .runs {
+	// 	padding: 0 1rem;
+	// }
 
 	.run {
 		padding: 16px;
@@ -206,7 +206,6 @@ $normalWidth: 800px;
 			padding: 8px;
 		}
 
-
 		&[run-odd="true"] {
 			background: $primary-50;
 			--icon-filter: invert(48%) sepia(57%) saturate(650%) hue-rotate(349deg) brightness(97%) contrast(89%);
@@ -232,6 +231,8 @@ $normalWidth: 800px;
 			font-size: 170%;
 			margin-bottom: -0.25rem;
 			max-width: 65%;
+			padding-top: 0;
+			line-height: 100%;
 
 			@include breakpoint($sm-zero-only) {
 				max-width: 100%;
@@ -242,6 +243,7 @@ $normalWidth: 800px;
 			font-weight: bold;
 			font-size: 120%;
 			margin-bottom: 0.5rem;
+			margin-top: 0.1rem;
 			color: var(--colour-accent);
 		}
 
@@ -294,24 +296,34 @@ $normalWidth: 800px;
 			}
 		}
 
-		.time {
+		.time,
+		.blockName {
+			position: absolute;
+			top: 0;
 			padding: 8px;
-			font-weight: bold;
+
 			font-size: 120%;
+			font-weight: bold;
+			line-height: 40px;
+
+			@include breakpoint($sm-zero-only) {
+				position: relative;
+				width: 100%;
+			}
+		}
+
+		.time {
+			font-weight: bold;
 			white-space: nowrap;
 			text-transform: uppercase;
 			min-width: 115px;
 
-			position: absolute;
-			top: 0;
 			background: var(--colour-accent);
 			left: 0;
 			border-radius: 16px 0;
 			color: $light-text;
 
 			@include breakpoint($sm-zero-only) {
-				position: relative;
-				width: 100%;
 				border-radius: 8px 8px 0px 0px;
 			}
 		}
@@ -322,6 +334,7 @@ $normalWidth: 800px;
 			color: $light-text;
 			margin-right: 12px;
 			padding: 0 6px;
+			border-radius: 8px;
 		}
 
 		.donationIncentives {
@@ -346,20 +359,13 @@ $normalWidth: 800px;
 		}
 
 		.blockName {
-			position: absolute;
-			top: 0;
 			right: 0;
-			padding: 8px;
-			font-weight: bold;
-			font-size: 120%;
 			border: 3px solid white;
 			border-top: 0;
 			border-right: 0;
 			border-bottom-left-radius: 16px;
 
 			@include breakpoint($sm-zero-only) {
-				position: relative;
-				width: 100%;
 				border-radius: 0;
 				border-left: 3px solid white;
 				border-right: 3px solid white;