[Ingest Manager] The long name breaks the UI structure for the Host details table under the Fleet tab.

[muskangulati-qasource]

Describe the bug
The long name breaks the UI structure for the Host details table under the Fleet tab.

Build Details:

Platform: Staging
Version: 7.11.0-SNAPSHOT
Commit : 1a6d7308e58787bf0448f65c039739b40d4a6e3d
Build: 37074
Artifact Page: https://artifacts-api.elastic.co/v1/search/7.11.0-SNAPSHOT/

Browser Details
All

Preconditions

1. Cloud environment on staging should exist.
2. Agent should be deployed with a long name text.

Steps to Reproduce

1. Navigate to Kibana URL on Browser.
2. Click on "Fleet" from the left navigation bar.
3. Go to the Agents tab and click on the agent deployed.
4. Observe that for a long name the table structure is disturbed.

Test data
N/A

Impacted Test case(s)
N/A

Actual Result
For a long name, the table structure is disturbed.

Expected Result
For any length of name, the table structure should retain.

What's Working
For a short name, the structure is preserved:

What's not Working

• This issue is also occurring for Agent policy under Agent details tab.
  

Screenshots

Logs
N/A

[elasticmachine]

Pinging @elastic/ingest-management (Feature:Fleet)

[elasticmachine]

Pinging @elastic/ingest-management (Team:Ingest Management)

[muskangulati-qasource]

@manishgupta-qasource Please review!

[manishgupta-qasource]

Reviewed & assigned to @EricDavisX

[EricDavisX]

@nchaulet and @hbharding another UI / UX consideration for long strings, not urgent to me. I'll leave it to you.

[amolnater-qasource]

Hi @EricDavisX

Today, while performing regression testing on 7.11 BC2 Kibana cloud build we tested this ticket again. Please find our observations below:

Build details:

BUILD: 37605
COMMIT: a5126f7a280a6f4a27dc3aca65c1c89ccd1ac694
Artifact page: https://staging.elastic.co/7.11.0-8f5ce7c2/summary-7.11.0.html

Observations:

• Integration section is not visible under the agent details tab when an agent policy is having a long name. Hence, not accessible.

However, as per reference to #84434, it is expected that:

• Integration section should be visible under the agent details page.

Please refer screenshot:

Please let us know if anything else is required.

Thanks
QAS

[manishgupta-qasource]

@EricDavisX Request you please see the latest observation provided above by @amolnater-qasource & consider this bug

[EricDavisX]

reviewed - if easy, we could target 7.12 else, a later release

[EricDavisX]

@dikshachauhan-qasource this should be available in the BC4 build - please reset with crazy chars and long names here, and again anywhere else in the UI that they show, thanks for the diligence!

[amolnater-qasource]

Hi @EricDavisX
We have revalidated this issue for v7.11.0 BC-4 build.
Build details are as follows:

Artifact link: https://staging.elastic.co/7.11.0-c9f0a1f5/summary-7.11.0.html
Build: 37776
Commit: efd7b70e2803294a95395629dee55c89441d742a

Observations:

1. Integration section is now visible under the agent details page with long policy name.
2. Logs section is now visible under the agent Logs page with long policy name.

Screenshots:

Please let us know if anything else is required.
Thanks
QAS