[Metrics UI] Metric explorer search bar issue on some screen sizes (elastic#246945)

Closes elastic#152319 

## Summary

Fixes the toolbar in the Metrics Explorer page for smaller screen widths
that are still considered desktop

### Changes

- Added a wrap styling to the toolbar
- Added a maximum width to the search bar

### Steps to Reproduce

1. In the left side navigation of Kibana click "Infrastructure"
2. In the left side navigation of the Infrastructure page click "Metrics
explorer"
3. Resize the browser width

### Expected Results

The toolbar no longer breaks and clips outside the view on smaller
screen sizes

Before:

<img width="887" height="995" alt="Screenshot 2025-12-19 101212"
src="https://github.com/user-attachments/assets/6bca3ed8-ce6c-4876-bfd7-fd1fe7f7c6fb"
/>

After:

<img width="878" height="999" alt="Screenshot 2025-12-19 101204"
src="https://github.com/user-attachments/assets/39baf9d0-0a50-4806-94ab-9b0c56941d0f"
/>

Author: jorgeoliveira117

x-pack/solutions/observability/plugins/infra/public/pages/metrics/metrics_explorer/components/toolbar.tsx

@@ -96,7 +96,7 @@ export const MetricsExplorerToolbar = ({
         </EuiFlexGroup>
       </EuiFlexItem>
       <EuiFlexItem>
-        <EuiFlexGroup alignItems="center">
+        <EuiFlexGroup wrap alignItems="center">
           <EuiFlexItem>
             <UnifiedSearchBar onQuerySubmit={onFilterQuerySubmit} />
           </EuiFlexItem>
@@ -106,7 +106,7 @@ export const MetricsExplorerToolbar = ({
               chartOptions={chartOptions}
             />
           </EuiFlexItem>
-          <EuiFlexItem grow={false} style={{ marginRight: 5 }}>
+          <EuiFlexItem grow={false} style={{ marginRight: 5, maxWidth: '100%' }}>
             <EuiSuperDatePicker
               start={timeRange.from}
               end={timeRange.to}