From db1ea52563eaa7fd766d7e82668bd59587cb7f42 Mon Sep 17 00:00:00 2001
From: "Jan C. Borchardt" <925062+jancborchardt@users.noreply.github.com>
Date: Wed, 27 May 2026 13:57:39 +0200
Subject: [PATCH] fix(teams): circular Talk previews, border-radius-small for
 Files previews

- Add provider-based class (`circle-details-section--{providerId}`) to resource sections so styling can be scoped per provider
- Apply `border-radius-pill` to Talk conversation images (circular)
- Apply `border-radius-small` to Files image previews

AI-assisted: Claude Code (Sonnet 4.6)
Signed-off-by: Jan C. Borchardt <925062+jancborchardt@users.noreply.github.com>
---
 src/components/CircleDetails.vue | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/CircleDetails.vue b/src/components/CircleDetails.vue
index 030940a83..dd2b69dcc 100644
--- a/src/components/CircleDetails.vue
+++ b/src/components/CircleDetails.vue
@@ -210,7 +210,11 @@
 				</template>
 
 				<section v-else>
-					<div v-for="(group, providerId) in groupedResources" :key="providerId" class="circle-details-section">
+					<div
+						v-for="(group, providerId) in groupedResources"
+						:key="providerId"
+						class="circle-details-section"
+						:class="`circle-details-section--${providerId}`">
 						<div class="section-header">
 							<ContentHeading>{{ group.name }}</ContentHeading>
 						</div>
@@ -1170,6 +1174,15 @@ export default {
 					height: 32px;
 				}
 			}
+
+		}
+
+		&.circle-details-section--talk .item-list :deep(img.resource__icon) {
+			border-radius: var(--border-radius-pill);
+		}
+
+		&.circle-details-section--files .item-list :deep(img.resource__icon) {
+			border-radius: var(--border-radius-small);
 		}
 
 		.avatar-list {