chore: fix invalid dom nesting (#8451)

This PR fixes all `invalidDomNesting` errors we're getting in our tests.
The culprit was the `Badge` icon we use, which wrapped its children in a
div. When that's used as a child of a `p` tag, that'd cause this to
trigger.

What I've done is to change the wrapping element to a span instead. The
Badge itself uses an `display: inline-flex`, so divs and spans should be
treated the same, meaning there's no visual change for this.

frontend/src/component/common/Badge/Badge.tsx

@@ -120,7 +120,7 @@ export const Badge: FC<IBadgeProps> = forwardRef(
                     children !== undefined &&
                     children !== ''
                 }
-                show={<div>{children}</div>}
+                show={<span>{children}</span>}
             />
             <ConditionallyRender
                 condition={Boolean(icon) && Boolean(iconRight)}