make admin table resizable

src/lib/components/Input/Input.svelte

@@ -28,7 +28,11 @@
 <div class={type === 'submit' && disabled ? 'cursor-not-allowed' : ''}>
 	{#if type === 'submit'}
 		<input
-			class={`btn btn-${size}`}
+			class="btn"
+			class:btn-xs={size === 'xs'}
+			class:btn-sm={size === 'sm'}
+			class:btn-md={size === 'md'}
+			class:btn-lg={size === 'lg'}
 			{id}
 			type="submit"
 			{disabled}
@@ -49,9 +53,16 @@
 			{/if}
 			<div class="relative flex items-center" class:sm:max-w-[16rem]={type !== 'checkbox'}>
 				<input
-					class={type === 'checkbox' ? `checkbox-${size}` : `input-${size}`}
 					class:checkbox={type === 'checkbox'}
-					class:input,input-bordered,w-[100%]={type !== 'checkbox'}
+					class:checkbox-xs={type === 'checkbox' && size === 'xs'}
+					class:checkbox-sm={type === 'checkbox' && size === 'sm'}
+					class:checkbox-md={type === 'checkbox' && size === 'md'}
+					class:checkbox-lg={type === 'checkbox' && size === 'lg'}
+					class:input,input-bordered,w-full={type !== 'checkbox'}
+					class:input-xs={type !== 'checkbox' && size === 'xs'}
+					class:input-sm={type !== 'checkbox' && size === 'sm'}
+					class:input-md={type !== 'checkbox' && size === 'md'}
+					class:input-lg={type !== 'checkbox' && size === 'lg'}
 					class:pr-11={initialType === 'password'}
 					{id}
 					{name}

src/lib/components/Input/Select.svelte

@@ -6,6 +6,7 @@
 	export let notice: string | null = null;
 	export let required = false;
 	export let disabled = false;
+	export let size: 'xs' | 'sm' | 'md' | 'lg' = 'md';
 </script>
 
 <div>
@@ -20,7 +21,11 @@
 		</label>
 	{/if}
 	<select
-		class="input input-bordered w-[100%] sm:max-w-[16rem]"
+		class="select select-bordered w-[100%] sm:max-w-[16rem]"
+		class:select-xs={size === 'xs'}
+		class:select-sm={size === 'sm'}
+		class:select-md={size === 'md'}
+		class:select-lg={size === 'lg'}
 		{id}
 		{name}
 		{required}