Remove shift caused by the Exclude filter button (#2265)

Previously, the Exclude button was removed from the the element tree
entirely until the group is hovered. Only when the group is hovered, the
button element was being switched to a proper display form. This has
caused the layout shift which was very visible when quickly moving
cursor over the filter options.

This commit makes it so that the Exclude button is always in its proper
display form (flex), however is transparent until the group is hovered.
The repeated transparency classes were removed from the icon as well to
prevent jarringly-looking double transition.

apps/frontend/src/pages/search/[searchProjectType].vue

@@ -106,13 +106,10 @@
                       !negativeFilterSelected(category)
                     "
                     v-tooltip="negativeFilterSelected(category) ? 'Include' : 'Exclude'"
-                    class="hidden items-center justify-center gap-2 rounded-xl bg-transparent px-2 py-1 text-sm font-semibold text-secondary transition-all hover:bg-button-bg hover:text-red active:scale-[0.96] group-hover:flex"
+                    class="flex items-center justify-center gap-2 rounded-xl bg-transparent px-2 py-1 text-sm font-semibold text-secondary opacity-0 transition-all hover:bg-button-bg hover:text-red active:scale-[0.96] group-hover:opacity-100"
                     @click="toggleNegativeFilter(category)"
                   >
-                    <BanIcon
-                      class="h-4 w-4 opacity-0 transition-opacity group-hover:opacity-100"
-                      aria-hidden="true"
-                    />
+                    <BanIcon class="h-4 w-4" aria-hidden="true" />
                   </button>
                 </div>
               </div>