From 25584e330024dab9d47a7854a3586974ddc4ae57 Mon Sep 17 00:00:00 2001
From: Sophie Chang <4185750+sophiec20@users.noreply.github.com>
Date: Fri, 24 Jul 2026 18:28:31 +0000
Subject: [PATCH 1/5] Fix rules list layout on narrow screens

---
 .../components/rules_list_auto_refresh.tsx    | 26 +++++++++++++++----
 .../components/rules_list_filters_bar.tsx     | 25 +++++++++++++++---
 .../components/rules_list_statuses.tsx        | 20 ++++++++++++--
 .../components/rules_list_table.tsx           |  1 +
 4 files changed, 62 insertions(+), 10 deletions(-)

diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_auto_refresh.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_auto_refresh.tsx
index 174a3b11a9ce9..dbbd715fe5bea 100644
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_auto_refresh.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_auto_refresh.tsx
@@ -17,8 +17,12 @@ interface RulesListAutoRefreshProps {
   onRefresh: () => void;
 }
 
-const flexGroupStyle = {
-  marginLeft: 'auto',
+const autoRefreshCss = {
+  flexShrink: 0,
+};
+
+const lastUpdateTextCss = {
+  whiteSpace: 'nowrap' as const,
 };
 
 const getLastUpdateText = (lastUpdate: string) => {
@@ -104,9 +108,21 @@ export const RulesListAutoRefresh = (props: RulesListAutoRefreshProps) => {
   );
 
   return (
-    <EuiFlexGroup data-test-subj="rulesListAutoRefresh" alignItems="center">
-      <EuiFlexItem grow={false} style={flexGroupStyle}>
-        <EuiText data-test-subj="rulesListAutoRefresh-lastUpdateText" size="s" color="subdued">
+    <EuiFlexGroup
+      data-test-subj="rulesListAutoRefresh"
+      alignItems="center"
+      gutterSize="s"
+      responsive={false}
+      wrap={false}
+      css={autoRefreshCss}
+    >
+      <EuiFlexItem grow={false}>
+        <EuiText
+          data-test-subj="rulesListAutoRefresh-lastUpdateText"
+          size="s"
+          color="subdued"
+          css={lastUpdateTextCss}
+        >
           {lastUpdateText}
         </EuiText>
       </EuiFlexItem>
diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_filters_bar.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_filters_bar.tsx
index efcd1b78f6240..6e998f6ecbf4b 100644
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_filters_bar.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_filters_bar.tsx
@@ -51,6 +51,12 @@ interface RulesListFiltersBarProps {
 }
 
 const ENTER_KEY = 13;
+
+const rulesListSummaryBarCss = {
+  overflowX: 'auto' as const,
+  overflowY: 'hidden' as const,
+};
+
 export const RulesListFiltersBar = React.memo((props: RulesListFiltersBarProps) => {
   const {
     actionTypes,
@@ -212,9 +218,22 @@ export const RulesListFiltersBar = React.memo((props: RulesListFiltersBarProps)
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer size="m" />
-      <EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
-        <EuiFlexItem>
-          <EuiFlexGroup alignItems="center" gutterSize="none">
+      <EuiFlexGroup
+        alignItems="center"
+        justifyContent="spaceBetween"
+        gutterSize="s"
+        responsive={false}
+        wrap={false}
+        css={rulesListSummaryBarCss}
+      >
+        <EuiFlexItem grow={false}>
+          <EuiFlexGroup
+            alignItems="flexStart"
+            direction="column"
+            gutterSize="xs"
+            responsive={false}
+            wrap={false}
+          >
             <RulesListStatuses
               rulesStatuses={rulesStatusesTotal}
               rulesLastRunOutcomes={rulesLastRunOutcomesTotal}
diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_statuses.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_statuses.tsx
index eeea751b48fff..a58b8fb096955 100644
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_statuses.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_statuses.tsx
@@ -26,6 +26,10 @@ interface RulesListStatusesProps {
   rulesLastRunOutcomes: Record<string, number>;
 }
 
+const rulesListStatusesCss = {
+  flexShrink: 0,
+};
+
 export const RulesListStatuses = (props: RulesListStatusesProps) => {
   const { euiTheme } = useEuiTheme();
   const { rulesStatuses, rulesLastRunOutcomes } = props;
@@ -34,7 +38,13 @@ export const RulesListStatuses = (props: RulesListStatusesProps) => {
 
   if (isRuleUsingExecutionStatus) {
     return (
-      <EuiFlexGroup alignItems="center" gutterSize="none">
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="none"
+        responsive={false}
+        wrap={false}
+        css={rulesListStatusesCss}
+      >
         <EuiFlexItem grow={false}>
           <EuiHealth color={euiTheme.colors.success} data-test-subj="totalActiveRulesCount">
             {RULE_STATUS_ACTIVE(rulesStatuses.active)}
@@ -70,7 +80,13 @@ export const RulesListStatuses = (props: RulesListStatusesProps) => {
   }
 
   return (
-    <EuiFlexGroup alignItems="center" gutterSize="none">
+    <EuiFlexGroup
+      alignItems="center"
+      gutterSize="none"
+      responsive={false}
+      wrap={false}
+      css={rulesListStatusesCss}
+    >
       <EuiFlexItem grow={false}>
         <EuiHealth color={euiTheme.colors.success} data-test-subj="totalSucceededRulesCount">
           {RULE_LAST_RUN_OUTCOME_SUCCEEDED_DESCRIPTION(rulesLastRunOutcomes.succeeded)}
diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table.tsx
index 12b4435416936..2e742459e018a 100644
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table.tsx
@@ -1041,6 +1041,7 @@ export const RulesListTable = (props: RulesListTableProps) => {
           columns={[selectionColumn, ...rulesListColumns]}
           sorting={{ sort }}
           rowHeader="name"
+          responsiveBreakpoint={false}
           rowProps={rowProps}
           css={ruleRowCss}
           cellProps={(rule: RuleTableItem) => ({

From ba5c2b64539ff490338ad53a2f6babc98e91ded4 Mon Sep 17 00:00:00 2001
From: Sophie Chang <4185750+sophiec20@users.noreply.github.com>
Date: Sat, 25 Jul 2026 08:38:41 +0000
Subject: [PATCH 2/5] Keep rules count and clear filters inline

---
 .../sections/rules_list/components/rules_list_table.tsx  | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table.tsx
index 2e742459e018a..6d00d068c2eaa 100644
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table.tsx
@@ -972,7 +972,13 @@ export const RulesListTable = (props: RulesListTableProps) => {
     <EuiFlexGroup gutterSize="none" direction="column">
       <EuiFlexGroup justifyContent="spaceBetween" gutterSize="none" alignItems="center">
         <EuiFlexItem grow={false}>
-          <EuiFlexGroup justifyContent="flexStart" gutterSize="s" alignItems="center">
+          <EuiFlexGroup
+            justifyContent="flexStart"
+            gutterSize="s"
+            alignItems="center"
+            responsive={false}
+            wrap={false}
+          >
             <EuiFlexItem grow={false}>
               {numberOfSelectedRules > 0 ? (
                 renderSelectAllDropdown?.()
@@ -1001,6 +1007,7 @@ export const RulesListTable = (props: RulesListTableProps) => {
             </EuiFlexItem>
             {numberOfFilters > 0 && (
               <EuiFlexItem
+                grow={false}
                 css={{
                   borderLeft: euiTheme.border.thin,
                   paddingLeft: euiTheme.size.m,

From f1a83819c42c655afa4c3550f144d20ad1d7afd6 Mon Sep 17 00:00:00 2001
From: Sophie Chang <4185750+sophiec20@users.noreply.github.com>
Date: Sat, 25 Jul 2026 10:27:38 +0000
Subject: [PATCH 3/5] Clean up rules list status toolbar layout

---
 .../components/rules_list_auto_refresh.tsx    | 17 +--------
 .../components/rules_list_filters_bar.tsx     | 37 ++++++-------------
 .../components/rules_list_statuses.tsx        | 20 +---------
 3 files changed, 14 insertions(+), 60 deletions(-)

diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_auto_refresh.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_auto_refresh.tsx
index dbbd715fe5bea..475d652848326 100644
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_auto_refresh.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_auto_refresh.tsx
@@ -17,14 +17,6 @@ interface RulesListAutoRefreshProps {
   onRefresh: () => void;
 }
 
-const autoRefreshCss = {
-  flexShrink: 0,
-};
-
-const lastUpdateTextCss = {
-  whiteSpace: 'nowrap' as const,
-};
-
 const getLastUpdateText = (lastUpdate: string) => {
   if (!moment(lastUpdate).isValid()) {
     return '';
@@ -113,16 +105,9 @@ export const RulesListAutoRefresh = (props: RulesListAutoRefreshProps) => {
       alignItems="center"
       gutterSize="s"
       responsive={false}
-      wrap={false}
-      css={autoRefreshCss}
     >
       <EuiFlexItem grow={false}>
-        <EuiText
-          data-test-subj="rulesListAutoRefresh-lastUpdateText"
-          size="s"
-          color="subdued"
-          css={lastUpdateTextCss}
-        >
+        <EuiText data-test-subj="rulesListAutoRefresh-lastUpdateText" size="s" color="subdued">
           {lastUpdateText}
         </EuiText>
       </EuiFlexItem>
diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_filters_bar.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_filters_bar.tsx
index 6e998f6ecbf4b..294ba0dd84212 100644
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_filters_bar.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_filters_bar.tsx
@@ -51,12 +51,6 @@ interface RulesListFiltersBarProps {
 }
 
 const ENTER_KEY = 13;
-
-const rulesListSummaryBarCss = {
-  overflowX: 'auto' as const,
-  overflowY: 'hidden' as const,
-};
-
 export const RulesListFiltersBar = React.memo((props: RulesListFiltersBarProps) => {
   const {
     actionTypes,
@@ -218,27 +212,18 @@ export const RulesListFiltersBar = React.memo((props: RulesListFiltersBarProps)
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer size="m" />
-      <EuiFlexGroup
-        alignItems="center"
-        justifyContent="spaceBetween"
-        gutterSize="s"
-        responsive={false}
-        wrap={false}
-        css={rulesListSummaryBarCss}
-      >
+      <EuiFlexGroup alignItems="center" justifyContent="spaceBetween" gutterSize="m" wrap>
         <EuiFlexItem grow={false}>
-          <EuiFlexGroup
-            alignItems="flexStart"
-            direction="column"
-            gutterSize="xs"
-            responsive={false}
-            wrap={false}
-          >
-            <RulesListStatuses
-              rulesStatuses={rulesStatusesTotal}
-              rulesLastRunOutcomes={rulesLastRunOutcomesTotal}
-            />
-            <RulesListAutoRefresh lastUpdate={lastUpdate} onRefresh={onRefreshRules} />
+          <EuiFlexGroup alignItems="center" gutterSize="m" responsive={false} wrap>
+            <EuiFlexItem grow={false}>
+              <RulesListStatuses
+                rulesStatuses={rulesStatusesTotal}
+                rulesLastRunOutcomes={rulesLastRunOutcomesTotal}
+              />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <RulesListAutoRefresh lastUpdate={lastUpdate} onRefresh={onRefreshRules} />
+            </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>
         {rulesStatusesTotal.error > 0 && (
diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_statuses.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_statuses.tsx
index a58b8fb096955..aa7add0277134 100644
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_statuses.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_statuses.tsx
@@ -26,10 +26,6 @@ interface RulesListStatusesProps {
   rulesLastRunOutcomes: Record<string, number>;
 }
 
-const rulesListStatusesCss = {
-  flexShrink: 0,
-};
-
 export const RulesListStatuses = (props: RulesListStatusesProps) => {
   const { euiTheme } = useEuiTheme();
   const { rulesStatuses, rulesLastRunOutcomes } = props;
@@ -38,13 +34,7 @@ export const RulesListStatuses = (props: RulesListStatusesProps) => {
 
   if (isRuleUsingExecutionStatus) {
     return (
-      <EuiFlexGroup
-        alignItems="center"
-        gutterSize="none"
-        responsive={false}
-        wrap={false}
-        css={rulesListStatusesCss}
-      >
+      <EuiFlexGroup alignItems="center" gutterSize="m" responsive={false} wrap>
         <EuiFlexItem grow={false}>
           <EuiHealth color={euiTheme.colors.success} data-test-subj="totalActiveRulesCount">
             {RULE_STATUS_ACTIVE(rulesStatuses.active)}
@@ -80,13 +70,7 @@ export const RulesListStatuses = (props: RulesListStatusesProps) => {
   }
 
   return (
-    <EuiFlexGroup
-      alignItems="center"
-      gutterSize="none"
-      responsive={false}
-      wrap={false}
-      css={rulesListStatusesCss}
-    >
+    <EuiFlexGroup alignItems="center" gutterSize="m" responsive={false} wrap>
       <EuiFlexItem grow={false}>
         <EuiHealth color={euiTheme.colors.success} data-test-subj="totalSucceededRulesCount">
           {RULE_LAST_RUN_OUTCOME_SUCCEEDED_DESCRIPTION(rulesLastRunOutcomes.succeeded)}

From 8b0e4235af3eef523604d0075e7a2c9dec0e4321 Mon Sep 17 00:00:00 2001
From: Sophie Chang <4185750+sophiec20@users.noreply.github.com>
Date: Sat, 25 Jul 2026 14:42:39 +0000
Subject: [PATCH 4/5] Right align rules list auto refresh controls

---
 .../components/rules_list_filters_bar.tsx     | 66 ++++++++++---------
 1 file changed, 35 insertions(+), 31 deletions(-)

diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_filters_bar.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_filters_bar.tsx
index 294ba0dd84212..120c71ed37bfa 100644
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_filters_bar.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_filters_bar.tsx
@@ -214,42 +214,46 @@ export const RulesListFiltersBar = React.memo((props: RulesListFiltersBarProps)
       <EuiSpacer size="m" />
       <EuiFlexGroup alignItems="center" justifyContent="spaceBetween" gutterSize="m" wrap>
         <EuiFlexItem grow={false}>
-          <EuiFlexGroup alignItems="center" gutterSize="m" responsive={false} wrap>
-            <EuiFlexItem grow={false}>
-              <RulesListStatuses
-                rulesStatuses={rulesStatusesTotal}
-                rulesLastRunOutcomes={rulesLastRunOutcomesTotal}
-              />
-            </EuiFlexItem>
+          <RulesListStatuses
+            rulesStatuses={rulesStatusesTotal}
+            rulesLastRunOutcomes={rulesLastRunOutcomesTotal}
+          />
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiFlexGroup alignItems="center" justifyContent="flexEnd" gutterSize="m" wrap>
             <EuiFlexItem grow={false}>
               <RulesListAutoRefresh lastUpdate={lastUpdate} onRefresh={onRefreshRules} />
             </EuiFlexItem>
+            {rulesStatusesTotal.error > 0 && (
+              <EuiFlexItem grow={false}>
+                <EuiLink
+                  data-test-subj="expandRulesError"
+                  color="primary"
+                  onClick={onToggleRuleErrors}
+                >
+                  {!showErrors && (
+                    <FormattedMessage
+                      id="xpack.triggersActionsUI.sections.rulesList.showAllErrors"
+                      defaultMessage="Show {totalStatusesError, plural, one {error} other {errors}}"
+                      values={{
+                        totalStatusesError: rulesStatusesTotal.error,
+                      }}
+                    />
+                  )}
+                  {showErrors && (
+                    <FormattedMessage
+                      id="xpack.triggersActionsUI.sections.rulesList.hideAllErrors"
+                      defaultMessage="Hide {totalStatusesError, plural, one {error} other {errors}}"
+                      values={{
+                        totalStatusesError: rulesStatusesTotal.error,
+                      }}
+                    />
+                  )}
+                </EuiLink>
+              </EuiFlexItem>
+            )}
           </EuiFlexGroup>
         </EuiFlexItem>
-        {rulesStatusesTotal.error > 0 && (
-          <EuiFlexItem grow={false}>
-            <EuiLink data-test-subj="expandRulesError" color="primary" onClick={onToggleRuleErrors}>
-              {!showErrors && (
-                <FormattedMessage
-                  id="xpack.triggersActionsUI.sections.rulesList.showAllErrors"
-                  defaultMessage="Show {totalStatusesError, plural, one {error} other {errors}}"
-                  values={{
-                    totalStatusesError: rulesStatusesTotal.error,
-                  }}
-                />
-              )}
-              {showErrors && (
-                <FormattedMessage
-                  id="xpack.triggersActionsUI.sections.rulesList.hideAllErrors"
-                  defaultMessage="Hide {totalStatusesError, plural, one {error} other {errors}}"
-                  values={{
-                    totalStatusesError: rulesStatusesTotal.error,
-                  }}
-                />
-              )}
-            </EuiLink>
-          </EuiFlexItem>
-        )}
       </EuiFlexGroup>
     </>
   );

From 846c55f4aa32d330eb091d77f69b08b05cb94039 Mon Sep 17 00:00:00 2001
From: Sophie Chang <4185750+sophiec20@users.noreply.github.com>
Date: Sat, 25 Jul 2026 15:12:58 +0000
Subject: [PATCH 5/5] Keep rules table toolbar controls inline

---
 .../sections/rules_list/components/rules_list_table.tsx   | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table.tsx b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table.tsx
index 6d00d068c2eaa..532cfc1a6798b 100644
--- a/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table.tsx
+++ b/x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/rules_list/components/rules_list_table.tsx
@@ -970,7 +970,13 @@ export const RulesListTable = (props: RulesListTableProps) => {
 
   return (
     <EuiFlexGroup gutterSize="none" direction="column">
-      <EuiFlexGroup justifyContent="spaceBetween" gutterSize="none" alignItems="center">
+      <EuiFlexGroup
+        justifyContent="spaceBetween"
+        gutterSize="none"
+        alignItems="center"
+        responsive={false}
+        wrap={false}
+      >
         <EuiFlexItem grow={false}>
           <EuiFlexGroup
             justifyContent="flexStart"