UI - Improve Mobile Responsiveness of Rules

Hi @taineriley1

As per our conversation, some parts of Rules aren't very responsive. The below are my suggestions for improving the mobile view of Rules:

1. Shrink the Rules logo and user avatar / login button, aligning them at the top of the header as shown below

2. Lower the size of the breadcrumb's text and lighten the text colour to enforce a visual hierarchy
   (Note: i've added a suggestion for shortening the breadcrumb here: https://github.com/SSWConsulting/SSW.Rules/issues/392)

3. Lower the font size of Rules titles for mobile

4. Lower the font size and lighten the colour of the "Last edited by" line
   (I'd also suggest trying to shorten this text, example shown below)

5. Keep the buttons arranged horizontally, below the title, and center everything as shown below

Figure: Bad example - header, breadcrumb, and title are killing all the space.

Figure: Good example - Resized + positioned elements use space more efficiently

6. When viewing a category - reduce the margin / padding of text in the rules to match the category description's spacing (shown below)

Figure: Bad example - Too much white space on sides of rule text (on category pages)

Figure: Good example - Category description text / padding / ideal 30-40 characters per line
(The padding isn't an issue on the individual rule's pages either)

AB#63239

Start by locating the Rules header, breadcrumb, title, metadata, buttons, and category-page rule content, then compare their mobile layouts with the supplied screenshots. Implement the listed responsive sizing, alignment, colour, spacing, and padding changes, and verify both category and individual rule pages at mobile widths.