aiolabs/webapp
8
0
Fork 0
Code Issues 65 Pull requests Projects Releases Packages Wiki Activity Actions

fix(activities): let temporal filter pills respect palette radius + shadow

Browse source 
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>
This commit is contained in:
Padreug 2026-06-15 23:23:33 +02:00
commit 1f68660783
1 changed files with 6 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/modules/events/components/TemporalFilterBar.vue
View file

@ -26,13 +26,16 @@ const options: { value: TemporalFilter; labelKey: string }[] = [
</script> </script>
<template> <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 <Button
v-for="option in options" v-for="option in options"
:key="option.value" :key="option.value"
:variant="props.modelValue === option.value ? 'default' : 'outline'" :variant="props.modelValue === option.value ? 'default' : 'outline'"
size="sm" size="sm"
class="rounded-full text-xs shrink-0" class="text-xs shrink-0"
@click="emit('update:modelValue', option.value)" @click="emit('update:modelValue', option.value)"
> >
{{ t(option.labelKey) }} {{ t(option.labelKey) }}
@ -45,7 +48,7 @@ const options: { value: TemporalFilter; labelKey: string }[] = [
<Button <Button
:variant="props.showPast ? 'default' : 'outline'" :variant="props.showPast ? 'default' : 'outline'"
size="sm" size="sm"
class="rounded-full text-xs shrink-0 gap-1.5" class="text-xs shrink-0 gap-1.5"
@click="emit('toggle-past')" @click="emit('toggle-past')"
> >
<History class="w-3 h-3" /> <History class="w-3 h-3" />