Avoid overflow on /rules page (#8608)

If I have a rule with a very long name it will force the table to be wider then the viewport.
This forces the browser to wrap long rule names and uses smaller font, to avoid having overflow.

Signed-off-by: Łukasz Mierzwa <l.mierzwa@gmail.com>

web/ui/react-app/src/pages/rules/RulesContent.tsx

@@ -61,14 +61,16 @@ export const RulesContent: FC<RouteComponentProps & RulesContentProps> = ({ resp
                 <tr>
                   <td colSpan={3}>
                     <a href={'#' + g.name}>
-                      <h2 id={g.name}>{g.name}</h2>
+                      <h4 id={g.name} className="text-break">
+                        {g.name}
+                      </h4>
                     </a>
                   </td>
                   <td>
-                    <h2>{formatRelative(g.lastEvaluation, now())}</h2>
+                    <h4>{formatRelative(g.lastEvaluation, now())}</h4>
                   </td>
                   <td>
-                    <h2>{humanizeDuration(parseFloat(g.evaluationTime) * 1000)}</h2>
+                    <h4>{humanizeDuration(parseFloat(g.evaluationTime) * 1000)}</h4>
                   </td>
                 </tr>
               </thead>