fix: styling of rulenames badges wraps properly

[mickol34]

Your checklist for this pull request

• I've read the contributing guideline.
• I've tested my changes by building and running mquery, and testing changed functionality (if applicable)
• I've added automated tests for my change (if applicable, optional)
• I've updated documentation to reflect my change (if applicable)

What is the current behaviour?
Currently badges in query result page go out of page when given too long names, as per https://user-images.githubusercontent.com/20182642/82444130-6a327c00-9aab-11ea-8693-63cf5dcb0cce.gif #196

What is the new behaviour?

Now badges wrap properly to new line with additional text linebreaks.

Test plan

Try to search for a query with multiple rule names, some of them very long and try to match many files to see if multiple result search also works properly. Try resizing the window, zooming in and out and try to find unexpected/unwished for behavior.

Closing issues

fixes #196

[mickol34]

Current behavior with singular search shown below.
Screencast from 2024-10-09 10-06-44.webm

[msm-cert]

Looks good I think!

I hope the filename won't get cut too often instead 🤔