fix(unifiedsearch): Simplify and correct thumbnail styles

Ensure that the if a preview is available the maximum sizes are
respected (clickable area).

Signed-off-by: Ferdinand Thiessen <[email protected]>

Author: susnux

core/src/components/UnifiedSearch/SearchResult.vue

@@ -3,18 +3,18 @@
  - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 <template>
-	<NcListItem class="result-items__item"
+	<NcListItem class="result-item"
 		:name="title"
 		:bold="false"
 		:href="resourceUrl"
 		target="_self">
 		<template #icon>
 			<div aria-hidden="true"
-				class="result-items__item-icon"
+				class="result-item__icon"
 				:class="{
-					'result-items__item-icon--rounded': rounded,
-					'result-items__item-icon--no-preview': !isValidIconOrPreviewUrl(thumbnailUrl),
-					'result-items__item-icon--with-thumbnail': isValidIconOrPreviewUrl(thumbnailUrl),
+					'result-item__icon--rounded': rounded,
+					'result-item__icon--no-preview': !isValidIconOrPreviewUrl(thumbnailUrl),
+					'result-item__icon--with-thumbnail': isValidIconOrPreviewUrl(thumbnailUrl),
 					[icon]: !isValidIconOrPreviewUrl(icon),
 				}"
 				:style="{
@@ -101,72 +101,59 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@use "sass:math";
-$clickable-area: 44px;
-$margin: 10px;
-
-.result-items {
-	&__item:deep {
-
-		a {
-			border: 2px solid transparent;
-			border-radius: var(--border-radius-large) !important;
-
-			&--focused {
-				background-color: var(--color-background-hover);
-			}
-
-			&:active,
-			&:hover,
-			&:focus {
-				background-color: var(--color-background-hover);
-				border: 2px solid var(--color-border-maxcontrast);
-			}
+.result-item {
+	:deep(a) {
+		border: 2px solid transparent;
+		border-radius: var(--border-radius-large) !important;
+
+		&:active,
+		&:hover,
+		&:focus {
+			background-color: var(--color-background-hover);
+			border: 2px solid var(--color-border-maxcontrast);
+		}
 
-			* {
-				cursor: pointer;
-			}
+		* {
+			cursor: pointer;
+		}
+	}
 
+	&__icon {
+		overflow: hidden;
+		width: var(--default-clickable-area);
+		height: var(--default-clickable-area);
+		border-radius: var(--border-radius);
+		background-repeat: no-repeat;
+		background-position: center center;
+		background-size: 32px;
+
+		&--rounded {
+			border-radius: calc(var(--default-clickable-area) / 2);
 		}
 
-		&-icon {
-			overflow: hidden;
-			width: $clickable-area;
-			height: $clickable-area;
-			border-radius: var(--border-radius);
-			background-repeat: no-repeat;
-			background-position: center center;
+		&--no-preview {
 			background-size: 32px;
+		}
 
-			&--rounded {
-				border-radius: math.div($clickable-area, 2);
-			}
-
-			&--no-preview {
-				background-size: 32px;
-			}
-
-			&--with-thumbnail {
-				background-size: cover;
-			}
+		&--with-thumbnail {
+			background-size: cover;
+		}
 
-			&--with-thumbnail:not(&--rounded) {
-				// compensate for border
-				max-width: $clickable-area - 2px;
-				max-height: $clickable-area - 2px;
-				border: 1px solid var(--color-border);
-			}
+		&--with-thumbnail:not(#{&}--rounded) {
+			border: 1px solid var(--color-border);
+			// compensate for border
+			max-height: calc(var(--default-clickable-area) - 2px);
+			max-width: calc(var(--default-clickable-area) - 2px);
+		}
 
-			img {
-				// Make sure to keep ratio
-				width: 100%;
-				height: 100%;
+		img {
+			// Make sure to keep ratio
+			width: 100%;
+			height: 100%;
 
-				object-fit: cover;
-				object-position: center;
-			}
+			object-fit: cover;
+			object-position: center;
 		}
-
 	}
 }
 </style>