From 7a1cf453624c0c5a5b27428d6ee6167e6cdbe58e Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Thu, 28 Nov 2024 05:03:46 +1100
Subject: [PATCH] [8.x] [ResponseOps][Rules]The rule row actions in the rules
 table are displayed incorrectly on smaller screens (#201912) (#202024)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Backport

This will backport the following commits from `main` to `8.x`:
- [[ResponseOps][Rules]The rule row actions in the rules table are
displayed incorrectly on smaller screens
(#201912)](https://github.com/elastic/kibana/pull/201912)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Georgiana-Andreea
Onoleață","email":"georgiana.onoleata@elastic.co"},"sourceCommit":{"committedDate":"2024-11-27T16:13:10Z","message":"[ResponseOps][Rules]The
rule row actions in the rules table are displayed incorrectly on smaller
screens (#201912)\n\nCloses
https://github.com/elastic/kibana/issues/193413\r\n\r\n##
Summary\r\n\r\n- set a fixed width for the status column, which solves
the issue of the\r\nrule row actions being misaligned and overlapping on
smaller screens\r\n\r\n<img width=\"1451\" alt=\"Screenshot 2024-11-27
at 10 20
10\"\r\nsrc=\"https://github.com/user-attachments/assets/2413e306-2b16-4a96-a127-2ed3550792ad\">","sha":"b0d4a21658258399e1b524a25df8ccb174e4832d","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:skip","Team:ResponseOps","v9.0.0","backport:prev-minor","v8.17.0"],"title":"[ResponseOps][Rules]The
rule row actions in the rules table are displayed incorrectly on smaller
screens","number":201912,"url":"https://github.com/elastic/kibana/pull/201912","mergeCommit":{"message":"[ResponseOps][Rules]The
rule row actions in the rules table are displayed incorrectly on smaller
screens (#201912)\n\nCloses
https://github.com/elastic/kibana/issues/193413\r\n\r\n##
Summary\r\n\r\n- set a fixed width for the status column, which solves
the issue of the\r\nrule row actions being misaligned and overlapping on
smaller screens\r\n\r\n<img width=\"1451\" alt=\"Screenshot 2024-11-27
at 10 20
10\"\r\nsrc=\"https://github.com/user-attachments/assets/2413e306-2b16-4a96-a127-2ed3550792ad\">","sha":"b0d4a21658258399e1b524a25df8ccb174e4832d"}},"sourceBranch":"main","suggestedTargetBranches":["8.17"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/201912","number":201912,"mergeCommit":{"message":"[ResponseOps][Rules]The
rule row actions in the rules table are displayed incorrectly on smaller
screens (#201912)\n\nCloses
https://github.com/elastic/kibana/issues/193413\r\n\r\n##
Summary\r\n\r\n- set a fixed width for the status column, which solves
the issue of the\r\nrule row actions being misaligned and overlapping on
smaller screens\r\n\r\n<img width=\"1451\" alt=\"Screenshot 2024-11-27
at 10 20
10\"\r\nsrc=\"https://github.com/user-attachments/assets/2413e306-2b16-4a96-a127-2ed3550792ad\">","sha":"b0d4a21658258399e1b524a25df8ccb174e4832d"}},{"branch":"8.17","label":"v8.17.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Georgiana-Andreea Onoleață <georgiana.onoleata@elastic.co>
---
 .../sections/rules_list/components/rules_list_table.tsx         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table.tsx
index 88f22f9687ea6..b325e7fd70a44 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table.tsx
@@ -720,7 +720,7 @@ export const RulesListTable = (props: RulesListTableProps) => {
         ),
         sortable: true,
         truncateText: false,
-        width: '10%',
+        width: '100px',
         'data-test-subj': 'rulesTableCell-status',
         render: (_enabled: boolean | undefined, rule: RuleTableItem) => {
           return renderRuleStatusDropdown(rule);