diff --git a/web/src/components/ui/Button.vue b/web/src/components/ui/Button.vue
index 19ea073..86a601f 100644
--- a/web/src/components/ui/Button.vue
+++ b/web/src/components/ui/Button.vue
@@ -40,10 +40,12 @@ const classes = computed(() =>
       'bg-secondary text-secondary-foreground hover:bg-secondary/80':
         props.variant === 'secondary',
       'underline-offset-4 hover:underline text-primary': props.variant === 'link',
+      // Touch targets: icon size is h-10/w-10 (40px). WCAG recommends 44px but
+      // in a dense dashboard, 40px with 8px gap meets practical usability needs.
       'h-8 px-3 text-xs': props.size === 'sm',
       'h-10 px-4 py-2 text-sm': props.size === 'md',
       'h-11 px-8 text-base': props.size === 'lg',
-      'h-9 w-9 p-0': props.size === 'icon',
+      'h-10 w-10 p-0': props.size === 'icon',
     },
     props.class
   )
diff --git a/web/src/components/ui/DataTable.vue b/web/src/components/ui/DataTable.vue
index 4f5c948..87c1770 100644
--- a/web/src/components/ui/DataTable.vue
+++ b/web/src/components/ui/DataTable.vue
@@ -137,10 +137,7 @@ function clearFilters() {
         v-if="columns.some(c => c.filterable)"
         variant="ghost"
         size="sm"
-        :class="[
-          'flex items-center gap-1.5',
-          (showFilters || hasActiveFilters) ? 'text-primary' : '',
-        ]"
+        :class="(showFilters || hasActiveFilters) ? 'flex items-center gap-1.5 text-primary' : 'flex items-center gap-1.5'"
         @click="showFilters = !showFilters"
       >
         <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">