Merge pull request #5260 from nextcloud-libraries/fix/5198/list-item-…

…cropped

fix(NcListItem): compensate added margin for list items

src/components/NcListItem/NcListItem.vue

@@ -737,12 +737,12 @@ export default {
 	flex: 0 0 auto;
 	justify-content: flex-start;
 	padding: 8px 10px;
-	// 4px padding for the focus-visible styles
+	// 4px padding for the focus-visible styles. Width is reduced to compensate it
 	margin: 4px;
+	width: calc(100% - 8px);
 	// Fix for border-radius being too large for 3-line entries like in Mail
 	// 44px avatar size / 2 + 8px padding, and 2px for better visual quality
 	border-radius: 32px;
-	width: 100%;
 	cursor: pointer;
 	transition: background-color var(--animation-quick) ease-in-out;
 	list-style: none;