fix: ReadOnlyAutoComplete layout defaults

components/ReadOnlyAutoComplete.vue

@@ -4,10 +4,15 @@
 		chip-icon="hidden"
 		multiple
 		disabled
-		:pt="merge(pt, {
-			// Tabindex should be unset, otherwise Copying of the selected value is not working.
-			inputMultiple: {tabindex: ''},
-		})"
+		:pt="merge({
+			inputChip: { class: 'hidden' },
+			inputMultiple: {
+				class: 'pb-1 pr-9 min-h-10',
+				// Tabindex should be unset, otherwise Copying of the selected value is not working.
+				tabindex: ''
+			},
+			chipItem: { class: 'mt-1' },
+		}, pt)"
 		:pt-options="{ mergeProps: true }"
 		:typeahead="false"
 	/>
@@ -20,6 +25,8 @@
 		pt: {
 			type: Object as PropType<{
 				inputMultiple?: Record<string, unknown>,
+				inputChip?: Record<string, unknown>,
+				chipItem?: Record<string, unknown>,
 				[field: string]: unknown
 			}>,
 			default: () => ({}),

pages/probes/[id].vue

@@ -83,18 +83,13 @@
 				<ReadOnlyAutoComplete
 					id="systemTags"
 					v-model="probe.systemTags"
-					:pt="{
-						inputMultiple: {class: 'pb-1 pr-10 min-h-10'},
-						inputChip: 'hidden',
-						chipItem: 'mt-1'
-					}"
 				/>
 			</div>
 			<p class="mt-2 text-xs text-bluegray-400">
 				Public tags that can be used to target the probe in measurements.
 			</p>
 
-			<label for="tags" class="mt-4 inline-block text-xs">User tags</label>
+			<label for="userTags" class="mt-4 inline-block text-xs">User tags</label>
 			<div v-if="isEditingTags" class="mt-1">
 				<div>
 					<div class="flex text-xs">
@@ -136,13 +131,8 @@
 			</div>
 			<div v-else class="relative mt-1">
 				<ReadOnlyAutoComplete
-					id="tags"
-					v-model="tagStrings"
-					:pt="{
-						inputMultiple: {class: 'pb-1 pr-24 min-h-10'},
-						inputChip: 'hidden',
-						chipItem: 'mt-1'
-					}"
+					id="userTags"
+					v-model="userTags"
 				/>
 				<Button
 					label="Edit"
@@ -266,7 +256,7 @@
 	// TAGS
 
 	const isEditingTags = ref<boolean>(false);
-	const tagStrings = computed(() => probe.value.tags.map(({ prefix, value }) => `u-${prefix}-${value}`));
+	const userTags = computed(() => probe.value.tags.map(({ prefix, value }) => `u-${prefix}-${value}`));
 	const tagsToEdit = ref<{ uPrefix: string, value: string }[]>([]);
 
 	const uPrefixes = [ user.github_username, ...user.github_organizations ].map(value => `u-${value}`);

pages/settings.vue

@@ -38,8 +38,6 @@
 						v-model="user.github_organizations"
 						:pt="{
 							inputMultiple: { class: 'pb-1 pr-48 min-h-10' },
-							inputChip: 'hidden',
-							chipItem: 'mt-1'
 						}"
 					/>
 					<Button