remove table resizing and fix admin panel user scroll behavior

src/lib/components/Input/Select.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
+	// eslint-disable-next-line no-undef
+	type T = $$Generic;
 
 	export let id: string | null = null;
 	export let name: string | null = null;
-	export let value: any | null = null;
+	export let value: T | null = null;
 	export let label: string | null = null;
 	export let notice: string | null = null;
 	export let required = false;

src/lib/components/utils.ts

@@ -3,56 +3,3 @@ export async function buttonTriggeredRequest<T>(e: MouseEvent, promise: Promise<
 	await promise;
 	(e.target as HTMLButtonElement).disabled = false;
 }
-
-export function resizeTableColumn(event: MouseEvent, dragOffset: number) {
-	const element = event.target as HTMLTableCellElement;
-	const rect = element.getBoundingClientRect();
-
-	const posX = event.clientX - rect.left;
-	const offset = rect.width - event.clientX;
-	if (posX <= dragOffset || posX >= rect.width - dragOffset) {
-		// do not resize if resize request is on the table left or right
-		if (
-			(posX <= dragOffset && !element.previousElementSibling) ||
-			(posX >= rect.width - dragOffset && !element.nextElementSibling)
-		) {
-			return;
-		}
-
-		const table = element.parentElement!.parentElement!.parentElement as HTMLTableElement;
-		let resizeRow: HTMLTableRowElement;
-		if (table.tBodies[0].rows[0].hasAttribute('resize-row')) {
-			resizeRow = table.tBodies[0].rows[0];
-		} else {
-			resizeRow = table.tBodies[0].insertRow(0);
-			resizeRow.setAttribute('resize-row', '');
-			resizeRow.style.height = '0';
-			resizeRow.style.border = '0';
-			resizeRow.style.overflow = 'hidden';
-			for (let i = 0; i < table.rows[0].cells.length; i++) {
-				const cell = resizeRow.insertCell();
-				cell.style.padding = '0';
-			}
-
-			// insert an additional to keep the zebra in place pattern which might be applied
-			const zebraGhostRow = table.tBodies[0].insertRow(1);
-			zebraGhostRow.hidden = true;
-		}
-
-		const resizeElement =
-			resizeRow.cells[element.cellIndex - ((posX <= dragOffset) as unknown as number)];
-
-		// eslint-disable-next-line svelte/no-inner-declarations,no-inner-declarations
-		function resize(e: MouseEvent) {
-			document.body.style.cursor = 'col-resize';
-			resizeElement.style.width = `${offset + e.clientX}px`;
-		}
-
-		document.addEventListener('mousemove', resize);
-
-		document.addEventListener('mouseup', () => {
-			document.removeEventListener('mousemove', resize);
-			document.body.style.cursor = 'initial';
-		});
-	}
-}

src/routes/admin/admin/+page.svelte

@@ -6,7 +6,7 @@
 	import { Permissions } from '$lib/permissions';
 	import { env } from '$env/dynamic/public';
 	import ErrorToast from '$lib/components/Toast/ErrorToast.svelte';
-	import { buttonTriggeredRequest, resizeTableColumn } from '$lib/components/utils';
+	import { buttonTriggeredRequest } from '$lib/components/utils';
 	import { goto } from '$app/navigation';
 	import { adminCount } from '$lib/stores';
 
@@ -97,18 +97,18 @@
 <table class="table table-zebra w-full">
 	<thead>
 		<tr>
-			<th on:mousedown={(e) => resizeTableColumn(e, 5)} />
+			<th />
-			<th on:mousedown={(e) => resizeTableColumn(e, 5)}>Benutzername</th>
+			<th>Benutzername</th>
-			<th on:mousedown={(e) => resizeTableColumn(e, 5)}>Passwort</th>
+			<th>Passwort</th>
-			<th on:mousedown={(e) => resizeTableColumn(e, 5)}>Berechtigungen</th>
+			<th>Berechtigungen</th>
-			<th on:mousedown={(e) => resizeTableColumn(e, 5)} />
+			<th />
 		</tr>
 	</thead>
 	<tbody>
 		{#each data.admins as admin, i}
 			<tr>
-				<td on:mousedown={(e) => resizeTableColumn(e, 5)}>{i + 1}</td>
+				<td>{i + 1}</td>
-				<td on:mousedown={(e) => resizeTableColumn(e, 5)}
+				<td
 					><Input
 						type="text"
 						bind:value={admin.username}
@@ -116,7 +116,7 @@
 						size="sm"
 					/></td
 				>
-				<td on:mousedown={(e) => resizeTableColumn(e, 5)}
+				<td
 					><Input
 						type="password"
 						bind:value={admin.password}
@@ -125,14 +125,14 @@
 						size="sm"
 					/></td
 				>
-				<td on:mousedown={(e) => resizeTableColumn(e, 5)}
+				<td
 					><Badges
 						bind:value={admin.permissions}
 						available={allPermissionBadges}
 						disabled={!permissions.adminWrite() || !admin.edit}
 					/></td
 				>
-				<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
+				<td>
 					<div>
 						{#if admin.edit}
 							<span class="w-min" class:cursor-not-allowed={!permissions.adminWrite()}>
@@ -196,21 +196,17 @@
 			</tr>
 		{/each}
 		<tr>
-			<td on:mousedown={(e) => resizeTableColumn(e, 5)}>{data.admins.length + 1}</td>
+			<td>{data.admins.length + 1}</td>
-			<td on:mousedown={(e) => resizeTableColumn(e, 5)}
+			<td><Input type="text" bind:value={newAdminUsername} size="sm" /></td>
-				><Input type="text" bind:value={newAdminUsername} size="sm" /></td
+			<td><Input type="password" bind:value={newAdminPassword} size="sm" /></td>
-			>
+			<td
-			<td on:mousedown={(e) => resizeTableColumn(e, 5)}
-				><Input type="password" bind:value={newAdminPassword} size="sm" /></td
-			>
-			<td on:mousedown={(e) => resizeTableColumn(e, 5)}
 				><Badges
 					bind:value={newAdminPermissions}
 					available={allPermissionBadges}
 					disabled={!permissions.adminWrite()}
 				/></td
 			>
-			<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
+			<td>
 				<span
 					class="w-min"
 					class:cursor-not-allowed={!permissions.adminWrite() ||
@@ -241,28 +237,3 @@
 <ErrorToast show={errorMessage !== ''}>
 	<span />
 </ErrorToast>
-
-<style lang="scss">
-	thead tr th,
-	tbody tr td {
-		@apply relative;
-
-		&:not(:first-child) {
-			@apply border-l-[1px] border-dashed;
-
-			&::before {
-				@apply absolute left-0 bottom-0 h-full w-[5px] cursor-col-resize;
-				content: '';
-			}
-		}
-
-		&:not(:last-child) {
-			@apply border-r-[1px] border-dashed border-base-300;
-
-			&::after {
-				@apply absolute right-0 bottom-0 h-full w-[5px] cursor-col-resize;
-				content: '';
-			}
-		}
-	}
-</style>

src/routes/admin/users/+page.svelte

@@ -5,7 +5,7 @@
 	import Select from '$lib/components/Input/Select.svelte';
 	import { env } from '$env/dynamic/public';
 	import type { User } from '$lib/server/database';
-	import { buttonTriggeredRequest, resizeTableColumn } from '$lib/components/utils';
+	import { buttonTriggeredRequest } from '$lib/components/utils';
 	import { browser } from '$app/environment';
 	import HeaderBar from './HeaderBar.svelte';
 
@@ -120,16 +120,16 @@
 	}
 </script>
 
-<div>
+<div class="h-screen flex flex-col overflow-hidden">
 	<HeaderBar bind:userFilter />
 	<hr class="divider my-1 mx-8 border-none" />
-	<div class="h-[90vh] overflow-scroll" bind:this={userTableContainerElement}>
+	<div class="h-full overflow-scroll" bind:this={userTableContainerElement}>
-		<table class="table relative">
+		<table class="table table-auto">
 			<thead>
 				<tr class="[&>th]:bg-base-100 [&>th]:z-[1] [&>th]:sticky [&>th]:top-0">
 					<th />
 					{#each headers as header}
-						<th on:mousedown={(e) => resizeTableColumn(e, 5)}>
+						<th>
 							<button
 								class="flex items-center"
 								on:click={() => {
@@ -155,14 +155,14 @@
 					{#await currentPageUsersRequest then _}
 						{#each currentPageUsers as user, i}
 							<tr>
-								<td on:mousedown={(e) => resizeTableColumn(e, 5)}>{i + 1}</td>
+								<td>{i + 1}</td>
-								<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
+								<td>
 									<Input type="text" bind:value={user.firstname} disabled={!user.edit} size="sm" />
 								</td>
-								<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
+								<td>
 									<Input type="text" bind:value={user.lastname} disabled={!user.edit} size="sm" />
 								</td>
-								<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
+								<td>
 									<Input
 										type="date"
 										value={new Date(user.birthday).toISOString().split('T')[0]}
@@ -171,23 +171,23 @@
 										size="sm"
 									/>
 								</td>
-								<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
+								<td>
 									<Input type="tel" bind:value={user.telephone} disabled={!user.edit} size="sm" />
 								</td>
-								<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
+								<td>
 									<Input type="text" bind:value={user.username} disabled={!user.edit} size="sm" />
 								</td>
-								<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
+								<td>
 									<Select id="edition" bind:value={user.playertype} disabled={!user.edit} size="sm">
 										<option value="java">Java Edition</option>
 										<option value="bedrock">Bedrock Edition</option>
 										<option value="cracked">Java cracked</option>
 									</Select>
 								</td>
-								<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
+								<td>
 									<Input type="text" bind:value={user.password} disabled={!user.edit} size="sm" />
 								</td>
-								<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
+								<td>
 									<Input
 										id="uuid"
 										type="text"
@@ -196,7 +196,7 @@
 										size="sm"
 									/>
 								</td>
-								<td on:mousedown={(e) => resizeTableColumn(e, 5)}>
+								<td>
 									<div class="flex gap-1">
 										{#if user.edit}
 											<button
@@ -242,8 +242,7 @@
 				{/key}
 			</tbody>
 		</table>
-	</div>
+		<div class="flex justify-center items-center mb-2 mt-4 w-full">
-	<div class="flex justify-center w-full mt-4 mb-6">
 			<div class="join">
 				{#each Array(Math.ceil(data.count / usersPerPage) || 1) as _, i}
 					<button
@@ -256,29 +255,5 @@
 				{/each}
 			</div>
 		</div>
+	</div>
 </div>
-
-<style lang="scss">
-	thead tr th,
-	tbody tr td {
-		@apply relative;
-
-		&:not(:first-child) {
-			@apply border-l-[1px] border-dashed;
-
-			&::before {
-				@apply absolute left-0 bottom-0 h-full w-[5px] cursor-col-resize;
-				content: '';
-			}
-		}
-
-		&:not(:last-child) {
-			@apply border-r-[1px] border-dashed border-base-300;
-
-			&::after {
-				@apply absolute right-0 bottom-0 h-full w-[5px] cursor-col-resize;
-				content: '';
-			}
-		}
-	}
-</style>