From c2b2de9e9683bbf5f5a88e4afc6a729dd3c8c356 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 1 Dec 2025 04:10:36 -0800
Subject: [PATCH] TagInput: add contained prop with max-width

---
 src/lib/components/ui/TagInput.svelte | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/ui/TagInput.svelte b/src/lib/components/ui/TagInput.svelte
index fce66b9b..2d9ee5c1 100644
--- a/src/lib/components/ui/TagInput.svelte
+++ b/src/lib/components/ui/TagInput.svelte
@@ -21,6 +21,8 @@
 		class?: string
 		/** Input id for label association */
 		id?: string
+		/** Whether to show contained style with background */
+		contained?: boolean
 	}
 
 	let {
@@ -31,7 +33,8 @@
 		error,
 		maxTags,
 		class: className = '',
-		id
+		id,
+		contained = false
 	}: Props = $props()
 
 	let inputValue = $state('')
@@ -83,6 +86,7 @@
 			class="tagInput"
 			class:disabled
 			class:hasError={!!error}
+			class:contained
 			onclick={focusInput}
 			onkeydown={(e) => e.key === 'Enter' && focusInput()}
 			role="button"
@@ -126,6 +130,7 @@
 	<div
 		class="tagInput {className}"
 		class:disabled
+		class:contained
 		onclick={focusInput}
 		onkeydown={(e) => e.key === 'Enter' && focusInput()}
 		role="button"
@@ -202,13 +207,14 @@
 		gap: $unit-half;
 		padding: $unit $unit-2x;
 		min-height: calc($unit * 5.5);
+		max-width: 480px;
 		background-color: var(--input-bg);
 		border-radius: $input-corner;
 		border: 2px solid transparent;
 		cursor: text;
 		@include smooth-transition($duration-quick, background-color, border-color);
 
-		&:hover:not(.disabled) {
+		&:hover:not(.disabled):not(.contained) {
 			background-color: var(--input-bg-hover);
 		}
 
@@ -224,6 +230,14 @@
 		&.hasError {
 			border-color: $error;
 		}
+
+		&.contained {
+			background-color: var(--input-bound-bg);
+
+			&:hover:not(.disabled) {
+				background-color: var(--input-bound-bg-hover);
+			}
+		}
 	}
 
 	.tag {