Update CSS guidelines + Prefer rem

src/package/components/TextInput.svelte

@@ -6,9 +6,10 @@
 	export let value = ''
 	export let multiline = false
 	export let id: string = undefined
+	export let fill = false
 </script>
 
-<div class="text-input">
+<div class="text-input" class:fill>
 	{#if multiline}
 		<textarea name={id} {placeholder} bind:value />
 	{:else}
@@ -23,18 +24,28 @@
 	.text-input {
 		display: flex;
 		flex-direction: column;
-		gap: 8px;
+		gap: 0.5rem;
 		position: relative;
+		width: 20rem;
+
+		&.fill {
+			width: 100%;
+			flex: 1;
+		}
 
 		input,
 		textarea {
-			border-radius: var(--rounded-sm);
+			border-radius: var(--rounded);
 			box-shadow: var(--shadow-inset-sm);
 			background-color: var(--color-button-bg);
 			border: none;
-			padding: 6px 14px;
-			width: 20rem;
+			padding: 0.25rem 1rem;
+			width: 100%;
 			max-width: 100%;
+
+			&.has-icon {
+				padding-left: 2.5rem;
+			}
 		}
 
 		textarea {
@@ -45,12 +56,8 @@
 			position: absolute;
 			display: flex;
 			height: 100%;
-			left: 14px;
+			left: 1rem;
 			opacity: 0.75;
 		}
-
-		input.has-icon {
-			padding-left: 40px;
-		}
 	}
 </style>