fix: [DI-26001] - Fix inconsistent gap in dimension filter and metric

[santoshp210-akamai]

Description 📝

Fixed the spacing and widths for dimension filters and metric to be consistent.

Changes 🔄

• Changed the gap to spacing in the Grid component in DimensionFilterField.
• Removed the unneccessary Box component in Metric .
• Added a flexWrap to the Grid component in DimensionFilterField.

Target release date 🗓️

Please specify a release date (and environment, if applicable) to guarantee timely review of this PR. If exact date is not known, please approximate and update it as needed.

Preview 📷

Include a screenshot or screen recording of the change.

🔒 Use the Mask Sensitive Data setting for security.

💡 Use <video src="" /> tag when including recordings in table.

Before	After

How to test 🧪

Prerequisites

(How to setup test environment)

• Under Monitor, select Alerts. Click on Create Alert button to view the form.

Verification steps

• The width of the Data Field for Metric and Dimension Filter should be the same.

Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support

• I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

• All unit tests are passing
• TypeScript compilation succeeded without errors
• Code passes all linting rules

[pmakode-akamai]

The width of the Data Field for Metric and Dimension Filters doesn’t look the same across different screen sizes (especially for screen sizes < lg)

[nikhagra-akamai]

The width of the Data Field for Metric and Dimension Filters doesn’t look the same across different screen sizes

Its okay because in metrics we have 4 filters where in dimensions we have 3 & widths are also different as per UX

[pmakode-akamai]

thank you!

[linode-gh-bot]

Cloud Manager UI test results

🎉 676 passing tests on test run #5 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
0 Failing	676 Passing	4 Skipped	118m 4s