diff --git a/panel/lab/components/item/1_list/index.vue b/panel/lab/components/item/1_list/index.vue
index 593e56f2ef..fc62ac1528 100644
--- a/panel/lab/components/item/1_list/index.vue
+++ b/panel/lab/components/item/1_list/index.vue
@@ -77,5 +77,20 @@
 				theme="disabled"
 			/>
 		</k-lab-example>
+		<k-lab-example label="Wrap for long title/info">
+			<k-item
+				:buttons="[
+					{
+						icon: 'edit'
+					},
+					{
+						icon: 'trash'
+					}
+				]"
+				:image="{ src: 'https://picsum.photos/800/600' }"
+				info="With some more information than usual"
+				text="This is a nice item with a rather long title that should wrap"
+			/>
+		</k-lab-example>
 	</k-lab-examples>
 </template>
diff --git a/panel/lab/components/item/2_cards/index.vue b/panel/lab/components/item/2_cards/index.vue
index 74f1233f8a..b480e4e983 100644
--- a/panel/lab/components/item/2_cards/index.vue
+++ b/panel/lab/components/item/2_cards/index.vue
@@ -82,5 +82,21 @@
 				theme="disabled"
 			/>
 		</k-lab-example>
+		<k-lab-example label="Wrap for long title/info">
+			<k-item
+				:buttons="[
+					{
+						icon: 'edit'
+					},
+					{
+						icon: 'trash'
+					}
+				]"
+				:image="{ src: 'https://picsum.photos/800/600' }"
+				info="With some more information than usual"
+				layout="cards"
+				text="This is a nice item with a rather long title that should wrap"
+			/>
+		</k-lab-example>
 	</k-lab-examples>
 </template>
diff --git a/panel/lab/components/item/3_cardlets/index.vue b/panel/lab/components/item/3_cardlets/index.vue
index ff5bad1de3..a3b4e55428 100644
--- a/panel/lab/components/item/3_cardlets/index.vue
+++ b/panel/lab/components/item/3_cardlets/index.vue
@@ -86,5 +86,21 @@
 				theme="disabled"
 			/>
 		</k-lab-example>
+		<k-lab-example label="Wrap for long title/info">
+			<k-item
+				:buttons="[
+					{
+						icon: 'edit'
+					},
+					{
+						icon: 'trash'
+					}
+				]"
+				:image="{ src: 'https://picsum.photos/800/600' }"
+				info="With some more information than usual"
+				layout="cardlets"
+				text="This is a nice item with a rather long title that should wrap"
+			/>
+		</k-lab-example>
 	</k-lab-examples>
 </template>
diff --git a/panel/src/components/Collection/Item.vue b/panel/src/components/Collection/Item.vue
index a1b9bf82c8..50957d0b4b 100644
--- a/panel/src/components/Collection/Item.vue
+++ b/panel/src/components/Collection/Item.vue
@@ -24,7 +24,7 @@
 
 		<!-- Content -->
 		<div class="k-item-content">
-			<h3 class="k-item-title" :title="title">
+			<h3 class="k-item-title" :title="title(text)">
 				<k-link v-if="link !== false" :target="target" :to="link">
 					<!-- eslint-disable-next-line vue/no-v-html -->
 					<span v-html="text ?? '–'" />
@@ -33,10 +33,11 @@
 				<span v-else v-html="text ?? '–'" />
 			</h3>
 			<!-- eslint-disable-next-line vue/no-v-html -->
-			<p v-if="info" class="k-item-info" v-html="info" />
+			<p v-if="info" :title="title(info)" class="k-item-info" v-html="info" />
 		</div>
 
 		<div
+			v-if="buttons?.length || options || $slots.options"
 			class="k-item-options"
 			:data-only-option="!buttons?.length || (!options && !$slots.options)"
 		>
@@ -119,17 +120,17 @@ export default {
 	computed: {
 		hasFigure() {
 			return this.image !== false && this.$helper.object.length(this.image) > 0;
-		},
-		title() {
-			return this.$helper.string
-				.stripHTML(this.$helper.string.unescapeHTML(this.text))
-				.trim();
 		}
 	},
 	methods: {
 		onOption(event) {
 			this.$emit("action", event);
 			this.$emit("option", event);
+		},
+		title(text) {
+			return this.$helper.string
+				.stripHTML(this.$helper.string.unescapeHTML(text))
+				.trim();
 		}
 	}
 };
@@ -148,7 +149,7 @@ export default {
 	background: var(--color-white);
 	box-shadow: var(--shadow);
 	border-radius: var(--rounded);
-	height: var(--item-height);
+	min-height: var(--item-height);
 	container-type: inline-size;
 }
 .k-item:has(a:focus) {
@@ -214,7 +215,6 @@ export default {
 	--item-button-width: auto;
 
 	display: grid;
-	height: var(--item-height);
 	align-items: center;
 	grid-template-columns: 1fr auto;
 }
@@ -226,13 +226,13 @@ export default {
 	--ratio: 1/1;
 	border-start-start-radius: var(--rounded);
 	border-end-start-radius: var(--rounded);
-	height: var(--item-height);
+	height: 100%;
 }
 .k-item[data-layout="list"] .k-item-content {
 	display: flex;
 	min-width: 0;
-	white-space: nowrap;
-	gap: var(--spacing-2);
+	flex-wrap: wrap;
+	column-gap: var(--spacing-4);
 	justify-content: space-between;
 }
 .k-item[data-layout="list"] .k-item-title,
@@ -241,23 +241,6 @@ export default {
 	white-space: nowrap;
 	text-overflow: ellipsis;
 }
-.k-item[data-layout="list"] .k-item-title {
-	flex-shrink: 1;
-}
-.k-item[data-layout="list"] .k-item-info {
-	flex-shrink: 2;
-}
-
-@container (max-width: 30rem) {
-	.k-item[data-layout="list"] .k-item-title {
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
-	}
-	.k-item[data-layout="list"] .k-item-info {
-		display: none;
-	}
-}
 
 .k-item[data-layout="list"] .k-sort-button {
 	--button-width: calc(1.5rem + var(--spacing-1));
@@ -306,7 +289,6 @@ export default {
 	border-start-start-radius: var(--rounded);
 	border-end-start-radius: var(--rounded);
 	aspect-ratio: auto;
-	height: var(--item-height);
 }
 .k-item[data-layout="cardlets"] .k-item-content {
 	grid-area: content;