Rearange UI elements and make categories expandable

[matbmapspeople]

What?

The first scope of this merge request is to shuffle around the UI elements - also based on device that is using Web App. Figma design link: https://www.figma.com/design/y2Bq918f4KKMpIIY7ibSkE/MapTemplate?node-id=4120-2606

The second scope of this merge request is to remove horizontal categories and make them vertical. Then after clicking one of them we should have a list of Locations that have this category assigned.

How?

For the categories part

Inside Categories.jsx:

• I removed all the code related to horizontal scrolling: buttons disabled states, updateScrollButtonsState function and disabled state listeners.
• Instead, I added a custom made div that consists category img and displayName.

Inside Categories.scss:

• I added all relevant styling to match Figma design.

Inside Search.jsx:

• I added logic to listen for clicks outside the search input field to toggle categories list.

Inside Search.scss:

• I added relevant styling for back button.

For the UI shuffling part:

• Repositioned zoom control
• Added desktop specific styling for:
  • ViewMode switch
  • Venue Selector
• Handled desktop styling for office demo

[matbmapspeople]

I tried to resolve all the comments @ammapspeople. It's ready for re-review.

[ammapspeople]

1. How come the back button texts are different from the category name?

Kapture.2025-03-11.at.15.39.41.mp4

2. Since categories don't show up at all on smaller screens, should this pull request point towards a feature branch instead of main?

[matbmapspeople]

1. How come the back button texts are different from the category name?

Kapture.2025-03-11.at.15.39.41.mp4
2. Since categories don't show up at all on smaller screens, should this pull request point towards a feature branch instead of main?

Fixed categories and back button name 😄 @ammapspeople

[matbmapspeople]

We've addressed all the comments now @ammapspeople 😄

[ammapspeople]

Approved with one small suggestion 🏁