Update raid instance creator table style

src/ui/raidInstance/creator/RaidInstanceCreator.tsx

@@ -98,7 +98,7 @@ export default function RaidInstanceCreator(){
 
 	return (
 		<div
-			className="flex flex-col items-center justify-center"
+			className="flex flex-col items-center justify-center max-w-[100vw]"
 		>
 			{/* Main Content */}
 			<RaidInstanceCreatorTable

src/ui/raidInstance/creator/RaidInstanceCreatorTable.tsx

@@ -24,10 +24,10 @@ export default function RaidInstanceCreatorTable({
 
 	return(
 		<div
-			className="flex flex-col items-center justify-center"
+			className="flex flex-col items-center justify-center w-full"
 		>
 			<div
-				className="flex flex-col items-start justify-start max-w-full overflow-auto pb-16"
+				className="flex flex-col items-start justify-start max-w-full overflow-auto"
 			>
 				<table>
 					{/* Header */}
@@ -44,6 +44,7 @@ export default function RaidInstanceCreatorTable({
 			<PrimaryButton
 				id="instanceAddRunButton"
 				onClick={addRun}
+				className="mt-16"
 			>
 				Add Run
 			</PrimaryButton>

src/ui/raidInstance/creator/RaidInstanceCreatorTableBody.tsx

@@ -4,6 +4,7 @@ import { PersonCharacter } from "@/interface/PersonCharacter";
 import { RaidInstance } from "@/interface/RaidInstance";
 import { useRaidInstanceContext } from "@/providers/RaidInstanceLayoutProvider";
 import { getPersonCharactersFromXrefs } from "@/util/PersonCharacterUtil";
+import clsx from "clsx";
 import moment from "moment";
 import { BsDiscord, BsXLg } from "react-icons/bs";
 
@@ -79,11 +80,14 @@ export default function RaidInstanceCreatorTableBody({
 							run.map((ch, chIndex) => (
 								<td
 									key={chIndex}
-									className="px-4 py-2 border-2 cursor-default"
+									className="px-4 py-2 cursor-default"
 									onClick={() => onClickBodyCell(runIndex, chIndex)}
 								>
 									<div
-										className="flex flex-row justify-start flex-nowrap"
+										className={clsx(
+											"flex flex-row justify-start flex-nowrap px-4 py-2 text-nowrap rounded-full",
+											"bg-neutral-600 text-white"
+										)}
 									>
 										{
 											ch?.gameClassId &&

src/ui/raidInstance/creator/RaidInstanceCreatorTableHeader.tsx

@@ -1,4 +1,5 @@
 import { useRaidInstanceContext } from "@/providers/RaidInstanceLayoutProvider";
+import clsx from "clsx";
 
 
 export default function RaidInstanceCreatorTableHeader({
@@ -13,15 +14,23 @@ export default function RaidInstanceCreatorTableHeader({
 		<thead>
 			<tr
 				id="instanceTableHead"
+				className="border-b-2"
 			>
 				{
 					selectedClassGroups.map((classGroup, index) => (
 						<th
 							key={index}
-							className="px-4 py-2 border-2 cursor-pointer"
+							className="cursor-pointer pb-2"
 							onClick={() => onClickHeaderCell(index)}
 						>
-							{classGroup?.classGroupName ?? "Any"}
+							<div
+								className={clsx(
+									"mx-4 px-4 py-2 rounded-full text-nowrap",
+									"bg-neutral-600 text-white"
+								)}
+							>
+								{classGroup?.classGroupName ?? "Any"}
+							</div>
 						</th>
 					))
 				}