From a5e51365916803682efe3c9ec2c7c04dffcbfd92 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Mon, 15 Jun 2026 23:23:33 +0200
Subject: [PATCH] fix(activities): let temporal filter pills respect palette
 radius + shadow

Drop the hardcoded rounded-full on the temporal filter pills so they
inherit each palette's --radius (square under neobrut, gently rounded
elsewhere) and the theme's offset drop-shadow, instead of overriding it.
Add pb-1 pr-1 so neobrut's hard 4px shadow isn't clipped by the
overflow-x-auto scroll box.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 src/modules/events/components/TemporalFilterBar.vue | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/modules/events/components/TemporalFilterBar.vue b/src/modules/events/components/TemporalFilterBar.vue
index f66ce10..aadbc3d 100644
--- a/src/modules/events/components/TemporalFilterBar.vue
+++ b/src/modules/events/components/TemporalFilterBar.vue
@@ -26,13 +26,16 @@ const options: { value: TemporalFilter; labelKey: string }[] = [
 </script>
 
 <template>
-  <div class="flex gap-2 overflow-x-auto" style="-ms-overflow-style: none; scrollbar-width: none;">
+  <!-- pb-1 pr-1 keep the theme's offset drop-shadow (neobrut casts a hard 4px
+       shadow down and to the right) from being clipped at the scroll box's
+       bottom/right edges (overflow-x-auto forces overflow-y to auto). -->
+  <div class="flex gap-2 overflow-x-auto pb-1 pr-1" style="-ms-overflow-style: none; scrollbar-width: none;">
     <Button
       v-for="option in options"
       :key="option.value"
       :variant="props.modelValue === option.value ? 'default' : 'outline'"
       size="sm"
-      class="rounded-full text-xs shrink-0"
+      class="text-xs shrink-0"
       @click="emit('update:modelValue', option.value)"
     >
       {{ t(option.labelKey) }}
@@ -45,7 +48,7 @@ const options: { value: TemporalFilter; labelKey: string }[] = [
     <Button
       :variant="props.showPast ? 'default' : 'outline'"
       size="sm"
-      class="rounded-full text-xs shrink-0 gap-1.5"
+      class="text-xs shrink-0 gap-1.5"
       @click="emit('toggle-past')"
     >
       <History class="w-3 h-3" />