fix(ui): improving web dashboard layout and elements

[nerometa]

This pull request makes several improvements to the UI layout and styling for cards, badges, category chips, and sidebar elements in the application. The changes focus on enhancing the visual structure, consistency, and responsiveness of various components, especially cards and category chips, as well as refining sidebar sizing and spacing.

Card and Layout Improvements

Refactored the .card component to use a flex column layout with full height, and introduced a .card-body class for better content organization inside cards. Updated the HTML to wrap card content in .card-body for improved structure. [1] [2] [3]

Category Chips

Added a .category-chips class to improve the layout and scrolling behavior of category quick-search chips, and updated the HTML to use this class. [1] [2]

Indents for List in Messages

Add padding indent within .message-bubble elements for better readability of lists in messages.

Badges

Updated .badge elements to have width: max-content for better sizing.

Sidebar and Layout Adjustments:

• Reduced sidebar logo and text sizes, and adjusted spacing for a more compact sidebar appearance. [1] [2]
• Fix icon sizes in theme switcher for consistency, including padding, width, and font inheritance.