Upgrade AutocompleteWithPagination styling

[zachariah-at-msupply]

Fixes part of #5336

👩🏻‍💻 What does this PR do?

Upgrades the styling of the options for a specific component (AutocompleteWithPagination) to truncate options with ellipses rather than wrapping them. (N.B. This only partially solves the original issue, all the other autocomplete components will need to be fixed too, but that will happen in a subsequent PR.)

💌 Any notes for the reviewer?

I hope it looks good :)

🧪 Testing

• Add a store with a really really really really really really really really really long name.
• Go to Cold chain -> Equipment
• Create a new asset
• Click on the store selector dropdown and see the long names get truncated with ellipses
• Check other similar dropdowns on other pages have not been mucked up.

📃 Documentation

• No documentation required: no user facing changes or a bug fix which isn't a change in behaviour
• These areas should be updated or checked:

📃 Reviewer Checklist

The PR Reviewer(s) should fill out this section before approving the PR

Breaking Changes

• No Breaking Changes in the Graphql API
• Technically some Breaking Changes but not expected to impact any integrations

Issue Review

• All requirements in original issue have been covered
• A follow up issue(s) have been created to cover additional requirements

Tests Pass

• Postgres
• SQLite
• Frontend

[fergie-nz]

I'm actually very hesitant to approve something like this because Autocomplete is used in so many places, and I don't fully understand the ramifications of these changes.

Particularly unsure about the hard coded values. I wonder would this affect other places Autocomplete is used?

[GeronimoJohn]

This would affect other places for Autocomplete. Though shouldn't be harmful bur rather helpful.

[CarlosNZ]

@zachariah-at-msupply can you post some screenshots of it's supposed to look? (preferably a few in different contexts)? It's not looking right for me, just wondering if you're seeing something different?

[zachariah-at-msupply]

After the modifications I added because I misinterpreted Mark's comment, here is the screenshot you asked for Carl:

[zachariah-at-msupply]

It also crosses my mind that we might want to add a maximum length for table columns, with an option to expand it to show the full value? The table is scrollable so no information is hidden, but it might be a bit inconvenient at times.

Screen.Recording.2025-04-15.at.11.15.05.mov

[github-actions]

Bundle size difference

Comparing this PR to main

Old size	New size	Diff
6.13 MB	6.13 MB	217 B (0.00%)

[lache-melvin]

Hi - what's holding up this PR?

[zachariah-at-msupply]

I've come across these other issues (listed below) which are very similar. Shoul I include them in this PR, or create new issues for them? Seeing these other issues also makes me feel uneasy about the fix I have made - it seems like more sweeping changes are necessary than these fixes, which feel like they might be putting a plaster on a bigger problem. What are your thoughts? I'll await advice before spending time on them.

Here are the 3 things I found:

1. All the dropdowns that use MUI's autocomplete component also have problems with long names:
   

2. The tables also have problems with long names:
   https://github.com/user-attachments/assets/9b336898-5d15-4bfa-8272-46171049b2e7

3. The fix I've proposed is a trade off and will only work in a limited number of use cases (see my unresolved review comments, above).

[CarlosNZ]

Hey @zachariah-at-msupply, I'm still seeing this in the Cold Chain->Equipment Store Selection, which is the one raised in the original issue.

[zachariah-at-msupply]

This PR will now just fix the AutocompleteWithPagination component, subsequent PRs will introduce the upgrade the other components that need it.

N.B. I reverted the previous change to the store autocomplete (commit db2bbe9 above) as I did not know it was worth introducing a fixed width to the autocomplete for an issue that no one has actually raised - I think that might require a bit of design input, and is probably linked to the wider issue of fixing styling throughout the application.

[CarlosNZ]

Okay, I think we should get this in now, the whole issue has become too confused. It looks good for the Store selector in Assets, and that's the main thing for this specific issue. If further changes are needed we can do them in a new issue (with much more specific requirements!)

Thanks @zachariah-at-msupply !