diff --git a/component-library/src/components/custom/BccReact/BccReact.css b/component-library/src/components/custom/BccReact/BccReact.css
index 4ad6d043..a0086912 100644
--- a/component-library/src/components/custom/BccReact/BccReact.css
+++ b/component-library/src/components/custom/BccReact/BccReact.css
@@ -1,24 +1,24 @@
@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;
}
.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 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;
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 +81,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 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;
}
.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"
>
-