Update dependencies

TODO.txt

@@ -0,0 +1,3 @@
+Change page layout to tanstack router
+Make raid layout page
+Move providers to context and components to providers

package.json

@@ -10,38 +10,38 @@
 		"preview": "vite preview"
 	},
 	"dependencies": {
-		"@fullcalendar/core": "^6.1.17",
+		"@fullcalendar/core": "^6.1.19",
-		"@fullcalendar/daygrid": "^6.1.17",
+		"@fullcalendar/daygrid": "^6.1.19",
-		"@fullcalendar/interaction": "^6.1.17",
+		"@fullcalendar/interaction": "^6.1.19",
-		"@fullcalendar/react": "^6.1.17",
+		"@fullcalendar/react": "^6.1.19",
-		"@tailwindcss/vite": "^4.1.7",
+		"@tailwindcss/vite": "^4.1.18",
-		"@tanstack/react-query": "^5.77.0",
+		"@tanstack/react-query": "^5.90.12",
-		"@types/node": "^22.15.21",
+		"@types/node": "^25.0.3",
-		"axios": "^1.9.0",
+		"axios": "^1.13.2",
 		"clsx": "^2.1.1",
 		"eslint-plugin-react": "^7.37.5",
 		"moment": "^2.30.1",
-		"react": "^19.1.0",
+		"react": "^19.2.3",
-		"react-dom": "^19.1.0",
+		"react-dom": "^19.2.3",
 		"react-icons": "^5.5.0",
 		"react-joyride": "^3.0.0-7",
-		"react-router": "^7.6.1",
+		"react-router": "^7.11.0",
-		"react-tooltip": "^5.28.1",
+		"react-tooltip": "^5.30.0",
-		"tailwindcss": "^4.1.7",
+		"tailwindcss": "^4.1.18",
-		"use-debounce": "^10.0.4",
+		"use-debounce": "^10.0.6",
-		"zod": "^3.25.28"
+		"zod": "^4.2.1"
 	},
 	"devDependencies": {
-		"@eslint/js": "^9.27.0",
+		"@eslint/js": "^9.39.2",
-		"@types/react": "^19.1.5",
+		"@types/react": "^19.2.7",
-		"@types/react-dom": "^19.1.5",
+		"@types/react-dom": "^19.2.3",
-		"@vitejs/plugin-react": "^4.5.0",
+		"@vitejs/plugin-react": "^5.1.2",
-		"eslint": "^9.27.0",
+		"eslint": "^9.39.2",
-		"eslint-plugin-react-hooks": "^5.2.0",
+		"eslint-plugin-react-hooks": "^7.0.1",
-		"eslint-plugin-react-refresh": "^0.4.20",
+		"eslint-plugin-react-refresh": "^0.4.26",
-		"globals": "^16.2.0",
+		"globals": "^16.5.0",
-		"typescript": "^5.8.3",
+		"typescript": "^5.9.3",
-		"typescript-eslint": "^8.32.1",
+		"typescript-eslint": "^8.50.0",
-		"vite": "^6.3.5"
+		"vite": "^7.3.0"
 	}
 }

src/components/game/GameSelector.tsx

@@ -72,7 +72,7 @@ export default function GameSelector({
 									{
 										"rounded-t-lg border-t-2 border-b": index === 0,
 										"rounded-b-lg border-b-2 border-t": index === games.length - 1,
-										"border-y-1": index > 0 && index < games.length - 1,
+										"border-y": index > 0 && index < games.length - 1,
 									}
 								)}
 								onClick={() => setGame(searchGame)}

src/components/input/FileInput.tsx

@@ -10,7 +10,7 @@ export default function FileInput({
 }){
 	return (
 		<div
-			className="relative border-2 rounded-lg border-gray-500 h-24 mx-4 w-[28rem] z-0"
+			className="relative border-2 rounded-lg border-gray-500 h-24 mx-4 w-md z-0"
 		>
 			<div
 				className="absolute cursor-text left-0 -top-3 bg-white dark:bg-neutral-800 text-gray-500 mx-1 px-1"

src/components/input/NumberInput.tsx

@@ -31,6 +31,8 @@ export default function NumberInput({
 
 
 	useEffect(() => {
+		//TODO: Fix this warning. Use component library
+		// eslint-disable-next-line react-hooks/set-state-in-effect
 		setMinValue(min ?? Number.MIN_VALUE);
 		setMaxValue(max ?? Number.MAX_VALUE);
 		setInputValue(value ?? defaultValue ?? 0);

src/pages/protected/GamePage.tsx

@@ -36,6 +36,8 @@ export default function GamePage(){
 
 	useEffect(() => {
 		if(gameQuery.status === "success"){
+			//TODO: Fix this warning
+			// eslint-disable-next-line react-hooks/set-state-in-effect
 			setGame(gameQuery.data);
 		}
 	}, [ gameQuery ]);

src/pages/protected/PersonPage.tsx

@@ -19,11 +19,15 @@ export default function PersonPage(){
 	const personQuery = useGetPerson(raidGroupId ?? "", personId ?? "", false);
 	useEffect(() => {
 		if(raidGroupQuery.status === "success"){
+			//TODO: Fix this warning
+			// eslint-disable-next-line react-hooks/set-state-in-effect
 			setRaidGroup(raidGroupQuery.data);
 		}
 	}, [ raidGroupQuery ]);
 	useEffect(() => {
 		if(personQuery.status === "success"){
+			//TODO: Fix this warning
+			// eslint-disable-next-line react-hooks/set-state-in-effect
 			setPerson(personQuery.data);
 		}
 	}, [ personQuery ]);

src/pages/protected/RaidGroupPage.tsx

@@ -30,6 +30,8 @@ export default function RaidGroupPage(){
 
 	useEffect(() => {
 		if(raidGroupQuery.status === "success"){
+			//TODO: Fix this warning
+			// eslint-disable-next-line react-hooks/set-state-in-effect
 			setRaidGroup(raidGroupQuery.data);
 		}
 	}, [ raidGroupQuery ]);

src/providers/components/AuthProviderComponent.tsx

@@ -84,12 +84,16 @@ export function AuthProvider({
 
 	//Try to get the token on page load
 	useEffect(() => {
+		//TODO: Fix warning
+		// eslint-disable-next-line react-hooks/set-state-in-effect
 		void fetchToken();
 	}, [ fetchToken ]);
 
 	//Update the tutorial status when fetched
 	useEffect(() => {
 		if(tutorialsStatusQuery.status === "success"){
+			//TODO: Fix this warning
+			// eslint-disable-next-line react-hooks/set-state-in-effect
 			setTutorialsStatus(tutorialsStatusQuery.data);
 		}
 	}, [ tutorialsStatusQuery.status, tutorialsStatusQuery.data ]);

src/providers/components/RaidInstanceLayoutProviderComponent.tsx

@@ -50,6 +50,8 @@ export default function RaidInstanceLayoutProvider({
 	useEffect(() => {
 		//console.log("hit 1");
 		if(raidGroupQuery.status === "success"){
+			//TODO: Fix this warning
+			// eslint-disable-next-line react-hooks/set-state-in-effect
 			setRaidGroup(raidGroupQuery.data);
 		}
 	}, [ raidGroupQuery.status, raidGroupQuery.data ]);
@@ -57,6 +59,8 @@ export default function RaidInstanceLayoutProvider({
 	useEffect(() => {
 		//console.log("hit 2");
 		if(classGroupsQuery.status === "success"){
+			//TODO: Fix this warning
+			// eslint-disable-next-line react-hooks/set-state-in-effect
 			setClassGroups(classGroupsQuery.data);
 		}
 	}, [ classGroupsQuery.status, classGroupsQuery.data ]);
@@ -64,6 +68,8 @@ export default function RaidInstanceLayoutProvider({
 	useEffect(() => {
 		//console.log("hit 3");
 		if(raidLayoutsQuery.status === "success"){
+			//TODO: Fix this warning
+			// eslint-disable-next-line react-hooks/set-state-in-effect
 			setRaidLayouts(raidLayoutsQuery.data);
 		}
 	}, [ raidLayoutsQuery.status, raidLayoutsQuery.data ]);
@@ -71,6 +77,8 @@ export default function RaidInstanceLayoutProvider({
 	useEffect(() => {
 		//console.log("hit 4");
 		if(peopleQuery.status === "success"){
+			//TODO: Fix this warning
+			// eslint-disable-next-line react-hooks/set-state-in-effect
 			setPeople(peopleQuery.data);
 			setRoster(peopleQuery.data);
 		}
@@ -79,6 +87,8 @@ export default function RaidInstanceLayoutProvider({
 	useEffect(() => {
 		//console.log("hit 5");
 		if(raidInstanceId && raidInstanceQuery.status === "success"){
+			//TODO: Fix this warning
+			// eslint-disable-next-line react-hooks/set-state-in-effect
 			setRaidInstance(raidInstanceQuery.data);
 			if(!raidInstanceQuery.data.raidLayoutId){
 				const newClassGroups: (ClassGroup | null)[] = [];
@@ -97,6 +107,8 @@ export default function RaidInstanceLayoutProvider({
 	useEffect(() => {
 		//console.log("hit 6");
 		if(selectedClassGroupsQuery.status === "success"){
+			//TODO: Fix this warning
+			// eslint-disable-next-line react-hooks/set-state-in-effect
 			setSelectedClassGroups(selectedClassGroupsQuery.data);
 		}
 	}, [ selectedClassGroupsQuery.status, selectedClassGroupsQuery.data ]);
@@ -104,6 +116,8 @@ export default function RaidInstanceLayoutProvider({
 	useEffect(() => {
 		//console.log("hit 7");
 		if(personCharactersQuery.status === "success"){
+			//TODO: Fix this warning
+			// eslint-disable-next-line react-hooks/set-state-in-effect
 			setPersonCharacters(personCharactersQuery.data);
 		}
 	}, [ personCharactersQuery.status, personCharactersQuery.data ]);
@@ -111,6 +125,8 @@ export default function RaidInstanceLayoutProvider({
 	useEffect(() => {
 		//console.log("hit 8");
 		if(personCharacterXrefsQuery.status === "success"){
+			//TODO: Fix this warning
+			// eslint-disable-next-line react-hooks/set-state-in-effect
 			setPersonCharacterXrefs(personCharacterXrefsQuery.data);
 		}
 	}, [ personCharacterXrefsQuery.status, personCharacterXrefsQuery.data, people ]);
@@ -118,6 +134,8 @@ export default function RaidInstanceLayoutProvider({
 	useEffect(() => {
 		//console.log("hit 9");
 		if(raidLayoutQuery.status === "success"){
+			//TODO: Fix this warning
+			// eslint-disable-next-line react-hooks/set-state-in-effect
 			setRaidLayout(raidLayoutQuery.data);
 		}
 	}, [ raidLayoutQuery.status, raidLayoutQuery.data ]);

src/providers/components/TimedModalProviderComponent.tsx

@@ -14,6 +14,8 @@ export function TimedModalProvider({
 	const [ display, setDisplay ] = useState(false);
 	const [ messages, setMessages ] = useState<React.ReactNode[]>([]);
 	const messagesRef = useRef<React.ReactNode[]>(messages);
+	//TODO: Fix this error
+	// eslint-disable-next-line react-hooks/refs
 	messagesRef.current = messages;
 
 

src/ui/account/AdminAccountsTab.tsx

@@ -33,6 +33,8 @@ export default function AdminAccountsTab(){
 
 	useEffect(() => {
 		if(accountsCountQuery.status === "success"){
+			//TODO: Fix this warning
+			// eslint-disable-next-line react-hooks/set-state-in-effect
 			setTotalPages(Math.ceil(accountsCountQuery.data / pageSize));
 		}
 	}, [ accountsCountQuery ]);

src/ui/account/PasswordResetDisplay.tsx

@@ -39,6 +39,8 @@ export default function PasswordResetDisplay(){
 		if(updatePasswordStatus === "success"){
 			addSuccessMessage("Password updated successfully");
 			updatePasswordReset();
+			//TODO: Fix this warning
+			// eslint-disable-next-line react-hooks/set-state-in-effect
 			setCurrentPassword("");
 			setNewPassword("");
 			setConfirmPassword("");

src/ui/account/RaidGroupAccountsTab.tsx

@@ -35,6 +35,8 @@ export default function RaidGroupAccountsTab({
 
 	useEffect(() => {
 		if(accountsCountQuery.data){
+			//TODO: Fix this warning
+			// eslint-disable-next-line react-hooks/set-state-in-effect
 			setTotalPages(Math.ceil(accountsCountQuery.data / pageSize));
 		}
 	}, [ accountsCountQuery.data ]);

src/ui/account/modals/AccountModal.tsx

@@ -27,6 +27,8 @@ export default function AccountModal({
 
 
 	useEffect(() => {
+		//TODO: Fix this warning
+		// eslint-disable-next-line react-hooks/set-state-in-effect
 		setUsername(account?.username ?? "");
 		setEmail(account?.email ?? "");
 		setPassword(account?.password ?? "");

src/ui/account/modals/AccountRaidGroupPermissionsModal.tsx

@@ -29,6 +29,8 @@ export default function AccountRaidGroupPermissionsModal({
 
 	useEffect(() => {
 		if(raidGroupPermissionsQuery.status === "success"){
+			//TODO: Fix this warning
+			// eslint-disable-next-line react-hooks/set-state-in-effect
 			setCurrentPermission(raidGroupPermissionsQuery.data);
 		}
 		else if(raidGroupPermissionsQuery.status === "error"){

src/ui/calendar/modals/CalendarEventModal.tsx

@@ -120,6 +120,8 @@ export default function CalendarEventModal({
 
 	useEffect(() => {
 		if(calendarEvent){
+			//TODO: Fix this warning
+			// eslint-disable-next-line react-hooks/set-state-in-effect
 			setEventName(calendarEvent?.eventName ?? "");
 			setEventDescription(calendarEvent?.eventDescription ?? "");
 			setEventStartDate(calendarEvent.eventStartDate);

src/ui/classGroup/ClassGroupListSkeleton.tsx

@@ -63,7 +63,7 @@ function ClassGroupSkeleton(): React.ReactNode[]{
 		/>,
 		<div
 			key="classes"
-			className={`h-6 w-[64rem] ${elementBg}`}
+			className={`h-6 w-5xl ${elementBg}`}
 		/>,
 		<div
 			key="actions"

src/ui/classGroup/ClassGroupsTab.tsx

@@ -41,6 +41,8 @@ export default function ClassGroupsTab({
 
 	useEffect(() => {
 		if(classGroupsCountQuery.status === "success"){
+			//TODO: Fix this warning
+			// eslint-disable-next-line react-hooks/set-state-in-effect
 			setTotalPages(Math.ceil(classGroupsCountQuery.data / pageSize));
 		}
 	}, [ classGroupsCountQuery ]);

src/ui/classGroup/modal/ClassGroupModal.tsx

@@ -30,6 +30,8 @@ export default function ClassGroupModal({
 
 
 	useEffect(() => {
+		//TODO: Fix this warning
+		// eslint-disable-next-line react-hooks/set-state-in-effect
 		setClassGroupName(classGroup?.classGroupName ?? "");
 		setSelectedGameClassIds(selectedGameClasses.map(gc => gc.gameClassId ?? ""));
 	}, [ display, classGroup, selectedGameClasses ]);

src/ui/classGroup/modal/SelectClassGroupModal.tsx

@@ -45,7 +45,7 @@ export default function SelectClassGroupModal({
 				modalHeader="Select Class Group"
 				modalBody={
 					<div
-						className="grid grid-cols-3 gap-4 w-[36rem]"
+						className="grid grid-cols-3 gap-4 w-xl"
 						style={{flex: "0 0 33.333333333%"}}
 					>
 						{

src/ui/game/AllGamesDisplay.tsx

@@ -35,6 +35,8 @@ export default function AllGamesDisplay(){
 
 	useEffect(() => {
 		if(gamesCountQuery.status === "success"){
+			//TODO: Fix this warning
+			// eslint-disable-next-line react-hooks/set-state-in-effect
 			setTotalPages(Math.ceil(gamesCountQuery.data / pageSize));
 		}
 	}, [ gamesCountQuery ]);

src/ui/game/GamesListSkeleton.tsx

@@ -31,7 +31,7 @@ export default function GamesListSkeleton(){
 		GameSkeleton(),
 		GameSkeleton(),
 		GameSkeleton(),
-		GameSkeleton(),
+		GameSkeleton()
 	];
 
 

src/ui/game/modals/GameModal.tsx

@@ -25,6 +25,8 @@ export default function GameModal({
 
 
 	useEffect(() => {
+		//TODO: Fix this warning
+		// eslint-disable-next-line react-hooks/set-state-in-effect
 		setGameName(game?.gameName ?? "");
 		setGameIcon(game?.gameIcon ?? "");
 	}, [ display, game, setGameName, setGameIcon ]);

src/ui/gameClass/GameClassDisplay.tsx

@@ -31,6 +31,8 @@ export default function GameClassDisplay({
 
 	useEffect(() => {
 		if(gameClassCountQuery.status === "success"){
+			//TODO: Fix this warning
+			// eslint-disable-next-line react-hooks/set-state-in-effect
 			setTotalPages(Math.ceil(gameClassCountQuery.data / pageSize));
 		}
 	}, [ gameClassCountQuery ]);

src/ui/gameClass/modals/GameClassModal.tsx

@@ -27,6 +27,8 @@ export default function GameClassModal({
 
 
 	useEffect(() => {
+		//TODO: Fix this warning
+		// eslint-disable-next-line react-hooks/set-state-in-effect
 		setGameClassName(gameClass?.gameClassName ?? "");
 		setGameClassIcon(gameClass?.gameClassIcon);
 		setIconFile(null);

src/ui/person/PersonDisplay.tsx

@@ -45,6 +45,8 @@ export default function PersonDisplay({
 
 	useEffect(() => {
 		if(characterCountQuery.status === "success"){
+			//TODO: Fix this warning
+			// eslint-disable-next-line react-hooks/set-state-in-effect
 			setTotalPages(Math.ceil(characterCountQuery.data / pageSize));
 		}
 	}, [ characterCountQuery ]);

src/ui/person/PersonListSkeleton.tsx

@@ -69,7 +69,7 @@ export function PersonSkeleton(): React.ReactNode[]{
 		/>,
 		<div
 			key="characters"
-			className={`h-6 w-[48rem] ${elementBg}`}
+			className={`h-6 w-3xl ${elementBg}`}
 		/>,
 		<div
 			key="actions"

src/ui/person/PersonTab.tsx

@@ -41,6 +41,8 @@ export default function PersonTab({
 
 	useEffect(() => {
 		if(personCountQuery.status === "success"){
+			//TODO: Fix this warning
+			// eslint-disable-next-line react-hooks/set-state-in-effect
 			setTotalPages(Math.ceil(personCountQuery.data / pageSize));
 		}
 	}, [ personCountQuery ]);

src/ui/person/modals/PersonModal.tsx

@@ -25,6 +25,8 @@ export default function PersonModal({
 
 
 	useEffect(() => {
+		//TODO: Fix this warning
+		// eslint-disable-next-line react-hooks/set-state-in-effect
 		setPersonName(person?.personName ?? "");
 		setDiscordId(person?.discordId ?? "");
 	}, [ display, person, raidGroupId, setPersonName, setDiscordId ]);

src/ui/personCharacter/PersonCharacterListSkeleton.tsx

@@ -75,7 +75,7 @@ function PersonCharacterSkeleton(): React.ReactNode[]{
 		/>,
 		<div
 			key="comments"
-			className={`h-6 w-[32rem] ${elementBg}`}
+			className={`h-6 w-lg ${elementBg}`}
 		/>,
 		<div
 			key="actions"

src/ui/personCharacter/modal/PersonCharacterModal.tsx

@@ -33,6 +33,8 @@ export default function PersonCharacterModal({
 
 
 	useEffect(() => {
+		//TODO: Fix this warning
+		// eslint-disable-next-line react-hooks/set-state-in-effect
 		setCharacterName(personCharacter?.characterName ?? "");
 		setGameClassId(personCharacter?.gameClassId);
 		setCharacterRating(personCharacter?.characterRating);

src/ui/personCharacter/modal/PersonCharacterSelectorModal.tsx

@@ -118,9 +118,7 @@ export default function PersonCharacterSelectorModal({
 						/>
 					</div>
 					{/* Tabs */}
-					<div
+					<div className="flex flex-row items-center justify-center my-4">
-						className="flex flex-row items-center justify-center my-4"
-					>
 						{
 							Object.values(SelectorTabs).map((tab) => (
 								<div
@@ -140,9 +138,7 @@ export default function PersonCharacterSelectorModal({
 						}
 					</div>
 					{/* Character Selector */}
-					<div
+					<div className="m-8 max-w-200">
-						className="m-8 max-w-[50rem]"
-					>
 						<PersonCharacterSelector
 							personCharacters={currentlyVisibleCharacters}
 							selectedCharacterId={currentlySelectedCharacterId}

src/ui/raidGroup/AllRaidGroupsDisplay.tsx

@@ -27,6 +27,8 @@ export default function AllRaidGroupsDisplay(){
 
 	useEffect(() => {
 		if(raidGroupsCountQuery.status === "success"){
+			//TODO: Fix this warning
+			// eslint-disable-next-line react-hooks/set-state-in-effect
 			setTotalPages(Math.ceil(raidGroupsCountQuery.data / pageSize));
 		}
 	}, [ raidGroupsCountQuery ]);

src/ui/raidGroup/RaidGroupsByAccountDisplay.tsx

@@ -36,6 +36,8 @@ export default function RaidGroupsByAccountDisplay({
 
 	useEffect(() => {
 		if(raidGroupsCountQuery.status === "success"){
+			//TODO: Fix this warning
+			// eslint-disable-next-line react-hooks/set-state-in-effect
 			setTotalPages(Math.ceil(raidGroupsCountQuery.data / pageSize));
 		}
 	}, [ raidGroupsCountQuery ]);

src/ui/raidGroup/RaidGroupsByGameDisplay.tsx

@@ -31,6 +31,8 @@ export default function RaidGroupsByGameDisplay({
 
 	useEffect(() => {
 		if(raidGroupsCountQuery.status === "success"){
+			//TODO: Fix this warning
+			// eslint-disable-next-line react-hooks/set-state-in-effect
 			setTotalPages(Math.ceil(raidGroupsCountQuery.data / pageSize));
 		}
 	}, [ raidGroupsCountQuery ]);

src/ui/raidGroup/modals/RaidGroupModal.tsx

@@ -29,6 +29,8 @@ export default function RaidGroupModal({
 
 
 	useEffect(() => {
+		//TODO: Fix this warning
+		// eslint-disable-next-line react-hooks/set-state-in-effect
 		setRaidGroupName(raidGroup?.raidGroupName ?? "");
 		setRaidGroupIcon(raidGroup?.raidGroupIcon ?? "");
 		setGame(undefined);

src/ui/raidGroupRequest/RaidGroupRequestTab.tsx

@@ -34,6 +34,8 @@ export default function RaidGroupRequestTab({
 
 	useEffect(() => {
 		if(raidGroupRequestsCountQuery.status === "success"){
+			//TODO: Fix this warning
+			// eslint-disable-next-line react-hooks/set-state-in-effect
 			setTotalPages(Math.ceil(raidGroupRequestsCountQuery.data / pageSize));
 		}
 	}, [ raidGroupRequestsCountQuery ]);

src/ui/raidGroupRequest/modal/RaidGroupRequestModal.tsx

@@ -27,6 +27,8 @@ export default function RaidGroupRequestModal({
 
 
 	useEffect(() => {
+		//TODO: Fix this warning
+		// eslint-disable-next-line react-hooks/set-state-in-effect
 		setCurrentPermission(RaidGroupPermissionType.RAIDER);
 		setRequestMessage(raidGroupRequest?.requestMessage ?? "");
 	}, [ display, raidGroupRequest ]);

src/ui/raidInstance/RaidInstanceHeader.tsx

@@ -118,13 +118,9 @@ export default function RaidInstanceHeader(){
 
 
 	return (
-		<div
+		<div className="flex flex-col items-center justify-center w-full h-full mb-16">
-			className="flex flex-col items-center justify-center w-full h-full mb-16"
-		>
 			{/* Raid Instance Name */}
-			<div
+			<div className="flex flex-col justify-center items-center min-w-240 text-center">
-				className="flex flex-col justify-center items-center min-w-[60rem] text-center"
-			>
 				<h1
 					className="flex flex-row items-center justify-center text-4xl"
 				>
@@ -143,9 +139,7 @@ export default function RaidInstanceHeader(){
 				</h1>
 			</div>
 			{/* Start and End Dates */}
-			<div
+			<div className="flex flex-row justify-center mt-4">
-				className="flex flex-row justify-center mt-4"
-			>
 				<DateInput
 					id={`raidInstance${raidInstance?.raidInstanceId}StartDate`}
 					placeholder="Start Date"
@@ -160,13 +154,9 @@ export default function RaidInstanceHeader(){
 				/>
 			</div>
 			{/* Raid Size & Layout */}
-			<div
+			<div className="flex flex-row items-center justify-center gap-x-4 mt-4">
-				className="flex flex-row items-center justify-center gap-x-4 mt-4"
-			>
 				{/* Raid Size */}
-				<div
+				<div className="flex flex-row items-center justify-center">
-					className="flex flex-row items-center justify-center"
-				>
 					<NumberInput
 						id={`raidInstance${raidInstance?.raidInstanceId}Size`}
 						label="Raid Size"
@@ -177,16 +167,12 @@ export default function RaidInstanceHeader(){
 					/>
 				</div>
 				{/* Raid Layout */}
-				<div
+				<div className="flex flex-row items-center justify-center">
-					className="flex flex-row items-center justify-center"
-				>
 					<div
 						className="bg-inherit px-4 rounded-sm w-auto"
 						onClick={() => setDisplayRaidLayoutSelectorModal(true)}
 					>
-						<div
+						<div className="relative bg-inherit">
-							className="relative bg-inherit"
-						>
 							<div
 								id="selectRaidLayoutButton"
 								className="px-4 py-2 rounded-lg whitespace-nowrap cursor-pointer ring-2 ring-gray-500"
@@ -213,9 +199,7 @@ export default function RaidInstanceHeader(){
 					/>
 				</div>
 				{/* Roster */}
-				<div
+				<div className="flex flex-row items-center justify-center">
-					className="flex flex-row items-center justify-center"
-				>
 					<PrimaryButton
 						onClick={() => setDisplayRosterSelectorModal(true)}
 					>
@@ -230,9 +214,7 @@ export default function RaidInstanceHeader(){
 					/>
 				</div>
 				{/* Save Button */}
-				<div
+				<div className="flex flex-row items-center justify-center ml-4">
-					className="flex flex-row items-center justify-center ml-4"
-				>
 					{
 						<PrimaryButton
 							id="saveInstanceButton"

src/ui/raidInstance/RaidInstanceListSkeleton.tsx

@@ -77,11 +77,11 @@ function RaidInstanceSkeleton(){
 		/>,
 		<div
 			key="startDate"
-			className={`h-6 w-[26rem] mr-2 ${elementBg}`}
+			className={`h-6 w-104 mr-2 ${elementBg}`}
 		/>,
 		<div
 			key="endDate"
-			className={`h-6 w-[26rem] mr-2 ${elementBg}`}
+			className={`h-6 w-104 mr-2 ${elementBg}`}
 		/>,
 		<div
 			key="size"

src/ui/raidInstance/RaidInstanceTab.tsx

@@ -42,6 +42,8 @@ export default function RaidInstanceTab({
 
 	useEffect(() => {
 		if(raidInstanceCountQuery.status === "success"){
+			//TODO: Fix this warning
+			// eslint-disable-next-line react-hooks/set-state-in-effect
 			setTotalPages(Math.ceil(raidInstanceCountQuery.data / pageSize));
 		}
 	}, [ raidInstanceCountQuery ]);

src/ui/raidInstance/creator/RaidInstanceCreator.tsx

@@ -27,7 +27,7 @@ export default function RaidInstanceCreator(){
 
 	const updateClassGroupsLayout = (newSelectedClassGroup: ClassGroup | null | undefined) => {
 		//Get all existing xrefs, leaving out the current xref it it's been removed
-		const newClassGroups = selectedClassGroups;
+		const newClassGroups = [...selectedClassGroups];
 		newClassGroups[currentLocation.col] = newSelectedClassGroup ?? null;
 
 		//Update the raid layout to persist the changes

src/ui/raidInstance/modals/RaidInstanceModal.tsx

@@ -36,6 +36,8 @@ export default function RaidInstanceModal({
 
 	useEffect(() => {
 		if(raidInstance){
+			//TODO: Fix this warning
+			// eslint-disable-next-line react-hooks/set-state-in-effect
 			setRaidInstanceName(raidInstance.raidInstanceName ?? "");
 			setRaidStartDate(raidInstance.raidStartDate);
 			setRaidEndDate(raidInstance.raidEndDate);

src/ui/raidLayout/RaidLayoutList.tsx

@@ -28,6 +28,8 @@ export default function RaidLayoutList({
 
 	const classGroupsQuery = useGetClassGroupsByRaidLayout(raidGroup.raidGroupId ?? "", selectedRaidLayout?.raidLayoutId);
 	useEffect(() => {
+		//TODO: Fix this warning
+		// eslint-disable-next-line react-hooks/set-state-in-effect
 		setSelectedLayoutClassGroups(classGroupsQuery.data ?? []);
 	}, [ classGroupsQuery.data ]);
 

src/ui/raidLayout/RaidLayoutListSkeleton.tsx

@@ -80,7 +80,7 @@ function RaidLayoutSkeleton(){
 		/>,
 		<div
 			key="classGroups"
-			className={`h-6 w-[56rem] ml-2 ${elementBg}`}
+			className={`h-6 w-4xl ml-2 ${elementBg}`}
 		/>,
 		<div
 			key="actions"

src/ui/raidLayout/RaidLayoutTab.tsx

@@ -40,6 +40,8 @@ export default function RaidLayoutTab({
 
 	useEffect(() => {
 		if(raidLayoutCountQuery.status === "success"){
+			//TODO: Fix this warning
+			// eslint-disable-next-line react-hooks/set-state-in-effect
 			setTotalPages(Math.ceil(raidLayoutCountQuery.data / pageSize));
 		}
 	}, [ raidLayoutCountQuery ]);

src/ui/raidLayout/modal/RaidLayoutModal.tsx

@@ -32,6 +32,8 @@ export default function RaidLayoutModal({
 
 
 	useEffect(() => {
+		//TODO: Fix this warning
+		// eslint-disable-next-line react-hooks/set-state-in-effect
 		setRaidLayoutName(raidLayout?.raidLayoutName ?? "");
 		setRaidLayoutSize(raidLayout?.raidSize ?? 0);
 		setClassGroups(selectedClassGroups);

src/ui/raidLayout/modal/RaidLayoutSelectorModal.tsx

@@ -40,11 +40,15 @@ export default function RaidLayoutSelectorModal({
 
 	//Update any changes to Raid Layout ID
 	useEffect(() => {
+		//TODO: Fix this warning
+		// eslint-disable-next-line react-hooks/set-state-in-effect
 		setCurrentlySelectedLayoutId(selectedRaidLayoutId);
 	}, [ raidLayouts, selectedRaidLayoutId ]);
 
 	//Update page data when modal becomes visible
 	useEffect(() => {
+		//TODO: Fix this warning
+		// eslint-disable-next-line react-hooks/set-state-in-effect
 		setPage(1);
 		setSearchTerm("");
 	}, [ display ]);
@@ -53,6 +57,8 @@ export default function RaidLayoutSelectorModal({
 	useEffect(() => {
 		const filteredLayouts = raidLayouts.filter((raidLayout) => raidLayout.raidLayoutName.toLowerCase().includes(searchTerm?.toLowerCase() ?? ""));
 
+		//TODO: Fix this warning
+		// eslint-disable-next-line react-hooks/set-state-in-effect
 		setMatchingLayouts(filteredLayouts);
 		setCurrentlyVisibleLayouts(filteredLayouts.slice((page - 1) * pageSize, page * pageSize));
 	}, [ page, searchTerm, raidLayouts ]);