Angular Toolbar Responsiveness Fix -- 2

I need a quick, clean update to the custom toolbar in my Angular 15 app. Right now, elements spill off-screen on smaller viewports; your job is to make everything fit and behave correctly on both mobile and tablet, in portrait and landscape.

What I expect:
• Use CSS Flex/Grid, media queries, or Angular CDK BreakpointObserver—whichever offers the simplest, most maintainable solution.
• Preserve the look and feel of the current desktop version; no redesigns, just smart scaling and spacing.
• Test in Chrome, Safari, and Edge using their mobile simulators (plus any real devices you have) to confirm alignment, spacing, and tap-friendliness.
• Deliver the updated toolbar integrated into the existing codebase with concise implementation notes so I can follow the changes.

Keep the code tidy (SCSS preferred), comment where logic isn’t obvious, and stick to best practices so future updates stay painless. If you can tackle this in the next two days, let’s get started.