[docs-infra] Uplift the Algolia search modal design

[danilo-leal]

• I have followed (at least) the PR section of the contributing guide.

This PR adds several design adjustments to the Algolia search modal. Felt like it needed a little bit of a revision there, mainly as it was sort of broken in dark mode with the low background opacity. Ended up also taking advantage of the opportunity to refresh the default content list, displaying stuff about every MUI product as opposed to just Material UI-focused ones.

https://deploy-preview-40186--material-ui.netlify.app/ — And, here are visual diffs for an easier grasp of the changes:

Before	After

[mui-bot]

Netlify deploy preview

https://deploy-preview-40186--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against d820c76

[flaviendelangle]

I liked the fact that all the items were visible without scrolling
Even if the new one is more polished

[zanivan]

I resonate with @flaviendelangle on this! Even though it looks more polished and consistent, having no scrolling seems to be a better option. However, it's not just about the layout, you've changed the content too—so that's why it had to become a list instead of a grid, I believe.

Also, it can be harder to find information when you have previous searches, resulting in a very long list instead of shortcuts:

Current	New

---

Have you tried to keep the grid layout, and review the options and shortcuts displayed instead?

[noraleonte]

I really appreciate the consistency on this one. 💙 I resonate with what was pointed out, on desktop it does seem that we have an opportunity to display more information with a two-column layout.
However, I love how the one column layout looks on smaller devices. 📞 👌

[danilo-leal]

These "suggested by default" content, as opposed to shortcuts, will be pushed down as visitors actually use the search, as it then starts to get populated with their recent search data, and that's fine, I'd say. It's how most (not to say "every" 😅) Algolia-powered search modals work, as far as I know.

The reason we initially provided these suggestions was just so that the very first time you open the search, you don't get a blank modal and rather have suggestions to what to look after — and, in this PR, I tweaked the content a bit to be less Material UI-focused and broader to all products.

But yeah, I hear ya. Let me try a grid layout and see what it feels like! Ultimately, as @noraleonte pointed out, it'll likely continue to be a list on mobile, though. 😬

[danilo-leal]

Can I ask y'all to check this out again once the deploy preview is ready? 😬

[flaviendelangle]

I like the new layout a lot
Not sure about the order of the sections and the content of each section though.

[danilo-leal]

@flaviendelangle can you elaborate? What is it that you think it's missing or shouldn't be there?
cc @samuelsycamore feel free to chime in as well — I'm curious about your more content-oriented take on this :)

[zanivan]

Looks good! I like this a lot, this is one more way to showcase our other products 🙌

I also think that we could reorder some items and move up the X and some of its components. However, this is mostly based on my personal opinion, so I think we can give the current version a try and see how it goes, and then iterate it afterward if we feel we should change something.

Besides, this is already a great improvement per se, so we shouldn't hold it here 🚀

[flaviendelangle]

@flaviendelangle can you elaborate? What is it that you think it's missing or shouldn't be there?

For the content of each section, I really don't know why elements are the most relevant.
For X, I do agree that going for shared pages instead of listing the products make sense.

For the order of the sections, I wonder how high X should be compared to Joy for example

[mapache-salvaje]

For the content of each section, I really don't know why elements are the most relevant.

Maybe we should take an SEO-based approach and list the most visited/searched pages here? (Or maybe that's already been done? 😅)

[danilo-leal]

Yup! We currently have a section on the modal that links exactly a few of them ("Popular searches"). I'd be happy to insert it back if that resonates most, but meh, I don't know if it adds that much value... For a more data-oriented approach, maybe we can look for where the traffic comes from? To be able to see how many people are visiting these already very visited pages from the Algolia/search modal? But I believe we, unfortunately, don't have that logged into GA quite yet — at least I couldn't find it! 😕

Ultimately, I think having more content from other products makes sense! It shouldn't be a Material UI-only thing — so I'd be happy to shuffle the order around if there are any specific suggestions (like Material UI / MUI X side to side | and then Base UI / Joy UI, etc.).

[danilo-leal]

I'll merge this for the time being, so we at least get the design improvements and the slight promotion of other products, too! We can always continue to iterate on the order and content moving forward! 😬