From 02d7b59f52243e7854f7e8ba3de1c8b04ae60bb1 Mon Sep 17 00:00:00 2001
From: Edvin Covaci <edvincov28@gmail.com>
Date: Mon, 19 Oct 2026 10:44:01 +0200
Subject: [PATCH 1/3] Align BccReact sizes with the design

---
 .../src/components/custom/BccReact/BccReact.css    | 14 ++++++++------
 .../src/components/custom/BccReact/BccReact.vue    |  4 ++--
 .../BccReact/__snapshots__/BccReact.spec.ts.snap   |  2 +-
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/component-library/src/components/custom/BccReact/BccReact.css b/component-library/src/components/custom/BccReact/BccReact.css
index 4ad6d043..ea94b617 100644
--- a/component-library/src/components/custom/BccReact/BccReact.css
+++ b/component-library/src/components/custom/BccReact/BccReact.css
@@ -1,24 +1,25 @@
 @layer components {
 	.bcc-react {
-		@apply center relative w-full overflow-visible;
+		@apply center relative h-8 w-full overflow-visible;
 	}
 	.bcc-react-toggle {
 		@apply flex shrink-0 cursor-pointer items-center justify-center rounded-full transition;
 	}
+	/* 32px row; the 2px padding, offset by a negative margin, keeps the pill shadows from being clipped */
 	.bcc-react-list {
-		@apply hide-scrollbar ml-2 flex h-10 max-w-fit flex-1 items-center gap-1.5 rounded-full;
+		@apply hide-scrollbar -my-0.5 ml-2 flex h-9 max-w-fit flex-1 items-center gap-1.5 rounded-full py-0.5;
 	}
 	.bcc-react-list--limited {
 		@apply min-w-0 overflow-x-auto;
 		max-width: calc(var(--bcc-react-max-visible) * 3.25rem + (var(--bcc-react-max-visible) - 1) * 0.375rem);
 	}
 	.bcc-react-empty {
-		@apply heading-xs flex items-center;
+		@apply heading-sm flex items-center;
 	}
 
 	.bcc-react-selector-container {
 		@apply absolute z-50 h-9;
-		@apply top-11 origin-top-left;
+		@apply top-9 origin-top-left;
 	}
 
 	.bcc-react-selector-container--top {
@@ -81,12 +82,13 @@
 	}
 
 	.bcc-react-emoji-list-item {
-		@apply clickable center my-1 flex h-8 min-w-7 shrink-0 gap-1 rounded-full px-2 py-1 drop-shadow transition-all hover:scale-105;
+		@apply clickable center shadow-raised flex h-8 min-w-7 shrink-0 gap-1 rounded-full px-2 py-1 transition-all hover:scale-105;
 		/* Default --not-selected */
 		@apply bg-accent-gray-subtler-default text-default;
 	}
 	.bcc-react-emoji-list-item .bcc-react-count {
-		@apply label-xs leading-none;
+		@apply label-xs;
+		line-height: var(--leading-md);
 	}
 	.bcc-react-emoji-list-item .bcc-react-emoji {
 		@apply text-lg leading-none;
diff --git a/component-library/src/components/custom/BccReact/BccReact.vue b/component-library/src/components/custom/BccReact/BccReact.vue
index e2243b6a..7088e849 100644
--- a/component-library/src/components/custom/BccReact/BccReact.vue
+++ b/component-library/src/components/custom/BccReact/BccReact.vue
@@ -136,8 +136,8 @@ onMounted(() => {
 				:class="[top ? 'rounded-b-full' : 'rounded-t-full']"
 				@click="show = !show"
 			>
-				<AddReactionFillIcon v-if="show" class="size-5" />
-				<AddReactionIcon v-else class="size-5" />
+				<AddReactionFillIcon v-if="show" class="size-6" />
+				<AddReactionIcon v-else class="size-6" />
 			</button>
 
 			<div
diff --git a/component-library/src/components/custom/BccReact/__snapshots__/BccReact.spec.ts.snap b/component-library/src/components/custom/BccReact/__snapshots__/BccReact.spec.ts.snap
index ba7679ff..24a3004a 100644
--- a/component-library/src/components/custom/BccReact/__snapshots__/BccReact.spec.ts.snap
+++ b/component-library/src/components/custom/BccReact/__snapshots__/BccReact.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`BccReact > renders reactions 1`] = `
 "<div class="bcc-react">
-  <transition-group-stub name="bcc-fade" appear="false" persisted="false" css="true"><button class="bcc-react-toggle rounded-t-full"><svg aria-hidden="true" viewBox="0 -960 960 960" fill="currentColor" class="size-5">
+  <transition-group-stub name="bcc-fade" appear="false" persisted="false" css="true"><button class="bcc-react-toggle rounded-t-full"><svg aria-hidden="true" viewBox="0 -960 960 960" fill="currentColor" class="size-6">
         <path d="M480-480Zm0 400q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q33 0 65 5t62 15q23 8 29 23.5t1 30.5q-5 15-18.5 23.5T588-781q-26-9-52.5-14t-55.5-5q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160q133 0 226.5-93.5T800-480q0-18-2-36t-6-35q-5-19 5-31t25-15q15-3 29.5 4.5T871-564q5 20 7 41t2 43q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm320-680h-40q-17 0-28.5-11.5T720-800q0-17 11.5-28.5T760-840h40v-40q0-17 11.5-28.5T840-920q17 0 28.5 11.5T880-880v40h40q17 0 28.5 11.5T960-800q0 17-11.5 28.5T920-760h-40v40q0 17-11.5 28.5T840-680q-17 0-28.5-11.5T800-720v-40ZM620-520q25 0 42.5-17.5T680-580q0-25-17.5-42.5T620-640q-25 0-42.5 17.5T560-580q0 25 17.5 42.5T620-520Zm-280 0q25 0 42.5-17.5T400-580q0-25-17.5-42.5T340-640q-25 0-42.5 17.5T280-580q0 25 17.5 42.5T340-520Zm140 260q58 0 107-28t79-76q6-12-1-24t-21-12H316q-14 0-21 12t-1 24q30 48 79.5 76T480-260Z"></path>
       </svg></button>
     <div class="bcc-react-list"><button class="bcc-react-emoji-list-item"><span class="bcc-react-emoji">😃</span><span class="bcc-react-count">4</span></button><button class="bcc-react-emoji-list-item"><span class="bcc-react-emoji">👍</span>

From 02738ef5356176bd80915b6934dbe2ed8af94d8b Mon Sep 17 00:00:00 2001
From: Edvin Covaci <edvincov28@gmail.com>
Date: Mon, 19 Oct 2026 11:29:40 +0200
Subject: [PATCH 2/3] Add a border to BccReact pills in dark mode

---
 component-library/src/components/custom/BccReact/BccReact.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/component-library/src/components/custom/BccReact/BccReact.css b/component-library/src/components/custom/BccReact/BccReact.css
index ea94b617..7ede68db 100644
--- a/component-library/src/components/custom/BccReact/BccReact.css
+++ b/component-library/src/components/custom/BccReact/BccReact.css
@@ -82,7 +82,7 @@
 	}
 
 	.bcc-react-emoji-list-item {
-		@apply clickable center shadow-raised flex h-8 min-w-7 shrink-0 gap-1 rounded-full px-2 py-1 transition-all hover:scale-105;
+		@apply clickable center shadow-raised dark:border-default flex h-8 min-w-7 shrink-0 gap-1 rounded-full px-2 py-1 transition-all hover:scale-105 dark:border;
 		/* Default --not-selected */
 		@apply bg-accent-gray-subtler-default text-default;
 	}

From 2bea9c0f76ae3290e22ee27161f65c02db97cc69 Mon Sep 17 00:00:00 2001
From: Edvin Covaci <edvincov28@gmail.com>
Date: Wed, 21 Oct 2026 08:48:25 +0200
Subject: [PATCH 3/3] Remove negative margin from BccReact list

---
 component-library/src/components/custom/BccReact/BccReact.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/component-library/src/components/custom/BccReact/BccReact.css b/component-library/src/components/custom/BccReact/BccReact.css
index 7ede68db..a0086912 100644
--- a/component-library/src/components/custom/BccReact/BccReact.css
+++ b/component-library/src/components/custom/BccReact/BccReact.css
@@ -5,9 +5,8 @@
 	.bcc-react-toggle {
 		@apply flex shrink-0 cursor-pointer items-center justify-center rounded-full transition;
 	}
-	/* 32px row; the 2px padding, offset by a negative margin, keeps the pill shadows from being clipped */
 	.bcc-react-list {
-		@apply hide-scrollbar -my-0.5 ml-2 flex h-9 max-w-fit flex-1 items-center gap-1.5 rounded-full py-0.5;
+		@apply hide-scrollbar ml-2 flex max-w-fit flex-1 items-center gap-1.5 rounded-full py-0.5;
 	}
 	.bcc-react-list--limited {
 		@apply min-w-0 overflow-x-auto;