elastic/kibana

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

Open

#106,963 建立於 2021年7月28日

在 GitHub 查看
 (6 留言) (0 反應) (0 負責人)TypeScript (19,065 star) (8,021 fork)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
議題類型
bug
難度面向新貢獻者的預計實作難度，1 表示很小改動，5 表示專家級工作。
3
預計時間有經驗貢獻者完成調查、實作、測試並準備 pull request 的粗略時間範圍。
half day
活動狀態議題目前的可參與程度：新鮮、活躍、陳舊、阻塞或等待維護者輸入。
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.