tweaked styling

src/components/schedule/index.tsx

@@ -9,22 +9,23 @@ import Appointment from "./appointment";
 import { CSSProperties } from "react";
 
 type ScheduleProps = {
+	type: "guest" | "vendor";
 	events: RunsheetEvent[];
 	startDate: Date;
 	endDate: Date;
 	guests: Record<string, { id: string; name: string }>;
 };
 
 const Schedule = (props: ScheduleProps) => {
-	const { events, startDate, endDate, guests } = props;
+	const { events, startDate, endDate, guests, type } = props;
 	const guestIndex: { id: string; name: string }[] = Object.values(guests).map((guest, i) => ({
 		...guest,
 		index: i,
 	}));
 	const days = differenceInCalendarDays(endDate, startDate) !== 1 ? differenceInCalendarDays(endDate, startDate) + 1 : differenceInCalendarDays(endDate, startDate);
 
 	return (
-		<div className={styles.schedule} style={{ "--days": days } as CSSProperties}>
+		<div className={styles.schedule} style={{ "--days": days } as CSSProperties} data-type={type}>
 			<Scheduler
 				data={
 					events.map((event) => ({

src/components/schedule/style.module.css

@@ -1,17 +1,24 @@
 .schedule {
 	text-transform: none;
-	max-width: 100%;
 	overflow-x: auto;
+	margin: 0 auto;
+
+	&:not([data-type="vendor"]) {
+		max-width: min(100%, calc(250px * var(--days) + 100px));
+	}
+	&[data-type="vendor"] {
+		max-width: min(100%, 1200px);
+	}
 
 	& > * {
 		min-width: calc((150px * var(--days)) + 100px);
 	}
 }
 
-.appointment.appointment {
+.appointment.appointment.appointment {
 	position: relative;
 	text-overflow: ellipsis;
-	background: $green;
+	background-color: $green;
 	color: $white;
 	font-family: $font_main;
 
@@ -26,6 +33,11 @@
 	& .guest {
 		font-style: italic;
 	}
+
+	&:hover {
+		background-color: $green_light;
+		color: $neutral;
+	}
 }
 
 .dialog {

src/styles/global/index.css

@@ -8,8 +8,6 @@
 
 @import './clerk';
 
-@import './schedule';
-
 *, *::before, *::after {
 	box-sizing: border-box;
 	outline-offset: 0.2em;

utils/formatSchedule.ts

@@ -62,7 +62,8 @@ const formatSchedule = (props: formatRunsheetProps) =>
 		events: formattedEvents,
 		startDate,
 		endDate,
-		guests
+		guests,
+		type
 	}
 }