style: improve responsiveness and ux

[makors]

Proposed changes

The following changes make Ion more responsive across all devices and improve the UX. Most changes are given a before and after image to hopefully make reviewing this PR easier, but very minor changes don't.

dashboard.scss

• Removed unnecessary left padding on all h2 tags which made some titles look strange (before / after)
• Changed media queries for action buttons on the dashboard, allowing them to fit properly on mobile devices (before / after)
• Removed unnecessary margin-bottom which took up unused space (before / after)
• Fixed action buttons on club announcements page to not overflow message and float to the left (before / after)

dashboard.widgets.scss

• Fixed width of "Show Extra Widgets" button on tablet-sized screens which caused lots of empty space on the dashboard in certain cases (before / after)

events.scss

• Fixed the width of events so that they didn't overflow horizontally (before / after)
• Changed the boundaries from the vertical to the horizontal week view, fixing an issue with overflow (before / after)
• Made the position of buttons responsive like how it is on the dashboard (before / after)
• Changed table entries to align to the top of the element (through vertical-align: top;)
• Fixed the status display of events on the dashboard (before / after)

page_base.scss

• Changed padding and margins for the right header actions to account for the removed logout button (see below)

printing.scss

• Changed the width of the printing form (including the notes at the bottom) to 100% on mobile devices to fully utilize the available space (before / after)

responsive.core.scss

• Changed the width of the search bar on tablet-sized screens to fully utilize the available space (before / after)
• Stopped showing the BetterStack status icon and link in the header when mobile navigation is open (before / after)
• Fixed the color of mobile navigation which is visible when dark mode is enabled (before / after)
• Stopped displaying app and user icons (the icons on the right) when the mobile navigation menu is open. It takes up too much space (which could be better used by the search bar) whilst being already visible with the mobile navigation menu closed. (before / after)

responsive.scss

• Fixed widgets and announcements to display properly on tablet-sized screens (same issue as the padding earlier)

schedule.scss

• Added a max-width on the schedule page for consistency across events, enrichment, and schedule
• Fixed line overflow issues with the schedule week table (before / after)

welcome.scss

• Fixed the positioning of the Ion logo on the welcome screen (before / after)

bus.scss

• Changed the width of the bus selector (used by admin accounts) as to not overlap with the bus announcements (before / after)

nav.html

• Changed the position of the 8th period alert icon to the right of the nav item for consistency with the event icon (before / after)

page_with_header.html and halloween.css

• Removed the logout icon button (the one under the user menu still exists). Done for UX and simplicity. (before / after)

home.html (both of them)

• Removed extra margin-top on the events and enrichment page (before / after)

month.html

• Changed the formatting from multiple tables (in rows) to one big table for consistency in size between rows

Brief description of rationale

Having a responsive and mobile-first UI is a necessity for Ion. Rationale for individual fixes is within the proposed changes for clarity.

[coveralls]

coverage: 79.392%. remained the same
when pulling 75d51d4 on makors:css-fixes
into ad8c249 on tjcsl:dev.