Merge pull request #7254 from getkirby/fix/7221-multiselect-overflow

fix: Tags in multiselect field do no overflow

Author: bastianallgeier

panel/lab/components/tags/1_tag/index.vue

@@ -41,5 +41,11 @@
 				text="Foo"
 			/>
 		</k-lab-example>
+		<k-lab-example label="Too long">
+			<k-tag
+				:removable="true"
+				text="Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed diam eget risus varius blandit sit amet non magna. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor."
+			/>
+		</k-lab-example>
 	</k-lab-examples>
 </template>

panel/src/components/Forms/Input.vue

@@ -173,6 +173,7 @@ export default {
 /* Element container */
 .k-input-element {
 	flex-grow: 1;
+	min-width: 0;
 }
 
 /* Icon */

panel/src/components/Navigation/Tag.vue

@@ -106,6 +106,7 @@ export default {
 .k-tag {
 	position: relative;
 	height: var(--tag-height);
+	max-width: 100%;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;

panel/src/components/Navigation/Tags.vue

@@ -234,6 +234,7 @@ export default {
 
 .k-tags {
 	display: inline-flex;
+	max-width: 100%;
 	gap: var(--tags-gap);
 	align-items: center;
 	flex-wrap: wrap;