Optimize admin overview for mobile #139

[Charlesnorris509]

Changes Made
Responsive Grid Layout:

Updated the .grid component to dynamically adjust the column layout based on breakpoints:
Single-column layout for tablets and smaller devices (max-width: md).
Two-column layout for laptops (max-width: lg).
Column Adjustments:

Modified .col-5, .col-7, and .col-12 to span the full width of the container on smaller screens for better readability.
Card Component Enhancements:

Added padding, background color, border radius, and box shadow for better aesthetics.
Adjusted padding for smaller screens (max-width: sm).
Song Description Section:

Made the following adjustments for smaller screens:
Reduced the font size for the title (.song-title) and song info.
Ensured proper alignment and spacing of elements.
Disk Component:

Ensured that the album cover (.curr-song) is responsive with max-width: 100% and height: auto.
Song Queue Styling:

Adjusted the padding and typography for the .song-queue__title to be more compact on smaller screens.
Scrollbar Customization:

Updated ::-webkit-scrollbar styles to maintain consistency across devices while ensuring usability.
SCSS Utility Mixins:

Utilized @include media-max mixin with breakpoints defined in src/styles/base/_breakpoints.scss to apply responsive styles effectively.

[IkeHunter]

Hey @Charlesnorris509! The card design for the player is an interesting concept, originally it wasn't included in the Figma wireframe (embedded below), but I'll talk with some of the other tech leads about changing the design, I think it's kinda cool.

Some things to note:

• Make sure the card changes color based on light/dark mode. You can test this with the toggle on the bottom left. More info about working with the light/dark mode css vars/mixins: https://github.com/ufosc/Jukebox-Frontend/blob/main/docs/Design-System.md#color-summary
• The player looks better on a tablet layout, but still breaks on mobile (mainly due to the disk)

I'll be pushing some updates in the next few minutes that will add some adjustments to the overview page for mobile, and will include some docs on using the responsive mixins (I cleaned them up a bit to make them more straightforward to use too). I'll keep this PR open for now, and I'll let you know when I've pushed my updates.

Here's the original wireframe for the overview page (I'll update the wireframe if we decide to go the card route for the player):

[IkeHunter]

Just pushed the changes on my end, the new responsive dev docs are here: https://github.com/ufosc/Jukebox-Frontend/blob/main/docs/Design-System.md#responsive-design.

Something that might make it a bit easier to do mobile dev is I modified the sidebar to slide in/out on mobile, so that won't get in the way now.