fix: Filters alert width

[michael-s-molina]

SUMMARY

Fixes the filters alert width and also changes the modal width.

Following @kasiazjc's comment in #24559:

I think in general we have to bump the width of the modal in the default mode to ~880px (and resize just after it not longer fits in the screen), so that everything is more visible.

I adjusted the modal to have a fixed base width instead of percent based one. I set it to 1000px instead of 880px as a middle ground.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

Make sure the the width of the filters' alert takes the available space.

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[codecov]

Codecov Report

Merging #24801 (af1a018) into master (4a81284) will increase coverage by 0.00%.
Report is 5 commits behind head on master.
The diff coverage is 50.00%.

❗ Current head af1a018 differs from pull request most recent head b1b7719. Consider uploading reports for the commit b1b7719 to get more accurate results

@@           Coverage Diff           @@
##           master   #24801   +/-   ##
=======================================
  Coverage   68.95%   68.96%           
=======================================
  Files        1902     1902           
  Lines       73998    73999    +1     
  Branches     8195     8195           
=======================================
+ Hits        51029    51030    +1     
  Misses      20850    20850           
  Partials     2119     2119           

Flag	Coverage Δ
javascript	55.79% <50.00%> (+<0.01%)	⬆️

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

Files Changed	Coverage Δ
...tersConfigModal/Footer/CancelConfirmationAlert.tsx	100.00% <ø> (ø)
...eFilters/FiltersConfigModal/FiltersConfigModal.tsx	71.09% <50.00%> (+0.13%)	⬆️

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[justinpark]

Looks good to me other than 1000px adjustment change (will be reviewed @kasiazjc

[kasiazjc]

SUMMARY

Fixes the filters alert width and also changes the modal width.

Following @kasiazjc's comment in #24559:

I think in general we have to bump the width of the modal in the default mode to ~880px (and resize just after it not longer fits in the screen), so that everything is more visible.

I adjusted the modal to have a fixed base width instead of percent based one. I set it to 1000px instead of 880px as a middle ground.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

Make sure the the width of the filters' alert takes the available space.

ADDITIONAL INFORMATION

• Has associated issue:

• Required feature flags:

• Changes UI

• Includes DB Migration (follow approval process in SIP-59)

  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided

• Introduces new feature or API

• Removes existing feature or API

I think on the smaller screens, modals that are that big of a size can be overwhelming (that's why I would prefer to avoid them) and I do not think that we add that much value with the increased size (especially because with 880x the fields are already bigger than our default + 240px seems like enough). I think we use width of 880px we use in the dashboard properties etc and the 1000px+ is used for alerts&reports as there is a lot of content and different inputs etc.

Can be convinced that 1000px is better though if you give me reasons @michael-s-molina :D

[michael-s-molina]

Can be convinced that 1000px is better though if you give me reasons @michael-s-molina :D

I was worried it wouldn't work for Airbnb but I checked with @justinpark and 880px is fine for most cases. I changed the width back to 880px.

[kasiazjc]

Can be convinced that 1000px is better though if you give me reasons @michael-s-molina :D

I was worried it wouldn't work for Airbnb but I checked with @justinpark and 880px is fine for most cases. I changed the width back to 880px.

Thank you @michael-s-molina ❤️

[kasiazjc]

LGTM ✨