fix(WD-36308): phone field dropdown bugs

[muhammad-ali-pk]

Done

• Fixed the telephone input dropdown width issue (matches the setup on ubuntu.com)

QA

• Checkout this pull request
• Run the site using the command dotrun
• View the site locally in your web browser at: http://0.0.0.0:8002#get-in-touch
• Scroll down to telephone input field, click the country flag and verify the dropdown width is full width.

Issue / Card

Fixes WD-36308

[webteam-app]

Demo

Jenkins

demos.haus

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 78.58%. Comparing base (27c8702) to head (f607677).
⚠️ Report is 4 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2507   +/-   ##
=======================================
  Coverage   78.58%   78.58%           
=======================================
  Files          16       16           
  Lines        1975     1975           
=======================================
  Hits         1552     1552           
  Misses        423      423           

Flag	Coverage Δ
python	78.58% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Skazitron]

@muhammad-ali-pk this opens a search bar when you click on the flag for the phone field. Is this expected? Might be worth checking with @Sophie-32

[muhammad-ali-pk]

@Skazitron It's behaving the same way on ubuntu.com#get-in-touch, and is expected.

[Skazitron]

@muhammad-ali-pk I see, I was concerned since it's not a feature on canonical.com. Aside from that, it also seems to be a little longer than the width of the field right now. Is there a way we can fix that?

[muhammad-ali-pk]

@Skazitron please have another look, should be fixed now.

[Copilot]

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

[petesfrench]

@muhammad-ali-pk Selecting a new country code closes the contact us modal

[muhammad-ali-pk]

@petesfrench Fixed. Can you please take another look?

[petesfrench]

LGTM. Some testing would be nice, but can be tackled separately as not to block this.

[muhammad-ali-pk]

@petesfrench Thank you!

Some testing would be nice

Are you referring to tests specific to this mobile input field, or form modals in general? I'll create a separate ticket with a detailed description after hearing your thoughts.