elastic/kibana

[Fleet] Cross icon(x) overlaps with long name under search field for (Agents, Agent policies, Enrollment tokens)

Open

#106,963 opened on 2021年7月28日

GitHub で見る
 (6 comments) (0 reactions) (0 assignees)TypeScript (19,065 stars) (8,021 forks)batch import
Team:Fleetbuggood first issue

説明

Kibana version: 7.14 BC-4 Kibana cloud environment

Host OS and Browser version: All, All

Preconditions:

  1. 7.14.0 BC-4 Kibana cloud environment should be available.
  2. Agent with long name is deployed.
  3. Long policy and Enrollment tokens name should exist.
Build Details:
Build: 42656
Commit: 82a4f6a7fa23946667599787cdb1b2d82c1d0dfb

Steps to reproduce:

  1. Login to Kibana.
  2. Navigate to Fleet-> Agents tab.
  3. Search for hostname having long name.
  4. Observe that Cross icon(x) overlaps with long name under search field.
  5. Now, again move to Agents policies tab and search for long policy name.
  6. Observe that Cross icon(x) overlaps with long name under search field.
  7. Now, again move to Enrollment tokens tab and search for long token name.
  8. Observe that Cross icon(x) overlaps with long name under search field.

Actual Result Cross icon(x) overlaps with long name under search field for (Agents, Agent policies, Enrollment tokens)

Expected Result Cross icon(x) should not overlaps with long name under search field for (Agents, Agent policies, Enrollment tokens)

What's working

  • This issue is not occurring for Data streams tab. Cross_icon_Datastreams

What's not working N/A

Screenshot

  • Agents cross icon Agents

  • Agents policies Cross icon Agent Details

  • Enrollment tokens

Cross_Icon_Enrollment_token

コントリビューターガイド

技術スタック
typescriptreacthtmlcss
領域
frontend
Issue 種別
bug
難度新しい貢献者にとっての実装難度です。1 は非常に小さな変更、5 は専門的な作業です。
3
推定時間経験ある貢献者が調査、実装、テスト、pull request 準備にかけるおおよその時間範囲です。
half day
活動状況Issue が今どれだけ取り組みやすいかを示します。新しい、活発、古い、ブロック中、またはメンテナー入力待ちなどです。
stale
明確さ期待される変更、受け入れ条件、次の手順がどれだけ明確かを示します。
clear
前提条件
CSSReactKibana development setup
初心者向け度初回貢献者にどれだけ取り組みやすいかを 1-100 で推定したスコアです。
75
調査方針
The issue is a UI bug where the clear button (x icon) overlaps with long search text in Fleet's Agents, Agent policies, and Enrollment tokens tabs. The Data streams tab works correctly, so compare the CSS/styling between these tabs. Look for components in the Fleet plugin, likely under x pack/plugins/fleet. Check the search bar component and its styling. Ensure the clear button is positioned correctly relative to the input text. The fix may involve adjusting CSS overflow or padding.