Angular Toolbar Responsiveness Fix

I built an Angular 15 app with a hand-coded toolbar that looks fine on desktop but loses alignment and spacing on smaller screens. I need you to make that toolbar fully responsive for both tablet and mobile viewports.

Key points
• Keep the current look and feel yet solve the alignment issues and spacing problems identified on non-desktop widths.
• When space runs short, the toolbar should collapse into a dropdown menu—no multi-line wrapping or icon-only mode.
• Use best-practice techniques that suit Angular: plain CSS/SCSS with Flexbox or Grid, and BreakpointObserver where helpful. No Angular Material components; the toolbar is custom.
• Verify behaviour in Chrome, Safari and Edge, checking both desktop emulation and real mobile devices.

Deliverables
1. Updated toolbar integrated back into the existing Angular project.
2. Clean, well-commented code plus a short note explaining what changed and why, so I can maintain it later.
3. Confirmation that it works smoothly across the tested browsers and breakpoints.

The scope is focused and time-sensitive: please be ready to start right away and wrap up within two days.