fixed some border styling issues on the time table header

Author: marcus-wishes

library/src/components/timetable/TimeTableHeader.tsx

@@ -109,7 +109,9 @@ type TimeTableHeaderProps<
 }
 
 const headerCellBaseClassname =
-	"bg-surface border-transparent border-b-border after:border-border relative select-none border-0 border-b-2 border-solid p-0 pl-1 font-bold after:absolute after:bottom-[1px] after:right-0 after:top-0 after:h-full after:border-solid"
+	"bg-surface border-transparent size-full border-b-border after:border-border relative select-none border-0 border-b-2 border-solid p-0 font-bold after:absolute after:bottom-[1px] after:right-0 after:top-0 after:h-full after:border-solid" as const
+const headerLeftHeaderClassname =
+	"bg-surface border-border sticky left-0 top-0 z-[5] select-none border-0 border-solid p-0 border-r-2" as const
 
 export const LPTimeTableHeader = function TimeTableHeader<
 	G extends TimeTableGroup,
@@ -206,9 +208,7 @@ export const LPTimeTableHeader = function TimeTableHeader<
 						style={{
 							width: groupHeaderColumnWidth,
 						}}
-						className={
-							"bg-surface border-border sticky left-0 top-0 z-[5] select-none border-l-0 border-t-0 border-b-0 border-solid px-0 pt-1"
-						}
+						className={`${headerLeftHeaderClassname} border-b-0 pt-1`}
 					>
 						<div className="flex justify-end pr-4 font-semibold text-lg">
 							{`${startDate.format("DD.MM.")} - ${endDate.format(
@@ -256,7 +256,7 @@ export const LPTimeTableHeader = function TimeTableHeader<
 				{/* TIME SLOTS */}
 				<tr>
 					<th
-						className={`border-border bg-surface sticky left-0 top-0 z-[5] select-none border-l-0 border-t-0 border-solid p-0 ${
+						className={`${headerLeftHeaderClassname} border-b-2 ${
 							showTimeSlotHeader ? "pt-1" : "py-0"
 						}`}
 					>
@@ -297,11 +297,7 @@ export const LPTimeTableHeader = function TimeTableHeader<
 				</tr>
 				{customHeaderRow && (
 					<tr>
-						<th
-							className={`border-border bg-surface sticky left-0 top-0 z-[5] select-none border-l-0 border-t-0 border-solid p-0 ${
-								showTimeSlotHeader ? "pt-1" : "py-0"
-							}`}
-						>
+						<th className={`${headerLeftHeaderClassname}`}>
 							{customHeaderRow.header({
 								slotsArray,
 								timeFrameOfDay: timeFrameDay,
@@ -370,7 +366,7 @@ function CustomHeaderRowCell<
 			colSpan={2}
 			className={`${headerCellBaseClassname} ${
 				isLastOfDay ? "after:border-l-2" : "after:border-l"
-			} ${showTimeSlotHeader ? "pt-1" : ""}`}
+			}`}
 			ref={ref}
 		>
 			{customHeaderRow.timeSlot({

package-lock.json

@@ -98,7 +98,7 @@
 		"highlight.js": "^11.10.0",
 		"intl-messageformat": "^10.5.0",
 		"lowlight": "^3.1.0",
-		"lucide-react": "^0.447.0",
+		"lucide-react": "^0.451.0",
 		"mime-types": "^2.1.35",
 		"react-awesome-slider": "^4.1.0",
 		"react-day-picker": "^8.10.1",
@@ -142,7 +142,7 @@
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-react-hooks": "^4.6.2",
 		"eslint-plugin-react-refresh": "^0.4.12",
-		"eslint-plugin-tailwindcss": "^3.17.4",
+		"eslint-plugin-tailwindcss": "^3.17.5",
 		"postcss": "^8.4.47",
 		"prettier": "^3.3.3",
 		"prettier-plugin-tailwindcss": "^0.6.8",

package.json

@@ -7995,9 +7995,7 @@ function TestCustomHeaderRowTimeSlot<
 		) : null,
 	)
 
-	console.log("RET", ret, leftAndWidths)
-
-	return <>{ret}</>
+	return <div className="bg-surface-pressed absolute inset-0">{ret}</div>
 }
 
 function CustomHeaderRowHeader<
@@ -8010,7 +8008,7 @@ function CustomHeaderRowHeader<
 	entries,
 }: TimeTableTypes.CustomHeaderRowHeaderProps<G, I>) {
 	return (
-		<div>
+		<div className="bg-surface-pressed">
 			{entries[1].group.title} has {entries.length} entries
 		</div>
 	)

showcase/public/showcase-sources.txt

@@ -492,7 +492,7 @@ function TestCustomHeaderRowTimeSlot<
 		) : null,
 	)
 
-	return <>{ret}</>
+	return <div className="bg-surface-pressed absolute inset-0">{ret}</div>
 }
 
 function CustomHeaderRowHeader<
@@ -505,7 +505,7 @@ function CustomHeaderRowHeader<
 	entries,
 }: TimeTableTypes.CustomHeaderRowHeaderProps<G, I>) {
 	return (
-		<div>
+		<div className="bg-surface-pressed">
 			{entries[1].group.title} has {entries.length} entries
 		</div>
 	)