From 6db16bb11a1e1e85012fb2d55ac745aadac4af1b Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 8 Aug 2024 19:05:28 -0700
Subject: [PATCH] Use smaller and compressed varients of buttons and form
 components (#421) (#424)

* Use EuiSmallButton



* Use EuiSmallButtonIcon



* Use EuiSmallButtonEmpty



* Use EuiCompressedFormRow



* Use EuiCompressedField*



* Use EuiCompressedSelect and EuiCompressedSuperSelect



* Use EuiCompressedComboBox



* Update snapshots and tests



---------


(cherry picked from commit 1a3157b633311fbe357baec958f0bcc5504f28e2)

Signed-off-by: Miki <miki@amazon.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .../result_component.test.tsx.snap            | 1520 +++++++++--------
 .../__snapshots__/result_grid.test.tsx.snap   |  720 ++++----
 .../result_components/result_grid.tsx         |    4 +-
 .../__snapshots__/search_bar.test.tsx.snap    |   90 +-
 .../__snapshots__/search_config.test.tsx.snap |  462 ++---
 .../search_configs.test.tsx.snap              |  924 +++++-----
 .../__tests__/search_config.test.tsx          |    8 +-
 .../search_components/search_bar.tsx          |    8 +-
 .../search_configs/search_config.tsx          |   38 +-
 9 files changed, 2047 insertions(+), 1727 deletions(-)

diff --git a/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_component.test.tsx.snap b/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_component.test.tsx.snap
index 3c6442e5..3dcf6d2e 100644
--- a/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_component.test.tsx.snap
+++ b/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_component.test.tsx.snap
@@ -1692,7 +1692,7 @@ exports[`Result component Renders result component 1`] = `
                                 <EuiPopover
                                   anchorPosition="leftUp"
                                   button={
-                                    <EuiButtonIcon
+                                    <EuiSmallButtonIcon
                                       aria-label="Toggle details"
                                       className="euiButtonIcon euiButtonIcon--text"
                                       iconType="expand"
@@ -1712,52 +1712,60 @@ exports[`Result component Renders result component 1`] = `
                                     <div
                                       className="euiPopover__anchor"
                                     >
-                                      <EuiButtonIcon
+                                      <EuiSmallButtonIcon
                                         aria-label="Toggle details"
                                         className="euiButtonIcon euiButtonIcon--text"
                                         iconType="expand"
                                         onClick={[Function]}
                                       >
-                                        <button
+                                        <EuiButtonIcon
                                           aria-label="Toggle details"
-                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
-                                          disabled={false}
+                                          className="euiButtonIcon euiButtonIcon--text"
+                                          iconType="expand"
                                           onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <EuiIcon
-                                            aria-hidden="true"
-                                            className="euiButtonIcon__icon"
-                                            color="inherit"
-                                            size="m"
-                                            type="expand"
-                                          >
-                                            <EuiIconBeaker
-                                              aria-hidden={true}
-                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                              focusable="false"
-                                              role="img"
-                                              style={null}
-                                            >
-                                              <svg
+                                          size="s"
+                                        >
+                                          <button
+                                            aria-label="Toggle details"
+                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small euiButtonIcon euiButtonIcon--text"
+                                            disabled={false}
+                                            onClick={[Function]}
+                                            type="button"
+                                          >
+                                            <EuiIcon
+                                              aria-hidden="true"
+                                              className="euiButtonIcon__icon"
+                                              color="inherit"
+                                              size="m"
+                                              type="expand"
+                                            >
+                                              <EuiIconBeaker
                                                 aria-hidden={true}
                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                 focusable="false"
-                                                height={16}
                                                 role="img"
                                                 style={null}
-                                                viewBox="0 0 16 16"
-                                                width={16}
-                                                xmlns="http://www.w3.org/2000/svg"
                                               >
-                                                <path
-                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                />
-                                              </svg>
-                                            </EuiIconBeaker>
-                                          </EuiIcon>
-                                        </button>
-                                      </EuiButtonIcon>
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                  />
+                                                </svg>
+                                              </EuiIconBeaker>
+                                            </EuiIcon>
+                                          </button>
+                                        </EuiButtonIcon>
+                                      </EuiSmallButtonIcon>
                                     </div>
                                   </div>
                                 </EuiPopover>
@@ -2182,7 +2190,7 @@ exports[`Result component Renders result component 1`] = `
                                 <EuiPopover
                                   anchorPosition="leftUp"
                                   button={
-                                    <EuiButtonIcon
+                                    <EuiSmallButtonIcon
                                       aria-label="Toggle details"
                                       className="euiButtonIcon euiButtonIcon--text"
                                       iconType="expand"
@@ -2202,52 +2210,60 @@ exports[`Result component Renders result component 1`] = `
                                     <div
                                       className="euiPopover__anchor"
                                     >
-                                      <EuiButtonIcon
+                                      <EuiSmallButtonIcon
                                         aria-label="Toggle details"
                                         className="euiButtonIcon euiButtonIcon--text"
                                         iconType="expand"
                                         onClick={[Function]}
                                       >
-                                        <button
+                                        <EuiButtonIcon
                                           aria-label="Toggle details"
-                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
-                                          disabled={false}
+                                          className="euiButtonIcon euiButtonIcon--text"
+                                          iconType="expand"
                                           onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <EuiIcon
-                                            aria-hidden="true"
-                                            className="euiButtonIcon__icon"
-                                            color="inherit"
-                                            size="m"
-                                            type="expand"
-                                          >
-                                            <EuiIconBeaker
-                                              aria-hidden={true}
-                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                              focusable="false"
-                                              role="img"
-                                              style={null}
-                                            >
-                                              <svg
+                                          size="s"
+                                        >
+                                          <button
+                                            aria-label="Toggle details"
+                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small euiButtonIcon euiButtonIcon--text"
+                                            disabled={false}
+                                            onClick={[Function]}
+                                            type="button"
+                                          >
+                                            <EuiIcon
+                                              aria-hidden="true"
+                                              className="euiButtonIcon__icon"
+                                              color="inherit"
+                                              size="m"
+                                              type="expand"
+                                            >
+                                              <EuiIconBeaker
                                                 aria-hidden={true}
                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                 focusable="false"
-                                                height={16}
                                                 role="img"
                                                 style={null}
-                                                viewBox="0 0 16 16"
-                                                width={16}
-                                                xmlns="http://www.w3.org/2000/svg"
                                               >
-                                                <path
-                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                />
-                                              </svg>
-                                            </EuiIconBeaker>
-                                          </EuiIcon>
-                                        </button>
-                                      </EuiButtonIcon>
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                  />
+                                                </svg>
+                                              </EuiIconBeaker>
+                                            </EuiIcon>
+                                          </button>
+                                        </EuiButtonIcon>
+                                      </EuiSmallButtonIcon>
                                     </div>
                                   </div>
                                 </EuiPopover>
@@ -2649,7 +2665,7 @@ exports[`Result component Renders result component 1`] = `
                                 <EuiPopover
                                   anchorPosition="leftUp"
                                   button={
-                                    <EuiButtonIcon
+                                    <EuiSmallButtonIcon
                                       aria-label="Toggle details"
                                       className="euiButtonIcon euiButtonIcon--text"
                                       iconType="expand"
@@ -2669,52 +2685,60 @@ exports[`Result component Renders result component 1`] = `
                                     <div
                                       className="euiPopover__anchor"
                                     >
-                                      <EuiButtonIcon
+                                      <EuiSmallButtonIcon
                                         aria-label="Toggle details"
                                         className="euiButtonIcon euiButtonIcon--text"
                                         iconType="expand"
                                         onClick={[Function]}
                                       >
-                                        <button
+                                        <EuiButtonIcon
                                           aria-label="Toggle details"
-                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
-                                          disabled={false}
+                                          className="euiButtonIcon euiButtonIcon--text"
+                                          iconType="expand"
                                           onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <EuiIcon
-                                            aria-hidden="true"
-                                            className="euiButtonIcon__icon"
-                                            color="inherit"
-                                            size="m"
-                                            type="expand"
-                                          >
-                                            <EuiIconBeaker
-                                              aria-hidden={true}
-                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                              focusable="false"
-                                              role="img"
-                                              style={null}
-                                            >
-                                              <svg
+                                          size="s"
+                                        >
+                                          <button
+                                            aria-label="Toggle details"
+                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small euiButtonIcon euiButtonIcon--text"
+                                            disabled={false}
+                                            onClick={[Function]}
+                                            type="button"
+                                          >
+                                            <EuiIcon
+                                              aria-hidden="true"
+                                              className="euiButtonIcon__icon"
+                                              color="inherit"
+                                              size="m"
+                                              type="expand"
+                                            >
+                                              <EuiIconBeaker
                                                 aria-hidden={true}
                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                 focusable="false"
-                                                height={16}
                                                 role="img"
                                                 style={null}
-                                                viewBox="0 0 16 16"
-                                                width={16}
-                                                xmlns="http://www.w3.org/2000/svg"
                                               >
-                                                <path
-                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                />
-                                              </svg>
-                                            </EuiIconBeaker>
-                                          </EuiIcon>
-                                        </button>
-                                      </EuiButtonIcon>
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                  />
+                                                </svg>
+                                              </EuiIconBeaker>
+                                            </EuiIcon>
+                                          </button>
+                                        </EuiButtonIcon>
+                                      </EuiSmallButtonIcon>
                                     </div>
                                   </div>
                                 </EuiPopover>
@@ -3093,7 +3117,7 @@ exports[`Result component Renders result component 1`] = `
                                 <EuiPopover
                                   anchorPosition="leftUp"
                                   button={
-                                    <EuiButtonIcon
+                                    <EuiSmallButtonIcon
                                       aria-label="Toggle details"
                                       className="euiButtonIcon euiButtonIcon--text"
                                       iconType="expand"
@@ -3113,52 +3137,60 @@ exports[`Result component Renders result component 1`] = `
                                     <div
                                       className="euiPopover__anchor"
                                     >
-                                      <EuiButtonIcon
+                                      <EuiSmallButtonIcon
                                         aria-label="Toggle details"
                                         className="euiButtonIcon euiButtonIcon--text"
                                         iconType="expand"
                                         onClick={[Function]}
                                       >
-                                        <button
+                                        <EuiButtonIcon
                                           aria-label="Toggle details"
-                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
-                                          disabled={false}
+                                          className="euiButtonIcon euiButtonIcon--text"
+                                          iconType="expand"
                                           onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <EuiIcon
-                                            aria-hidden="true"
-                                            className="euiButtonIcon__icon"
-                                            color="inherit"
-                                            size="m"
-                                            type="expand"
-                                          >
-                                            <EuiIconBeaker
-                                              aria-hidden={true}
-                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                              focusable="false"
-                                              role="img"
-                                              style={null}
-                                            >
-                                              <svg
+                                          size="s"
+                                        >
+                                          <button
+                                            aria-label="Toggle details"
+                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small euiButtonIcon euiButtonIcon--text"
+                                            disabled={false}
+                                            onClick={[Function]}
+                                            type="button"
+                                          >
+                                            <EuiIcon
+                                              aria-hidden="true"
+                                              className="euiButtonIcon__icon"
+                                              color="inherit"
+                                              size="m"
+                                              type="expand"
+                                            >
+                                              <EuiIconBeaker
                                                 aria-hidden={true}
                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                 focusable="false"
-                                                height={16}
                                                 role="img"
                                                 style={null}
-                                                viewBox="0 0 16 16"
-                                                width={16}
-                                                xmlns="http://www.w3.org/2000/svg"
                                               >
-                                                <path
-                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                />
-                                              </svg>
-                                            </EuiIconBeaker>
-                                          </EuiIcon>
-                                        </button>
-                                      </EuiButtonIcon>
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                  />
+                                                </svg>
+                                              </EuiIconBeaker>
+                                            </EuiIcon>
+                                          </button>
+                                        </EuiButtonIcon>
+                                      </EuiSmallButtonIcon>
                                     </div>
                                   </div>
                                 </EuiPopover>
@@ -3537,7 +3569,7 @@ exports[`Result component Renders result component 1`] = `
                                 <EuiPopover
                                   anchorPosition="leftUp"
                                   button={
-                                    <EuiButtonIcon
+                                    <EuiSmallButtonIcon
                                       aria-label="Toggle details"
                                       className="euiButtonIcon euiButtonIcon--text"
                                       iconType="expand"
@@ -3557,52 +3589,60 @@ exports[`Result component Renders result component 1`] = `
                                     <div
                                       className="euiPopover__anchor"
                                     >
-                                      <EuiButtonIcon
+                                      <EuiSmallButtonIcon
                                         aria-label="Toggle details"
                                         className="euiButtonIcon euiButtonIcon--text"
                                         iconType="expand"
                                         onClick={[Function]}
                                       >
-                                        <button
+                                        <EuiButtonIcon
                                           aria-label="Toggle details"
-                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
-                                          disabled={false}
+                                          className="euiButtonIcon euiButtonIcon--text"
+                                          iconType="expand"
                                           onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <EuiIcon
-                                            aria-hidden="true"
-                                            className="euiButtonIcon__icon"
-                                            color="inherit"
-                                            size="m"
-                                            type="expand"
-                                          >
-                                            <EuiIconBeaker
-                                              aria-hidden={true}
-                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                              focusable="false"
-                                              role="img"
-                                              style={null}
-                                            >
-                                              <svg
+                                          size="s"
+                                        >
+                                          <button
+                                            aria-label="Toggle details"
+                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small euiButtonIcon euiButtonIcon--text"
+                                            disabled={false}
+                                            onClick={[Function]}
+                                            type="button"
+                                          >
+                                            <EuiIcon
+                                              aria-hidden="true"
+                                              className="euiButtonIcon__icon"
+                                              color="inherit"
+                                              size="m"
+                                              type="expand"
+                                            >
+                                              <EuiIconBeaker
                                                 aria-hidden={true}
                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                 focusable="false"
-                                                height={16}
                                                 role="img"
                                                 style={null}
-                                                viewBox="0 0 16 16"
-                                                width={16}
-                                                xmlns="http://www.w3.org/2000/svg"
                                               >
-                                                <path
-                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                />
-                                              </svg>
-                                            </EuiIconBeaker>
-                                          </EuiIcon>
-                                        </button>
-                                      </EuiButtonIcon>
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                  />
+                                                </svg>
+                                              </EuiIconBeaker>
+                                            </EuiIcon>
+                                          </button>
+                                        </EuiButtonIcon>
+                                      </EuiSmallButtonIcon>
                                     </div>
                                   </div>
                                 </EuiPopover>
@@ -3981,7 +4021,7 @@ exports[`Result component Renders result component 1`] = `
                                 <EuiPopover
                                   anchorPosition="leftUp"
                                   button={
-                                    <EuiButtonIcon
+                                    <EuiSmallButtonIcon
                                       aria-label="Toggle details"
                                       className="euiButtonIcon euiButtonIcon--text"
                                       iconType="expand"
@@ -4001,52 +4041,60 @@ exports[`Result component Renders result component 1`] = `
                                     <div
                                       className="euiPopover__anchor"
                                     >
-                                      <EuiButtonIcon
+                                      <EuiSmallButtonIcon
                                         aria-label="Toggle details"
                                         className="euiButtonIcon euiButtonIcon--text"
                                         iconType="expand"
                                         onClick={[Function]}
                                       >
-                                        <button
+                                        <EuiButtonIcon
                                           aria-label="Toggle details"
-                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
-                                          disabled={false}
+                                          className="euiButtonIcon euiButtonIcon--text"
+                                          iconType="expand"
                                           onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <EuiIcon
-                                            aria-hidden="true"
-                                            className="euiButtonIcon__icon"
-                                            color="inherit"
-                                            size="m"
-                                            type="expand"
-                                          >
-                                            <EuiIconBeaker
-                                              aria-hidden={true}
-                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                              focusable="false"
-                                              role="img"
-                                              style={null}
-                                            >
-                                              <svg
+                                          size="s"
+                                        >
+                                          <button
+                                            aria-label="Toggle details"
+                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small euiButtonIcon euiButtonIcon--text"
+                                            disabled={false}
+                                            onClick={[Function]}
+                                            type="button"
+                                          >
+                                            <EuiIcon
+                                              aria-hidden="true"
+                                              className="euiButtonIcon__icon"
+                                              color="inherit"
+                                              size="m"
+                                              type="expand"
+                                            >
+                                              <EuiIconBeaker
                                                 aria-hidden={true}
                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                 focusable="false"
-                                                height={16}
                                                 role="img"
                                                 style={null}
-                                                viewBox="0 0 16 16"
-                                                width={16}
-                                                xmlns="http://www.w3.org/2000/svg"
                                               >
-                                                <path
-                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                />
-                                              </svg>
-                                            </EuiIconBeaker>
-                                          </EuiIcon>
-                                        </button>
-                                      </EuiButtonIcon>
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                  />
+                                                </svg>
+                                              </EuiIconBeaker>
+                                            </EuiIcon>
+                                          </button>
+                                        </EuiButtonIcon>
+                                      </EuiSmallButtonIcon>
                                     </div>
                                   </div>
                                 </EuiPopover>
@@ -4448,7 +4496,7 @@ exports[`Result component Renders result component 1`] = `
                                 <EuiPopover
                                   anchorPosition="leftUp"
                                   button={
-                                    <EuiButtonIcon
+                                    <EuiSmallButtonIcon
                                       aria-label="Toggle details"
                                       className="euiButtonIcon euiButtonIcon--text"
                                       iconType="expand"
@@ -4468,52 +4516,60 @@ exports[`Result component Renders result component 1`] = `
                                     <div
                                       className="euiPopover__anchor"
                                     >
-                                      <EuiButtonIcon
+                                      <EuiSmallButtonIcon
                                         aria-label="Toggle details"
                                         className="euiButtonIcon euiButtonIcon--text"
                                         iconType="expand"
                                         onClick={[Function]}
                                       >
-                                        <button
+                                        <EuiButtonIcon
                                           aria-label="Toggle details"
-                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
-                                          disabled={false}
+                                          className="euiButtonIcon euiButtonIcon--text"
+                                          iconType="expand"
                                           onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <EuiIcon
-                                            aria-hidden="true"
-                                            className="euiButtonIcon__icon"
-                                            color="inherit"
-                                            size="m"
-                                            type="expand"
-                                          >
-                                            <EuiIconBeaker
-                                              aria-hidden={true}
-                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                              focusable="false"
-                                              role="img"
-                                              style={null}
-                                            >
-                                              <svg
+                                          size="s"
+                                        >
+                                          <button
+                                            aria-label="Toggle details"
+                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small euiButtonIcon euiButtonIcon--text"
+                                            disabled={false}
+                                            onClick={[Function]}
+                                            type="button"
+                                          >
+                                            <EuiIcon
+                                              aria-hidden="true"
+                                              className="euiButtonIcon__icon"
+                                              color="inherit"
+                                              size="m"
+                                              type="expand"
+                                            >
+                                              <EuiIconBeaker
                                                 aria-hidden={true}
                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                 focusable="false"
-                                                height={16}
                                                 role="img"
                                                 style={null}
-                                                viewBox="0 0 16 16"
-                                                width={16}
-                                                xmlns="http://www.w3.org/2000/svg"
                                               >
-                                                <path
-                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                />
-                                              </svg>
-                                            </EuiIconBeaker>
-                                          </EuiIcon>
-                                        </button>
-                                      </EuiButtonIcon>
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                  />
+                                                </svg>
+                                              </EuiIconBeaker>
+                                            </EuiIcon>
+                                          </button>
+                                        </EuiButtonIcon>
+                                      </EuiSmallButtonIcon>
                                     </div>
                                   </div>
                                 </EuiPopover>
@@ -4892,7 +4948,7 @@ exports[`Result component Renders result component 1`] = `
                                 <EuiPopover
                                   anchorPosition="leftUp"
                                   button={
-                                    <EuiButtonIcon
+                                    <EuiSmallButtonIcon
                                       aria-label="Toggle details"
                                       className="euiButtonIcon euiButtonIcon--text"
                                       iconType="expand"
@@ -4912,52 +4968,60 @@ exports[`Result component Renders result component 1`] = `
                                     <div
                                       className="euiPopover__anchor"
                                     >
-                                      <EuiButtonIcon
+                                      <EuiSmallButtonIcon
                                         aria-label="Toggle details"
                                         className="euiButtonIcon euiButtonIcon--text"
                                         iconType="expand"
                                         onClick={[Function]}
                                       >
-                                        <button
+                                        <EuiButtonIcon
                                           aria-label="Toggle details"
-                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
-                                          disabled={false}
+                                          className="euiButtonIcon euiButtonIcon--text"
+                                          iconType="expand"
                                           onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <EuiIcon
-                                            aria-hidden="true"
-                                            className="euiButtonIcon__icon"
-                                            color="inherit"
-                                            size="m"
-                                            type="expand"
-                                          >
-                                            <EuiIconBeaker
-                                              aria-hidden={true}
-                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                              focusable="false"
-                                              role="img"
-                                              style={null}
-                                            >
-                                              <svg
+                                          size="s"
+                                        >
+                                          <button
+                                            aria-label="Toggle details"
+                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small euiButtonIcon euiButtonIcon--text"
+                                            disabled={false}
+                                            onClick={[Function]}
+                                            type="button"
+                                          >
+                                            <EuiIcon
+                                              aria-hidden="true"
+                                              className="euiButtonIcon__icon"
+                                              color="inherit"
+                                              size="m"
+                                              type="expand"
+                                            >
+                                              <EuiIconBeaker
                                                 aria-hidden={true}
                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                 focusable="false"
-                                                height={16}
                                                 role="img"
                                                 style={null}
-                                                viewBox="0 0 16 16"
-                                                width={16}
-                                                xmlns="http://www.w3.org/2000/svg"
                                               >
-                                                <path
-                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                />
-                                              </svg>
-                                            </EuiIconBeaker>
-                                          </EuiIcon>
-                                        </button>
-                                      </EuiButtonIcon>
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                  />
+                                                </svg>
+                                              </EuiIconBeaker>
+                                            </EuiIcon>
+                                          </button>
+                                        </EuiButtonIcon>
+                                      </EuiSmallButtonIcon>
                                     </div>
                                   </div>
                                 </EuiPopover>
@@ -5359,7 +5423,7 @@ exports[`Result component Renders result component 1`] = `
                                 <EuiPopover
                                   anchorPosition="leftUp"
                                   button={
-                                    <EuiButtonIcon
+                                    <EuiSmallButtonIcon
                                       aria-label="Toggle details"
                                       className="euiButtonIcon euiButtonIcon--text"
                                       iconType="expand"
@@ -5379,52 +5443,60 @@ exports[`Result component Renders result component 1`] = `
                                     <div
                                       className="euiPopover__anchor"
                                     >
-                                      <EuiButtonIcon
+                                      <EuiSmallButtonIcon
                                         aria-label="Toggle details"
                                         className="euiButtonIcon euiButtonIcon--text"
                                         iconType="expand"
                                         onClick={[Function]}
                                       >
-                                        <button
+                                        <EuiButtonIcon
                                           aria-label="Toggle details"
-                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
-                                          disabled={false}
+                                          className="euiButtonIcon euiButtonIcon--text"
+                                          iconType="expand"
                                           onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <EuiIcon
-                                            aria-hidden="true"
-                                            className="euiButtonIcon__icon"
-                                            color="inherit"
-                                            size="m"
-                                            type="expand"
-                                          >
-                                            <EuiIconBeaker
-                                              aria-hidden={true}
-                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                              focusable="false"
-                                              role="img"
-                                              style={null}
-                                            >
-                                              <svg
+                                          size="s"
+                                        >
+                                          <button
+                                            aria-label="Toggle details"
+                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small euiButtonIcon euiButtonIcon--text"
+                                            disabled={false}
+                                            onClick={[Function]}
+                                            type="button"
+                                          >
+                                            <EuiIcon
+                                              aria-hidden="true"
+                                              className="euiButtonIcon__icon"
+                                              color="inherit"
+                                              size="m"
+                                              type="expand"
+                                            >
+                                              <EuiIconBeaker
                                                 aria-hidden={true}
                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                 focusable="false"
-                                                height={16}
                                                 role="img"
                                                 style={null}
-                                                viewBox="0 0 16 16"
-                                                width={16}
-                                                xmlns="http://www.w3.org/2000/svg"
                                               >
-                                                <path
-                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                />
-                                              </svg>
-                                            </EuiIconBeaker>
-                                          </EuiIcon>
-                                        </button>
-                                      </EuiButtonIcon>
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                  />
+                                                </svg>
+                                              </EuiIconBeaker>
+                                            </EuiIcon>
+                                          </button>
+                                        </EuiButtonIcon>
+                                      </EuiSmallButtonIcon>
                                     </div>
                                   </div>
                                 </EuiPopover>
@@ -5803,7 +5875,7 @@ exports[`Result component Renders result component 1`] = `
                                 <EuiPopover
                                   anchorPosition="leftUp"
                                   button={
-                                    <EuiButtonIcon
+                                    <EuiSmallButtonIcon
                                       aria-label="Toggle details"
                                       className="euiButtonIcon euiButtonIcon--text"
                                       iconType="expand"
@@ -5823,52 +5895,60 @@ exports[`Result component Renders result component 1`] = `
                                     <div
                                       className="euiPopover__anchor"
                                     >
-                                      <EuiButtonIcon
+                                      <EuiSmallButtonIcon
                                         aria-label="Toggle details"
                                         className="euiButtonIcon euiButtonIcon--text"
                                         iconType="expand"
                                         onClick={[Function]}
                                       >
-                                        <button
+                                        <EuiButtonIcon
                                           aria-label="Toggle details"
-                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
-                                          disabled={false}
+                                          className="euiButtonIcon euiButtonIcon--text"
+                                          iconType="expand"
                                           onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <EuiIcon
-                                            aria-hidden="true"
-                                            className="euiButtonIcon__icon"
-                                            color="inherit"
-                                            size="m"
-                                            type="expand"
-                                          >
-                                            <EuiIconBeaker
-                                              aria-hidden={true}
-                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                              focusable="false"
-                                              role="img"
-                                              style={null}
-                                            >
-                                              <svg
+                                          size="s"
+                                        >
+                                          <button
+                                            aria-label="Toggle details"
+                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small euiButtonIcon euiButtonIcon--text"
+                                            disabled={false}
+                                            onClick={[Function]}
+                                            type="button"
+                                          >
+                                            <EuiIcon
+                                              aria-hidden="true"
+                                              className="euiButtonIcon__icon"
+                                              color="inherit"
+                                              size="m"
+                                              type="expand"
+                                            >
+                                              <EuiIconBeaker
                                                 aria-hidden={true}
                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                 focusable="false"
-                                                height={16}
                                                 role="img"
                                                 style={null}
-                                                viewBox="0 0 16 16"
-                                                width={16}
-                                                xmlns="http://www.w3.org/2000/svg"
                                               >
-                                                <path
-                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                />
-                                              </svg>
-                                            </EuiIconBeaker>
-                                          </EuiIcon>
-                                        </button>
-                                      </EuiButtonIcon>
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                  />
+                                                </svg>
+                                              </EuiIconBeaker>
+                                            </EuiIcon>
+                                          </button>
+                                        </EuiButtonIcon>
+                                      </EuiSmallButtonIcon>
                                     </div>
                                   </div>
                                 </EuiPopover>
@@ -6753,7 +6833,7 @@ exports[`Result component Renders result component 1`] = `
                                 <EuiPopover
                                   anchorPosition="leftUp"
                                   button={
-                                    <EuiButtonIcon
+                                    <EuiSmallButtonIcon
                                       aria-label="Toggle details"
                                       className="euiButtonIcon euiButtonIcon--text"
                                       iconType="expand"
@@ -6773,52 +6853,60 @@ exports[`Result component Renders result component 1`] = `
                                     <div
                                       className="euiPopover__anchor"
                                     >
-                                      <EuiButtonIcon
+                                      <EuiSmallButtonIcon
                                         aria-label="Toggle details"
                                         className="euiButtonIcon euiButtonIcon--text"
                                         iconType="expand"
                                         onClick={[Function]}
                                       >
-                                        <button
+                                        <EuiButtonIcon
                                           aria-label="Toggle details"
-                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
-                                          disabled={false}
+                                          className="euiButtonIcon euiButtonIcon--text"
+                                          iconType="expand"
                                           onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <EuiIcon
-                                            aria-hidden="true"
-                                            className="euiButtonIcon__icon"
-                                            color="inherit"
-                                            size="m"
-                                            type="expand"
-                                          >
-                                            <EuiIconBeaker
-                                              aria-hidden={true}
-                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                              focusable="false"
-                                              role="img"
-                                              style={null}
-                                            >
-                                              <svg
+                                          size="s"
+                                        >
+                                          <button
+                                            aria-label="Toggle details"
+                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small euiButtonIcon euiButtonIcon--text"
+                                            disabled={false}
+                                            onClick={[Function]}
+                                            type="button"
+                                          >
+                                            <EuiIcon
+                                              aria-hidden="true"
+                                              className="euiButtonIcon__icon"
+                                              color="inherit"
+                                              size="m"
+                                              type="expand"
+                                            >
+                                              <EuiIconBeaker
                                                 aria-hidden={true}
                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                 focusable="false"
-                                                height={16}
                                                 role="img"
                                                 style={null}
-                                                viewBox="0 0 16 16"
-                                                width={16}
-                                                xmlns="http://www.w3.org/2000/svg"
                                               >
-                                                <path
-                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                />
-                                              </svg>
-                                            </EuiIconBeaker>
-                                          </EuiIcon>
-                                        </button>
-                                      </EuiButtonIcon>
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                  />
+                                                </svg>
+                                              </EuiIconBeaker>
+                                            </EuiIcon>
+                                          </button>
+                                        </EuiButtonIcon>
+                                      </EuiSmallButtonIcon>
                                     </div>
                                   </div>
                                 </EuiPopover>
@@ -7243,7 +7331,7 @@ exports[`Result component Renders result component 1`] = `
                                 <EuiPopover
                                   anchorPosition="leftUp"
                                   button={
-                                    <EuiButtonIcon
+                                    <EuiSmallButtonIcon
                                       aria-label="Toggle details"
                                       className="euiButtonIcon euiButtonIcon--text"
                                       iconType="expand"
@@ -7263,52 +7351,60 @@ exports[`Result component Renders result component 1`] = `
                                     <div
                                       className="euiPopover__anchor"
                                     >
-                                      <EuiButtonIcon
+                                      <EuiSmallButtonIcon
                                         aria-label="Toggle details"
                                         className="euiButtonIcon euiButtonIcon--text"
                                         iconType="expand"
                                         onClick={[Function]}
                                       >
-                                        <button
+                                        <EuiButtonIcon
                                           aria-label="Toggle details"
-                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
-                                          disabled={false}
+                                          className="euiButtonIcon euiButtonIcon--text"
+                                          iconType="expand"
                                           onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <EuiIcon
-                                            aria-hidden="true"
-                                            className="euiButtonIcon__icon"
-                                            color="inherit"
-                                            size="m"
-                                            type="expand"
-                                          >
-                                            <EuiIconBeaker
-                                              aria-hidden={true}
-                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                              focusable="false"
-                                              role="img"
-                                              style={null}
-                                            >
-                                              <svg
+                                          size="s"
+                                        >
+                                          <button
+                                            aria-label="Toggle details"
+                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small euiButtonIcon euiButtonIcon--text"
+                                            disabled={false}
+                                            onClick={[Function]}
+                                            type="button"
+                                          >
+                                            <EuiIcon
+                                              aria-hidden="true"
+                                              className="euiButtonIcon__icon"
+                                              color="inherit"
+                                              size="m"
+                                              type="expand"
+                                            >
+                                              <EuiIconBeaker
                                                 aria-hidden={true}
                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                 focusable="false"
-                                                height={16}
                                                 role="img"
                                                 style={null}
-                                                viewBox="0 0 16 16"
-                                                width={16}
-                                                xmlns="http://www.w3.org/2000/svg"
                                               >
-                                                <path
-                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                />
-                                              </svg>
-                                            </EuiIconBeaker>
-                                          </EuiIcon>
-                                        </button>
-                                      </EuiButtonIcon>
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                  />
+                                                </svg>
+                                              </EuiIconBeaker>
+                                            </EuiIcon>
+                                          </button>
+                                        </EuiButtonIcon>
+                                      </EuiSmallButtonIcon>
                                     </div>
                                   </div>
                                 </EuiPopover>
@@ -7710,7 +7806,7 @@ exports[`Result component Renders result component 1`] = `
                                 <EuiPopover
                                   anchorPosition="leftUp"
                                   button={
-                                    <EuiButtonIcon
+                                    <EuiSmallButtonIcon
                                       aria-label="Toggle details"
                                       className="euiButtonIcon euiButtonIcon--text"
                                       iconType="expand"
@@ -7730,52 +7826,60 @@ exports[`Result component Renders result component 1`] = `
                                     <div
                                       className="euiPopover__anchor"
                                     >
-                                      <EuiButtonIcon
+                                      <EuiSmallButtonIcon
                                         aria-label="Toggle details"
                                         className="euiButtonIcon euiButtonIcon--text"
                                         iconType="expand"
                                         onClick={[Function]}
                                       >
-                                        <button
+                                        <EuiButtonIcon
                                           aria-label="Toggle details"
-                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
-                                          disabled={false}
+                                          className="euiButtonIcon euiButtonIcon--text"
+                                          iconType="expand"
                                           onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <EuiIcon
-                                            aria-hidden="true"
-                                            className="euiButtonIcon__icon"
-                                            color="inherit"
-                                            size="m"
-                                            type="expand"
-                                          >
-                                            <EuiIconBeaker
-                                              aria-hidden={true}
-                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                              focusable="false"
-                                              role="img"
-                                              style={null}
-                                            >
-                                              <svg
+                                          size="s"
+                                        >
+                                          <button
+                                            aria-label="Toggle details"
+                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small euiButtonIcon euiButtonIcon--text"
+                                            disabled={false}
+                                            onClick={[Function]}
+                                            type="button"
+                                          >
+                                            <EuiIcon
+                                              aria-hidden="true"
+                                              className="euiButtonIcon__icon"
+                                              color="inherit"
+                                              size="m"
+                                              type="expand"
+                                            >
+                                              <EuiIconBeaker
                                                 aria-hidden={true}
                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                 focusable="false"
-                                                height={16}
                                                 role="img"
                                                 style={null}
-                                                viewBox="0 0 16 16"
-                                                width={16}
-                                                xmlns="http://www.w3.org/2000/svg"
                                               >
-                                                <path
-                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                />
-                                              </svg>
-                                            </EuiIconBeaker>
-                                          </EuiIcon>
-                                        </button>
-                                      </EuiButtonIcon>
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                  />
+                                                </svg>
+                                              </EuiIconBeaker>
+                                            </EuiIcon>
+                                          </button>
+                                        </EuiButtonIcon>
+                                      </EuiSmallButtonIcon>
                                     </div>
                                   </div>
                                 </EuiPopover>
@@ -8154,7 +8258,7 @@ exports[`Result component Renders result component 1`] = `
                                 <EuiPopover
                                   anchorPosition="leftUp"
                                   button={
-                                    <EuiButtonIcon
+                                    <EuiSmallButtonIcon
                                       aria-label="Toggle details"
                                       className="euiButtonIcon euiButtonIcon--text"
                                       iconType="expand"
@@ -8174,52 +8278,60 @@ exports[`Result component Renders result component 1`] = `
                                     <div
                                       className="euiPopover__anchor"
                                     >
-                                      <EuiButtonIcon
+                                      <EuiSmallButtonIcon
                                         aria-label="Toggle details"
                                         className="euiButtonIcon euiButtonIcon--text"
                                         iconType="expand"
                                         onClick={[Function]}
                                       >
-                                        <button
+                                        <EuiButtonIcon
                                           aria-label="Toggle details"
-                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
-                                          disabled={false}
+                                          className="euiButtonIcon euiButtonIcon--text"
+                                          iconType="expand"
                                           onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <EuiIcon
-                                            aria-hidden="true"
-                                            className="euiButtonIcon__icon"
-                                            color="inherit"
-                                            size="m"
-                                            type="expand"
-                                          >
-                                            <EuiIconBeaker
-                                              aria-hidden={true}
-                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                              focusable="false"
-                                              role="img"
-                                              style={null}
-                                            >
-                                              <svg
+                                          size="s"
+                                        >
+                                          <button
+                                            aria-label="Toggle details"
+                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small euiButtonIcon euiButtonIcon--text"
+                                            disabled={false}
+                                            onClick={[Function]}
+                                            type="button"
+                                          >
+                                            <EuiIcon
+                                              aria-hidden="true"
+                                              className="euiButtonIcon__icon"
+                                              color="inherit"
+                                              size="m"
+                                              type="expand"
+                                            >
+                                              <EuiIconBeaker
                                                 aria-hidden={true}
                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                 focusable="false"
-                                                height={16}
                                                 role="img"
                                                 style={null}
-                                                viewBox="0 0 16 16"
-                                                width={16}
-                                                xmlns="http://www.w3.org/2000/svg"
                                               >
-                                                <path
-                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                />
-                                              </svg>
-                                            </EuiIconBeaker>
-                                          </EuiIcon>
-                                        </button>
-                                      </EuiButtonIcon>
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                  />
+                                                </svg>
+                                              </EuiIconBeaker>
+                                            </EuiIcon>
+                                          </button>
+                                        </EuiButtonIcon>
+                                      </EuiSmallButtonIcon>
                                     </div>
                                   </div>
                                 </EuiPopover>
@@ -8598,7 +8710,7 @@ exports[`Result component Renders result component 1`] = `
                                 <EuiPopover
                                   anchorPosition="leftUp"
                                   button={
-                                    <EuiButtonIcon
+                                    <EuiSmallButtonIcon
                                       aria-label="Toggle details"
                                       className="euiButtonIcon euiButtonIcon--text"
                                       iconType="expand"
@@ -8618,52 +8730,60 @@ exports[`Result component Renders result component 1`] = `
                                     <div
                                       className="euiPopover__anchor"
                                     >
-                                      <EuiButtonIcon
+                                      <EuiSmallButtonIcon
                                         aria-label="Toggle details"
                                         className="euiButtonIcon euiButtonIcon--text"
                                         iconType="expand"
                                         onClick={[Function]}
                                       >
-                                        <button
+                                        <EuiButtonIcon
                                           aria-label="Toggle details"
-                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
-                                          disabled={false}
+                                          className="euiButtonIcon euiButtonIcon--text"
+                                          iconType="expand"
                                           onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <EuiIcon
-                                            aria-hidden="true"
-                                            className="euiButtonIcon__icon"
-                                            color="inherit"
-                                            size="m"
-                                            type="expand"
-                                          >
-                                            <EuiIconBeaker
-                                              aria-hidden={true}
-                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                              focusable="false"
-                                              role="img"
-                                              style={null}
-                                            >
-                                              <svg
+                                          size="s"
+                                        >
+                                          <button
+                                            aria-label="Toggle details"
+                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small euiButtonIcon euiButtonIcon--text"
+                                            disabled={false}
+                                            onClick={[Function]}
+                                            type="button"
+                                          >
+                                            <EuiIcon
+                                              aria-hidden="true"
+                                              className="euiButtonIcon__icon"
+                                              color="inherit"
+                                              size="m"
+                                              type="expand"
+                                            >
+                                              <EuiIconBeaker
                                                 aria-hidden={true}
                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                 focusable="false"
-                                                height={16}
                                                 role="img"
                                                 style={null}
-                                                viewBox="0 0 16 16"
-                                                width={16}
-                                                xmlns="http://www.w3.org/2000/svg"
                                               >
-                                                <path
-                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                />
-                                              </svg>
-                                            </EuiIconBeaker>
-                                          </EuiIcon>
-                                        </button>
-                                      </EuiButtonIcon>
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                  />
+                                                </svg>
+                                              </EuiIconBeaker>
+                                            </EuiIcon>
+                                          </button>
+                                        </EuiButtonIcon>
+                                      </EuiSmallButtonIcon>
                                     </div>
                                   </div>
                                 </EuiPopover>
@@ -9042,7 +9162,7 @@ exports[`Result component Renders result component 1`] = `
                                 <EuiPopover
                                   anchorPosition="leftUp"
                                   button={
-                                    <EuiButtonIcon
+                                    <EuiSmallButtonIcon
                                       aria-label="Toggle details"
                                       className="euiButtonIcon euiButtonIcon--text"
                                       iconType="expand"
@@ -9062,52 +9182,60 @@ exports[`Result component Renders result component 1`] = `
                                     <div
                                       className="euiPopover__anchor"
                                     >
-                                      <EuiButtonIcon
+                                      <EuiSmallButtonIcon
                                         aria-label="Toggle details"
                                         className="euiButtonIcon euiButtonIcon--text"
                                         iconType="expand"
                                         onClick={[Function]}
                                       >
-                                        <button
+                                        <EuiButtonIcon
                                           aria-label="Toggle details"
-                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
-                                          disabled={false}
+                                          className="euiButtonIcon euiButtonIcon--text"
+                                          iconType="expand"
                                           onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <EuiIcon
-                                            aria-hidden="true"
-                                            className="euiButtonIcon__icon"
-                                            color="inherit"
-                                            size="m"
-                                            type="expand"
-                                          >
-                                            <EuiIconBeaker
-                                              aria-hidden={true}
-                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                              focusable="false"
-                                              role="img"
-                                              style={null}
-                                            >
-                                              <svg
+                                          size="s"
+                                        >
+                                          <button
+                                            aria-label="Toggle details"
+                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small euiButtonIcon euiButtonIcon--text"
+                                            disabled={false}
+                                            onClick={[Function]}
+                                            type="button"
+                                          >
+                                            <EuiIcon
+                                              aria-hidden="true"
+                                              className="euiButtonIcon__icon"
+                                              color="inherit"
+                                              size="m"
+                                              type="expand"
+                                            >
+                                              <EuiIconBeaker
                                                 aria-hidden={true}
                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                 focusable="false"
-                                                height={16}
                                                 role="img"
                                                 style={null}
-                                                viewBox="0 0 16 16"
-                                                width={16}
-                                                xmlns="http://www.w3.org/2000/svg"
                                               >
-                                                <path
-                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                />
-                                              </svg>
-                                            </EuiIconBeaker>
-                                          </EuiIcon>
-                                        </button>
-                                      </EuiButtonIcon>
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                  />
+                                                </svg>
+                                              </EuiIconBeaker>
+                                            </EuiIcon>
+                                          </button>
+                                        </EuiButtonIcon>
+                                      </EuiSmallButtonIcon>
                                     </div>
                                   </div>
                                 </EuiPopover>
@@ -9509,7 +9637,7 @@ exports[`Result component Renders result component 1`] = `
                                 <EuiPopover
                                   anchorPosition="leftUp"
                                   button={
-                                    <EuiButtonIcon
+                                    <EuiSmallButtonIcon
                                       aria-label="Toggle details"
                                       className="euiButtonIcon euiButtonIcon--text"
                                       iconType="expand"
@@ -9529,52 +9657,60 @@ exports[`Result component Renders result component 1`] = `
                                     <div
                                       className="euiPopover__anchor"
                                     >
-                                      <EuiButtonIcon
+                                      <EuiSmallButtonIcon
                                         aria-label="Toggle details"
                                         className="euiButtonIcon euiButtonIcon--text"
                                         iconType="expand"
                                         onClick={[Function]}
                                       >
-                                        <button
+                                        <EuiButtonIcon
                                           aria-label="Toggle details"
-                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
-                                          disabled={false}
+                                          className="euiButtonIcon euiButtonIcon--text"
+                                          iconType="expand"
                                           onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <EuiIcon
-                                            aria-hidden="true"
-                                            className="euiButtonIcon__icon"
-                                            color="inherit"
-                                            size="m"
-                                            type="expand"
-                                          >
-                                            <EuiIconBeaker
-                                              aria-hidden={true}
-                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                              focusable="false"
-                                              role="img"
-                                              style={null}
-                                            >
-                                              <svg
+                                          size="s"
+                                        >
+                                          <button
+                                            aria-label="Toggle details"
+                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small euiButtonIcon euiButtonIcon--text"
+                                            disabled={false}
+                                            onClick={[Function]}
+                                            type="button"
+                                          >
+                                            <EuiIcon
+                                              aria-hidden="true"
+                                              className="euiButtonIcon__icon"
+                                              color="inherit"
+                                              size="m"
+                                              type="expand"
+                                            >
+                                              <EuiIconBeaker
                                                 aria-hidden={true}
                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                 focusable="false"
-                                                height={16}
                                                 role="img"
                                                 style={null}
-                                                viewBox="0 0 16 16"
-                                                width={16}
-                                                xmlns="http://www.w3.org/2000/svg"
                                               >
-                                                <path
-                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                />
-                                              </svg>
-                                            </EuiIconBeaker>
-                                          </EuiIcon>
-                                        </button>
-                                      </EuiButtonIcon>
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                  />
+                                                </svg>
+                                              </EuiIconBeaker>
+                                            </EuiIcon>
+                                          </button>
+                                        </EuiButtonIcon>
+                                      </EuiSmallButtonIcon>
                                     </div>
                                   </div>
                                 </EuiPopover>
@@ -9953,7 +10089,7 @@ exports[`Result component Renders result component 1`] = `
                                 <EuiPopover
                                   anchorPosition="leftUp"
                                   button={
-                                    <EuiButtonIcon
+                                    <EuiSmallButtonIcon
                                       aria-label="Toggle details"
                                       className="euiButtonIcon euiButtonIcon--text"
                                       iconType="expand"
@@ -9973,52 +10109,60 @@ exports[`Result component Renders result component 1`] = `
                                     <div
                                       className="euiPopover__anchor"
                                     >
-                                      <EuiButtonIcon
+                                      <EuiSmallButtonIcon
                                         aria-label="Toggle details"
                                         className="euiButtonIcon euiButtonIcon--text"
                                         iconType="expand"
                                         onClick={[Function]}
                                       >
-                                        <button
+                                        <EuiButtonIcon
                                           aria-label="Toggle details"
-                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
-                                          disabled={false}
+                                          className="euiButtonIcon euiButtonIcon--text"
+                                          iconType="expand"
                                           onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <EuiIcon
-                                            aria-hidden="true"
-                                            className="euiButtonIcon__icon"
-                                            color="inherit"
-                                            size="m"
-                                            type="expand"
-                                          >
-                                            <EuiIconBeaker
-                                              aria-hidden={true}
-                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                              focusable="false"
-                                              role="img"
-                                              style={null}
-                                            >
-                                              <svg
+                                          size="s"
+                                        >
+                                          <button
+                                            aria-label="Toggle details"
+                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small euiButtonIcon euiButtonIcon--text"
+                                            disabled={false}
+                                            onClick={[Function]}
+                                            type="button"
+                                          >
+                                            <EuiIcon
+                                              aria-hidden="true"
+                                              className="euiButtonIcon__icon"
+                                              color="inherit"
+                                              size="m"
+                                              type="expand"
+                                            >
+                                              <EuiIconBeaker
                                                 aria-hidden={true}
                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                 focusable="false"
-                                                height={16}
                                                 role="img"
                                                 style={null}
-                                                viewBox="0 0 16 16"
-                                                width={16}
-                                                xmlns="http://www.w3.org/2000/svg"
                                               >
-                                                <path
-                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                />
-                                              </svg>
-                                            </EuiIconBeaker>
-                                          </EuiIcon>
-                                        </button>
-                                      </EuiButtonIcon>
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                  />
+                                                </svg>
+                                              </EuiIconBeaker>
+                                            </EuiIcon>
+                                          </button>
+                                        </EuiButtonIcon>
+                                      </EuiSmallButtonIcon>
                                     </div>
                                   </div>
                                 </EuiPopover>
@@ -10420,7 +10564,7 @@ exports[`Result component Renders result component 1`] = `
                                 <EuiPopover
                                   anchorPosition="leftUp"
                                   button={
-                                    <EuiButtonIcon
+                                    <EuiSmallButtonIcon
                                       aria-label="Toggle details"
                                       className="euiButtonIcon euiButtonIcon--text"
                                       iconType="expand"
@@ -10440,52 +10584,60 @@ exports[`Result component Renders result component 1`] = `
                                     <div
                                       className="euiPopover__anchor"
                                     >
-                                      <EuiButtonIcon
+                                      <EuiSmallButtonIcon
                                         aria-label="Toggle details"
                                         className="euiButtonIcon euiButtonIcon--text"
                                         iconType="expand"
                                         onClick={[Function]}
                                       >
-                                        <button
+                                        <EuiButtonIcon
                                           aria-label="Toggle details"
-                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
-                                          disabled={false}
+                                          className="euiButtonIcon euiButtonIcon--text"
+                                          iconType="expand"
                                           onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <EuiIcon
-                                            aria-hidden="true"
-                                            className="euiButtonIcon__icon"
-                                            color="inherit"
-                                            size="m"
-                                            type="expand"
-                                          >
-                                            <EuiIconBeaker
-                                              aria-hidden={true}
-                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                              focusable="false"
-                                              role="img"
-                                              style={null}
-                                            >
-                                              <svg
+                                          size="s"
+                                        >
+                                          <button
+                                            aria-label="Toggle details"
+                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small euiButtonIcon euiButtonIcon--text"
+                                            disabled={false}
+                                            onClick={[Function]}
+                                            type="button"
+                                          >
+                                            <EuiIcon
+                                              aria-hidden="true"
+                                              className="euiButtonIcon__icon"
+                                              color="inherit"
+                                              size="m"
+                                              type="expand"
+                                            >
+                                              <EuiIconBeaker
                                                 aria-hidden={true}
                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                 focusable="false"
-                                                height={16}
                                                 role="img"
                                                 style={null}
-                                                viewBox="0 0 16 16"
-                                                width={16}
-                                                xmlns="http://www.w3.org/2000/svg"
                                               >
-                                                <path
-                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                />
-                                              </svg>
-                                            </EuiIconBeaker>
-                                          </EuiIcon>
-                                        </button>
-                                      </EuiButtonIcon>
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                  />
+                                                </svg>
+                                              </EuiIconBeaker>
+                                            </EuiIcon>
+                                          </button>
+                                        </EuiButtonIcon>
+                                      </EuiSmallButtonIcon>
                                     </div>
                                   </div>
                                 </EuiPopover>
@@ -10864,7 +11016,7 @@ exports[`Result component Renders result component 1`] = `
                                 <EuiPopover
                                   anchorPosition="leftUp"
                                   button={
-                                    <EuiButtonIcon
+                                    <EuiSmallButtonIcon
                                       aria-label="Toggle details"
                                       className="euiButtonIcon euiButtonIcon--text"
                                       iconType="expand"
@@ -10884,52 +11036,60 @@ exports[`Result component Renders result component 1`] = `
                                     <div
                                       className="euiPopover__anchor"
                                     >
-                                      <EuiButtonIcon
+                                      <EuiSmallButtonIcon
                                         aria-label="Toggle details"
                                         className="euiButtonIcon euiButtonIcon--text"
                                         iconType="expand"
                                         onClick={[Function]}
                                       >
-                                        <button
+                                        <EuiButtonIcon
                                           aria-label="Toggle details"
-                                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
-                                          disabled={false}
+                                          className="euiButtonIcon euiButtonIcon--text"
+                                          iconType="expand"
                                           onClick={[Function]}
-                                          type="button"
-                                        >
-                                          <EuiIcon
-                                            aria-hidden="true"
-                                            className="euiButtonIcon__icon"
-                                            color="inherit"
-                                            size="m"
-                                            type="expand"
-                                          >
-                                            <EuiIconBeaker
-                                              aria-hidden={true}
-                                              className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                                              focusable="false"
-                                              role="img"
-                                              style={null}
-                                            >
-                                              <svg
+                                          size="s"
+                                        >
+                                          <button
+                                            aria-label="Toggle details"
+                                            className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small euiButtonIcon euiButtonIcon--text"
+                                            disabled={false}
+                                            onClick={[Function]}
+                                            type="button"
+                                          >
+                                            <EuiIcon
+                                              aria-hidden="true"
+                                              className="euiButtonIcon__icon"
+                                              color="inherit"
+                                              size="m"
+                                              type="expand"
+                                            >
+                                              <EuiIconBeaker
                                                 aria-hidden={true}
                                                 className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                                                 focusable="false"
-                                                height={16}
                                                 role="img"
                                                 style={null}
-                                                viewBox="0 0 16 16"
-                                                width={16}
-                                                xmlns="http://www.w3.org/2000/svg"
                                               >
-                                                <path
-                                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                />
-                                              </svg>
-                                            </EuiIconBeaker>
-                                          </EuiIcon>
-                                        </button>
-                                      </EuiButtonIcon>
+                                                <svg
+                                                  aria-hidden={true}
+                                                  className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                                  focusable="false"
+                                                  height={16}
+                                                  role="img"
+                                                  style={null}
+                                                  viewBox="0 0 16 16"
+                                                  width={16}
+                                                  xmlns="http://www.w3.org/2000/svg"
+                                                >
+                                                  <path
+                                                    d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                  />
+                                                </svg>
+                                              </EuiIconBeaker>
+                                            </EuiIcon>
+                                          </button>
+                                        </EuiButtonIcon>
+                                      </EuiSmallButtonIcon>
                                     </div>
                                   </div>
                                 </EuiPopover>
diff --git a/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_grid.test.tsx.snap b/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_grid.test.tsx.snap
index 14134e7d..276f8faf 100644
--- a/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_grid.test.tsx.snap
+++ b/public/components/query_compare/search_result/result_components/__test__/__snapshots__/result_grid.test.tsx.snap
@@ -546,7 +546,7 @@ exports[`Result grid component Renders result grid component 1`] = `
               <EuiPopover
                 anchorPosition="leftUp"
                 button={
-                  <EuiButtonIcon
+                  <EuiSmallButtonIcon
                     aria-label="Toggle details"
                     className="euiButtonIcon euiButtonIcon--text"
                     iconType="expand"
@@ -566,52 +566,60 @@ exports[`Result grid component Renders result grid component 1`] = `
                   <div
                     className="euiPopover__anchor"
                   >
-                    <EuiButtonIcon
+                    <EuiSmallButtonIcon
                       aria-label="Toggle details"
                       className="euiButtonIcon euiButtonIcon--text"
                       iconType="expand"
                       onClick={[Function]}
                     >
-                      <button
+                      <EuiButtonIcon
                         aria-label="Toggle details"
-                        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
-                        disabled={false}
+                        className="euiButtonIcon euiButtonIcon--text"
+                        iconType="expand"
                         onClick={[Function]}
-                        type="button"
+                        size="s"
                       >
-                        <EuiIcon
-                          aria-hidden="true"
-                          className="euiButtonIcon__icon"
-                          color="inherit"
-                          size="m"
-                          type="expand"
+                        <button
+                          aria-label="Toggle details"
+                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small euiButtonIcon euiButtonIcon--text"
+                          disabled={false}
+                          onClick={[Function]}
+                          type="button"
                         >
-                          <EuiIconBeaker
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                            focusable="false"
-                            role="img"
-                            style={null}
-                          >
-                            <svg
+                          <EuiIcon
+                            aria-hidden="true"
+                            className="euiButtonIcon__icon"
+                            color="inherit"
+                            size="m"
+                            type="expand"
+                          >
+                            <EuiIconBeaker
                               aria-hidden={true}
                               className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                               focusable="false"
-                              height={16}
                               role="img"
                               style={null}
-                              viewBox="0 0 16 16"
-                              width={16}
-                              xmlns="http://www.w3.org/2000/svg"
                             >
-                              <path
-                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                              />
-                            </svg>
-                          </EuiIconBeaker>
-                        </EuiIcon>
-                      </button>
-                    </EuiButtonIcon>
+                              <svg
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                focusable="false"
+                                height={16}
+                                role="img"
+                                style={null}
+                                viewBox="0 0 16 16"
+                                width={16}
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                />
+                              </svg>
+                            </EuiIconBeaker>
+                          </EuiIcon>
+                        </button>
+                      </EuiButtonIcon>
+                    </EuiSmallButtonIcon>
                   </div>
                 </div>
               </EuiPopover>
@@ -975,7 +983,7 @@ exports[`Result grid component Renders result grid component 1`] = `
               <EuiPopover
                 anchorPosition="leftUp"
                 button={
-                  <EuiButtonIcon
+                  <EuiSmallButtonIcon
                     aria-label="Toggle details"
                     className="euiButtonIcon euiButtonIcon--text"
                     iconType="expand"
@@ -995,52 +1003,60 @@ exports[`Result grid component Renders result grid component 1`] = `
                   <div
                     className="euiPopover__anchor"
                   >
-                    <EuiButtonIcon
+                    <EuiSmallButtonIcon
                       aria-label="Toggle details"
                       className="euiButtonIcon euiButtonIcon--text"
                       iconType="expand"
                       onClick={[Function]}
                     >
-                      <button
+                      <EuiButtonIcon
                         aria-label="Toggle details"
-                        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
-                        disabled={false}
+                        className="euiButtonIcon euiButtonIcon--text"
+                        iconType="expand"
                         onClick={[Function]}
-                        type="button"
+                        size="s"
                       >
-                        <EuiIcon
-                          aria-hidden="true"
-                          className="euiButtonIcon__icon"
-                          color="inherit"
-                          size="m"
-                          type="expand"
+                        <button
+                          aria-label="Toggle details"
+                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small euiButtonIcon euiButtonIcon--text"
+                          disabled={false}
+                          onClick={[Function]}
+                          type="button"
                         >
-                          <EuiIconBeaker
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                            focusable="false"
-                            role="img"
-                            style={null}
-                          >
-                            <svg
+                          <EuiIcon
+                            aria-hidden="true"
+                            className="euiButtonIcon__icon"
+                            color="inherit"
+                            size="m"
+                            type="expand"
+                          >
+                            <EuiIconBeaker
                               aria-hidden={true}
                               className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                               focusable="false"
-                              height={16}
                               role="img"
                               style={null}
-                              viewBox="0 0 16 16"
-                              width={16}
-                              xmlns="http://www.w3.org/2000/svg"
                             >
-                              <path
-                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                              />
-                            </svg>
-                          </EuiIconBeaker>
-                        </EuiIcon>
-                      </button>
-                    </EuiButtonIcon>
+                              <svg
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                focusable="false"
+                                height={16}
+                                role="img"
+                                style={null}
+                                viewBox="0 0 16 16"
+                                width={16}
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                />
+                              </svg>
+                            </EuiIconBeaker>
+                          </EuiIcon>
+                        </button>
+                      </EuiButtonIcon>
+                    </EuiSmallButtonIcon>
                   </div>
                 </div>
               </EuiPopover>
@@ -1381,7 +1397,7 @@ exports[`Result grid component Renders result grid component 1`] = `
               <EuiPopover
                 anchorPosition="leftUp"
                 button={
-                  <EuiButtonIcon
+                  <EuiSmallButtonIcon
                     aria-label="Toggle details"
                     className="euiButtonIcon euiButtonIcon--text"
                     iconType="expand"
@@ -1401,52 +1417,60 @@ exports[`Result grid component Renders result grid component 1`] = `
                   <div
                     className="euiPopover__anchor"
                   >
-                    <EuiButtonIcon
+                    <EuiSmallButtonIcon
                       aria-label="Toggle details"
                       className="euiButtonIcon euiButtonIcon--text"
                       iconType="expand"
                       onClick={[Function]}
                     >
-                      <button
+                      <EuiButtonIcon
                         aria-label="Toggle details"
-                        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
-                        disabled={false}
+                        className="euiButtonIcon euiButtonIcon--text"
+                        iconType="expand"
                         onClick={[Function]}
-                        type="button"
+                        size="s"
                       >
-                        <EuiIcon
-                          aria-hidden="true"
-                          className="euiButtonIcon__icon"
-                          color="inherit"
-                          size="m"
-                          type="expand"
+                        <button
+                          aria-label="Toggle details"
+                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small euiButtonIcon euiButtonIcon--text"
+                          disabled={false}
+                          onClick={[Function]}
+                          type="button"
                         >
-                          <EuiIconBeaker
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                            focusable="false"
-                            role="img"
-                            style={null}
-                          >
-                            <svg
+                          <EuiIcon
+                            aria-hidden="true"
+                            className="euiButtonIcon__icon"
+                            color="inherit"
+                            size="m"
+                            type="expand"
+                          >
+                            <EuiIconBeaker
                               aria-hidden={true}
                               className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                               focusable="false"
-                              height={16}
                               role="img"
                               style={null}
-                              viewBox="0 0 16 16"
-                              width={16}
-                              xmlns="http://www.w3.org/2000/svg"
                             >
-                              <path
-                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                              />
-                            </svg>
-                          </EuiIconBeaker>
-                        </EuiIcon>
-                      </button>
-                    </EuiButtonIcon>
+                              <svg
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                focusable="false"
+                                height={16}
+                                role="img"
+                                style={null}
+                                viewBox="0 0 16 16"
+                                width={16}
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                />
+                              </svg>
+                            </EuiIconBeaker>
+                          </EuiIcon>
+                        </button>
+                      </EuiButtonIcon>
+                    </EuiSmallButtonIcon>
                   </div>
                 </div>
               </EuiPopover>
@@ -1764,7 +1788,7 @@ exports[`Result grid component Renders result grid component 1`] = `
               <EuiPopover
                 anchorPosition="leftUp"
                 button={
-                  <EuiButtonIcon
+                  <EuiSmallButtonIcon
                     aria-label="Toggle details"
                     className="euiButtonIcon euiButtonIcon--text"
                     iconType="expand"
@@ -1784,52 +1808,60 @@ exports[`Result grid component Renders result grid component 1`] = `
                   <div
                     className="euiPopover__anchor"
                   >
-                    <EuiButtonIcon
+                    <EuiSmallButtonIcon
                       aria-label="Toggle details"
                       className="euiButtonIcon euiButtonIcon--text"
                       iconType="expand"
                       onClick={[Function]}
                     >
-                      <button
+                      <EuiButtonIcon
                         aria-label="Toggle details"
-                        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
-                        disabled={false}
+                        className="euiButtonIcon euiButtonIcon--text"
+                        iconType="expand"
                         onClick={[Function]}
-                        type="button"
+                        size="s"
                       >
-                        <EuiIcon
-                          aria-hidden="true"
-                          className="euiButtonIcon__icon"
-                          color="inherit"
-                          size="m"
-                          type="expand"
+                        <button
+                          aria-label="Toggle details"
+                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small euiButtonIcon euiButtonIcon--text"
+                          disabled={false}
+                          onClick={[Function]}
+                          type="button"
                         >
-                          <EuiIconBeaker
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                            focusable="false"
-                            role="img"
-                            style={null}
-                          >
-                            <svg
+                          <EuiIcon
+                            aria-hidden="true"
+                            className="euiButtonIcon__icon"
+                            color="inherit"
+                            size="m"
+                            type="expand"
+                          >
+                            <EuiIconBeaker
                               aria-hidden={true}
                               className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                               focusable="false"
-                              height={16}
                               role="img"
                               style={null}
-                              viewBox="0 0 16 16"
-                              width={16}
-                              xmlns="http://www.w3.org/2000/svg"
                             >
-                              <path
-                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                              />
-                            </svg>
-                          </EuiIconBeaker>
-                        </EuiIcon>
-                      </button>
-                    </EuiButtonIcon>
+                              <svg
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                focusable="false"
+                                height={16}
+                                role="img"
+                                style={null}
+                                viewBox="0 0 16 16"
+                                width={16}
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                />
+                              </svg>
+                            </EuiIconBeaker>
+                          </EuiIcon>
+                        </button>
+                      </EuiButtonIcon>
+                    </EuiSmallButtonIcon>
                   </div>
                 </div>
               </EuiPopover>
@@ -2208,7 +2240,7 @@ exports[`Result grid component Renders result grid component 1`] = `
               <EuiPopover
                 anchorPosition="leftUp"
                 button={
-                  <EuiButtonIcon
+                  <EuiSmallButtonIcon
                     aria-label="Toggle details"
                     className="euiButtonIcon euiButtonIcon--text"
                     iconType="expand"
@@ -2228,52 +2260,60 @@ exports[`Result grid component Renders result grid component 1`] = `
                   <div
                     className="euiPopover__anchor"
                   >
-                    <EuiButtonIcon
+                    <EuiSmallButtonIcon
                       aria-label="Toggle details"
                       className="euiButtonIcon euiButtonIcon--text"
                       iconType="expand"
                       onClick={[Function]}
                     >
-                      <button
+                      <EuiButtonIcon
                         aria-label="Toggle details"
-                        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
-                        disabled={false}
+                        className="euiButtonIcon euiButtonIcon--text"
+                        iconType="expand"
                         onClick={[Function]}
-                        type="button"
+                        size="s"
                       >
-                        <EuiIcon
-                          aria-hidden="true"
-                          className="euiButtonIcon__icon"
-                          color="inherit"
-                          size="m"
-                          type="expand"
+                        <button
+                          aria-label="Toggle details"
+                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small euiButtonIcon euiButtonIcon--text"
+                          disabled={false}
+                          onClick={[Function]}
+                          type="button"
                         >
-                          <EuiIconBeaker
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                            focusable="false"
-                            role="img"
-                            style={null}
-                          >
-                            <svg
+                          <EuiIcon
+                            aria-hidden="true"
+                            className="euiButtonIcon__icon"
+                            color="inherit"
+                            size="m"
+                            type="expand"
+                          >
+                            <EuiIconBeaker
                               aria-hidden={true}
                               className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                               focusable="false"
-                              height={16}
                               role="img"
                               style={null}
-                              viewBox="0 0 16 16"
-                              width={16}
-                              xmlns="http://www.w3.org/2000/svg"
                             >
-                              <path
-                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                              />
-                            </svg>
-                          </EuiIconBeaker>
-                        </EuiIcon>
-                      </button>
-                    </EuiButtonIcon>
+                              <svg
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                focusable="false"
+                                height={16}
+                                role="img"
+                                style={null}
+                                viewBox="0 0 16 16"
+                                width={16}
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                />
+                              </svg>
+                            </EuiIconBeaker>
+                          </EuiIcon>
+                        </button>
+                      </EuiButtonIcon>
+                    </EuiSmallButtonIcon>
                   </div>
                 </div>
               </EuiPopover>
@@ -2652,7 +2692,7 @@ exports[`Result grid component Renders result grid component 1`] = `
               <EuiPopover
                 anchorPosition="leftUp"
                 button={
-                  <EuiButtonIcon
+                  <EuiSmallButtonIcon
                     aria-label="Toggle details"
                     className="euiButtonIcon euiButtonIcon--text"
                     iconType="expand"
@@ -2672,52 +2712,60 @@ exports[`Result grid component Renders result grid component 1`] = `
                   <div
                     className="euiPopover__anchor"
                   >
-                    <EuiButtonIcon
+                    <EuiSmallButtonIcon
                       aria-label="Toggle details"
                       className="euiButtonIcon euiButtonIcon--text"
                       iconType="expand"
                       onClick={[Function]}
                     >
-                      <button
+                      <EuiButtonIcon
                         aria-label="Toggle details"
-                        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
-                        disabled={false}
+                        className="euiButtonIcon euiButtonIcon--text"
+                        iconType="expand"
                         onClick={[Function]}
-                        type="button"
+                        size="s"
                       >
-                        <EuiIcon
-                          aria-hidden="true"
-                          className="euiButtonIcon__icon"
-                          color="inherit"
-                          size="m"
-                          type="expand"
+                        <button
+                          aria-label="Toggle details"
+                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small euiButtonIcon euiButtonIcon--text"
+                          disabled={false}
+                          onClick={[Function]}
+                          type="button"
                         >
-                          <EuiIconBeaker
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                            focusable="false"
-                            role="img"
-                            style={null}
-                          >
-                            <svg
+                          <EuiIcon
+                            aria-hidden="true"
+                            className="euiButtonIcon__icon"
+                            color="inherit"
+                            size="m"
+                            type="expand"
+                          >
+                            <EuiIconBeaker
                               aria-hidden={true}
                               className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                               focusable="false"
-                              height={16}
                               role="img"
                               style={null}
-                              viewBox="0 0 16 16"
-                              width={16}
-                              xmlns="http://www.w3.org/2000/svg"
                             >
-                              <path
-                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                              />
-                            </svg>
-                          </EuiIconBeaker>
-                        </EuiIcon>
-                      </button>
-                    </EuiButtonIcon>
+                              <svg
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                focusable="false"
+                                height={16}
+                                role="img"
+                                style={null}
+                                viewBox="0 0 16 16"
+                                width={16}
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                />
+                              </svg>
+                            </EuiIconBeaker>
+                          </EuiIcon>
+                        </button>
+                      </EuiButtonIcon>
+                    </EuiSmallButtonIcon>
                   </div>
                 </div>
               </EuiPopover>
@@ -3119,7 +3167,7 @@ exports[`Result grid component Renders result grid component 1`] = `
               <EuiPopover
                 anchorPosition="leftUp"
                 button={
-                  <EuiButtonIcon
+                  <EuiSmallButtonIcon
                     aria-label="Toggle details"
                     className="euiButtonIcon euiButtonIcon--text"
                     iconType="expand"
@@ -3139,52 +3187,60 @@ exports[`Result grid component Renders result grid component 1`] = `
                   <div
                     className="euiPopover__anchor"
                   >
-                    <EuiButtonIcon
+                    <EuiSmallButtonIcon
                       aria-label="Toggle details"
                       className="euiButtonIcon euiButtonIcon--text"
                       iconType="expand"
                       onClick={[Function]}
                     >
-                      <button
+                      <EuiButtonIcon
                         aria-label="Toggle details"
-                        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
-                        disabled={false}
+                        className="euiButtonIcon euiButtonIcon--text"
+                        iconType="expand"
                         onClick={[Function]}
-                        type="button"
+                        size="s"
                       >
-                        <EuiIcon
-                          aria-hidden="true"
-                          className="euiButtonIcon__icon"
-                          color="inherit"
-                          size="m"
-                          type="expand"
+                        <button
+                          aria-label="Toggle details"
+                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small euiButtonIcon euiButtonIcon--text"
+                          disabled={false}
+                          onClick={[Function]}
+                          type="button"
                         >
-                          <EuiIconBeaker
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                            focusable="false"
-                            role="img"
-                            style={null}
-                          >
-                            <svg
+                          <EuiIcon
+                            aria-hidden="true"
+                            className="euiButtonIcon__icon"
+                            color="inherit"
+                            size="m"
+                            type="expand"
+                          >
+                            <EuiIconBeaker
                               aria-hidden={true}
                               className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                               focusable="false"
-                              height={16}
                               role="img"
                               style={null}
-                              viewBox="0 0 16 16"
-                              width={16}
-                              xmlns="http://www.w3.org/2000/svg"
                             >
-                              <path
-                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                              />
-                            </svg>
-                          </EuiIconBeaker>
-                        </EuiIcon>
-                      </button>
-                    </EuiButtonIcon>
+                              <svg
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                focusable="false"
+                                height={16}
+                                role="img"
+                                style={null}
+                                viewBox="0 0 16 16"
+                                width={16}
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                />
+                              </svg>
+                            </EuiIconBeaker>
+                          </EuiIcon>
+                        </button>
+                      </EuiButtonIcon>
+                    </EuiSmallButtonIcon>
                   </div>
                 </div>
               </EuiPopover>
@@ -3563,7 +3619,7 @@ exports[`Result grid component Renders result grid component 1`] = `
               <EuiPopover
                 anchorPosition="leftUp"
                 button={
-                  <EuiButtonIcon
+                  <EuiSmallButtonIcon
                     aria-label="Toggle details"
                     className="euiButtonIcon euiButtonIcon--text"
                     iconType="expand"
@@ -3583,52 +3639,60 @@ exports[`Result grid component Renders result grid component 1`] = `
                   <div
                     className="euiPopover__anchor"
                   >
-                    <EuiButtonIcon
+                    <EuiSmallButtonIcon
                       aria-label="Toggle details"
                       className="euiButtonIcon euiButtonIcon--text"
                       iconType="expand"
                       onClick={[Function]}
                     >
-                      <button
+                      <EuiButtonIcon
                         aria-label="Toggle details"
-                        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
-                        disabled={false}
+                        className="euiButtonIcon euiButtonIcon--text"
+                        iconType="expand"
                         onClick={[Function]}
-                        type="button"
+                        size="s"
                       >
-                        <EuiIcon
-                          aria-hidden="true"
-                          className="euiButtonIcon__icon"
-                          color="inherit"
-                          size="m"
-                          type="expand"
+                        <button
+                          aria-label="Toggle details"
+                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small euiButtonIcon euiButtonIcon--text"
+                          disabled={false}
+                          onClick={[Function]}
+                          type="button"
                         >
-                          <EuiIconBeaker
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                            focusable="false"
-                            role="img"
-                            style={null}
-                          >
-                            <svg
+                          <EuiIcon
+                            aria-hidden="true"
+                            className="euiButtonIcon__icon"
+                            color="inherit"
+                            size="m"
+                            type="expand"
+                          >
+                            <EuiIconBeaker
                               aria-hidden={true}
                               className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                               focusable="false"
-                              height={16}
                               role="img"
                               style={null}
-                              viewBox="0 0 16 16"
-                              width={16}
-                              xmlns="http://www.w3.org/2000/svg"
                             >
-                              <path
-                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                              />
-                            </svg>
-                          </EuiIconBeaker>
-                        </EuiIcon>
-                      </button>
-                    </EuiButtonIcon>
+                              <svg
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                focusable="false"
+                                height={16}
+                                role="img"
+                                style={null}
+                                viewBox="0 0 16 16"
+                                width={16}
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                />
+                              </svg>
+                            </EuiIconBeaker>
+                          </EuiIcon>
+                        </button>
+                      </EuiButtonIcon>
+                    </EuiSmallButtonIcon>
                   </div>
                 </div>
               </EuiPopover>
@@ -4030,7 +4094,7 @@ exports[`Result grid component Renders result grid component 1`] = `
               <EuiPopover
                 anchorPosition="leftUp"
                 button={
-                  <EuiButtonIcon
+                  <EuiSmallButtonIcon
                     aria-label="Toggle details"
                     className="euiButtonIcon euiButtonIcon--text"
                     iconType="expand"
@@ -4050,52 +4114,60 @@ exports[`Result grid component Renders result grid component 1`] = `
                   <div
                     className="euiPopover__anchor"
                   >
-                    <EuiButtonIcon
+                    <EuiSmallButtonIcon
                       aria-label="Toggle details"
                       className="euiButtonIcon euiButtonIcon--text"
                       iconType="expand"
                       onClick={[Function]}
                     >
-                      <button
+                      <EuiButtonIcon
                         aria-label="Toggle details"
-                        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
-                        disabled={false}
+                        className="euiButtonIcon euiButtonIcon--text"
+                        iconType="expand"
                         onClick={[Function]}
-                        type="button"
+                        size="s"
                       >
-                        <EuiIcon
-                          aria-hidden="true"
-                          className="euiButtonIcon__icon"
-                          color="inherit"
-                          size="m"
-                          type="expand"
+                        <button
+                          aria-label="Toggle details"
+                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small euiButtonIcon euiButtonIcon--text"
+                          disabled={false}
+                          onClick={[Function]}
+                          type="button"
                         >
-                          <EuiIconBeaker
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                            focusable="false"
-                            role="img"
-                            style={null}
-                          >
-                            <svg
+                          <EuiIcon
+                            aria-hidden="true"
+                            className="euiButtonIcon__icon"
+                            color="inherit"
+                            size="m"
+                            type="expand"
+                          >
+                            <EuiIconBeaker
                               aria-hidden={true}
                               className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                               focusable="false"
-                              height={16}
                               role="img"
                               style={null}
-                              viewBox="0 0 16 16"
-                              width={16}
-                              xmlns="http://www.w3.org/2000/svg"
                             >
-                              <path
-                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                              />
-                            </svg>
-                          </EuiIconBeaker>
-                        </EuiIcon>
-                      </button>
-                    </EuiButtonIcon>
+                              <svg
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                focusable="false"
+                                height={16}
+                                role="img"
+                                style={null}
+                                viewBox="0 0 16 16"
+                                width={16}
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                />
+                              </svg>
+                            </EuiIconBeaker>
+                          </EuiIcon>
+                        </button>
+                      </EuiButtonIcon>
+                    </EuiSmallButtonIcon>
                   </div>
                 </div>
               </EuiPopover>
@@ -4474,7 +4546,7 @@ exports[`Result grid component Renders result grid component 1`] = `
               <EuiPopover
                 anchorPosition="leftUp"
                 button={
-                  <EuiButtonIcon
+                  <EuiSmallButtonIcon
                     aria-label="Toggle details"
                     className="euiButtonIcon euiButtonIcon--text"
                     iconType="expand"
@@ -4494,52 +4566,60 @@ exports[`Result grid component Renders result grid component 1`] = `
                   <div
                     className="euiPopover__anchor"
                   >
-                    <EuiButtonIcon
+                    <EuiSmallButtonIcon
                       aria-label="Toggle details"
                       className="euiButtonIcon euiButtonIcon--text"
                       iconType="expand"
                       onClick={[Function]}
                     >
-                      <button
+                      <EuiButtonIcon
                         aria-label="Toggle details"
-                        className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiButtonIcon euiButtonIcon--text"
-                        disabled={false}
+                        className="euiButtonIcon euiButtonIcon--text"
+                        iconType="expand"
                         onClick={[Function]}
-                        type="button"
+                        size="s"
                       >
-                        <EuiIcon
-                          aria-hidden="true"
-                          className="euiButtonIcon__icon"
-                          color="inherit"
-                          size="m"
-                          type="expand"
+                        <button
+                          aria-label="Toggle details"
+                          className="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--small euiButtonIcon euiButtonIcon--text"
+                          disabled={false}
+                          onClick={[Function]}
+                          type="button"
                         >
-                          <EuiIconBeaker
-                            aria-hidden={true}
-                            className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
-                            focusable="false"
-                            role="img"
-                            style={null}
-                          >
-                            <svg
+                          <EuiIcon
+                            aria-hidden="true"
+                            className="euiButtonIcon__icon"
+                            color="inherit"
+                            size="m"
+                            type="expand"
+                          >
+                            <EuiIconBeaker
                               aria-hidden={true}
                               className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                               focusable="false"
-                              height={16}
                               role="img"
                               style={null}
-                              viewBox="0 0 16 16"
-                              width={16}
-                              xmlns="http://www.w3.org/2000/svg"
                             >
-                              <path
-                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                              />
-                            </svg>
-                          </EuiIconBeaker>
-                        </EuiIcon>
-                      </button>
-                    </EuiButtonIcon>
+                              <svg
+                                aria-hidden={true}
+                                className="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                focusable="false"
+                                height={16}
+                                role="img"
+                                style={null}
+                                viewBox="0 0 16 16"
+                                width={16}
+                                xmlns="http://www.w3.org/2000/svg"
+                              >
+                                <path
+                                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                />
+                              </svg>
+                            </EuiIconBeaker>
+                          </EuiIcon>
+                        </button>
+                      </EuiButtonIcon>
+                    </EuiSmallButtonIcon>
                   </div>
                 </div>
               </EuiPopover>
diff --git a/public/components/query_compare/search_result/result_components/result_grid.tsx b/public/components/query_compare/search_result/result_components/result_grid.tsx
index 588e139b..946ed49c 100644
--- a/public/components/query_compare/search_result/result_components/result_grid.tsx
+++ b/public/components/query_compare/search_result/result_components/result_grid.tsx
@@ -5,7 +5,7 @@
 
 
 import {
-  EuiButtonIcon,
+  EuiSmallButtonIcon,
   EuiDescriptionList,
   EuiDescriptionListDescription,
   EuiDescriptionListTitle,
@@ -53,7 +53,7 @@ export const ResultGridComponent = ({
       <td className="osdDocTableCell__toggleDetails" key={uniqueId('grid-td-')}>
         <EuiPopover
           button={
-            <EuiButtonIcon
+            <EuiSmallButtonIcon
               aria-label="Toggle details"
               className="euiButtonIcon euiButtonIcon--text"
               iconType={isResultDetailOpen ? 'minimize' : 'expand'}
diff --git a/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_bar.test.tsx.snap b/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_bar.test.tsx.snap
index 0d2662e7..a512f662 100644
--- a/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_bar.test.tsx.snap
+++ b/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_bar.test.tsx.snap
@@ -23,9 +23,9 @@ exports[`Search bar component Renders search bar component 1`] = `
         <div
           className="euiFlexItem"
         >
-          <EuiFieldSearch
+          <EuiCompressedFieldSearch
             aria-label="Enter your Search query"
-            compressed={false}
+            compressed={true}
             fullWidth={true}
             id="searchRelevance-searchBar"
             incremental={false}
@@ -42,13 +42,13 @@ exports[`Search bar component Renders search bar component 1`] = `
                   "onClick": [Function],
                 }
               }
-              compressed={false}
+              compressed={true}
               fullWidth={true}
               icon="search"
               isLoading={false}
             >
               <div
-                className="euiFormControlLayout euiFormControlLayout--fullWidth"
+                className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
               >
                 <div
                   className="euiFormControlLayout__childrenWrapper"
@@ -56,7 +56,7 @@ exports[`Search bar component Renders search bar component 1`] = `
                   <EuiValidatableControl>
                     <input
                       aria-label="Enter your Search query"
-                      className="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch-isClearable"
+                      className="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--compressed euiFieldSearch-isClearable"
                       id="searchRelevance-searchBar"
                       onChange={[Function]}
                       onKeyUp={[Function]}
@@ -71,7 +71,7 @@ exports[`Search bar component Renders search bar component 1`] = `
                         "onClick": [Function],
                       }
                     }
-                    compressed={false}
+                    compressed={true}
                     icon="search"
                     isLoading={false}
                   >
@@ -79,7 +79,7 @@ exports[`Search bar component Renders search bar component 1`] = `
                       className="euiFormControlLayoutIcons"
                     >
                       <EuiFormControlLayoutCustomIcon
-                        size="m"
+                        size="s"
                         type="search"
                       >
                         <span
@@ -88,19 +88,19 @@ exports[`Search bar component Renders search bar component 1`] = `
                           <EuiIcon
                             aria-hidden="true"
                             className="euiFormControlLayoutCustomIcon__icon"
-                            size="m"
+                            size="s"
                             type="search"
                           >
                             <EuiIconBeaker
                               aria-hidden={true}
-                              className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                              className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                               focusable="false"
                               role="img"
                               style={null}
                             >
                               <svg
                                 aria-hidden={true}
-                                className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                 focusable="false"
                                 height={16}
                                 role="img"
@@ -123,7 +123,7 @@ exports[`Search bar component Renders search bar component 1`] = `
                     >
                       <EuiFormControlLayoutClearButton
                         onClick={[Function]}
-                        size="m"
+                        size="s"
                       >
                         <EuiI18n
                           default="Clear input"
@@ -131,7 +131,7 @@ exports[`Search bar component Renders search bar component 1`] = `
                         >
                           <button
                             aria-label="Clear input"
-                            className="euiFormControlLayoutClearButton"
+                            className="euiFormControlLayoutClearButton euiFormControlLayoutClearButton--small"
                             onClick={[Function]}
                             type="button"
                           >
@@ -171,7 +171,7 @@ exports[`Search bar component Renders search bar component 1`] = `
                 </div>
               </div>
             </EuiFormControlLayout>
-          </EuiFieldSearch>
+          </EuiCompressedFieldSearch>
         </div>
       </EuiFlexItem>
       <EuiFlexItem
@@ -180,55 +180,63 @@ exports[`Search bar component Renders search bar component 1`] = `
         <div
           className="euiFlexItem euiFlexItem--flexGrowZero"
         >
-          <EuiButton
+          <EuiSmallButton
             aria-label="searchRelevance-searchButton"
             fill={true}
             onClick={[Function]}
           >
-            <EuiButtonDisplay
+            <EuiButton
               aria-label="searchRelevance-searchButton"
-              baseClassName="euiButton"
-              disabled={false}
-              element="button"
               fill={true}
-              isDisabled={false}
               onClick={[Function]}
-              type="button"
+              size="s"
             >
-              <button
+              <EuiButtonDisplay
                 aria-label="searchRelevance-searchButton"
-                className="euiButton euiButton--primary euiButton--fill"
+                baseClassName="euiButton"
                 disabled={false}
+                element="button"
+                fill={true}
+                isDisabled={false}
                 onClick={[Function]}
-                style={
-                  Object {
-                    "minWidth": undefined,
-                  }
-                }
+                size="s"
                 type="button"
               >
-                <EuiButtonContent
-                  className="euiButton__content"
-                  iconSide="left"
-                  textProps={
+                <button
+                  aria-label="searchRelevance-searchButton"
+                  className="euiButton euiButton--primary euiButton--small euiButton--fill"
+                  disabled={false}
+                  onClick={[Function]}
+                  style={
                     Object {
-                      "className": "euiButton__text",
+                      "minWidth": undefined,
                     }
                   }
+                  type="button"
                 >
-                  <span
-                    className="euiButtonContent euiButton__content"
+                  <EuiButtonContent
+                    className="euiButton__content"
+                    iconSide="left"
+                    textProps={
+                      Object {
+                        "className": "euiButton__text",
+                      }
+                    }
                   >
                     <span
-                      className="euiButton__text"
+                      className="euiButtonContent euiButton__content"
                     >
-                      Search
+                      <span
+                        className="euiButton__text"
+                      >
+                        Search
+                      </span>
                     </span>
-                  </span>
-                </EuiButtonContent>
-              </button>
-            </EuiButtonDisplay>
-          </EuiButton>
+                  </EuiButtonContent>
+                </button>
+              </EuiButtonDisplay>
+            </EuiButton>
+          </EuiSmallButton>
         </div>
       </EuiFlexItem>
     </div>
diff --git a/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_config.test.tsx.snap b/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_config.test.tsx.snap
index 75498187..165a0668 100644
--- a/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_config.test.tsx.snap
+++ b/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_config.test.tsx.snap
@@ -82,9 +82,9 @@ exports[`Flyout component Renders flyout component 1`] = `
           <div
             className="euiFlexItem"
           >
-            <EuiFormRow
+            <EuiCompressedFormRow
               describedByIds={Array []}
-              display="row"
+              display="rowCompressed"
               error={false}
               fullWidth={true}
               hasChildLabel={true}
@@ -94,7 +94,7 @@ exports[`Flyout component Renders flyout component 1`] = `
               labelType="label"
             >
               <div
-                className="euiFormRow euiFormRow--fullWidth"
+                className="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                 id="random_html_id-row"
               >
                 <div
@@ -120,7 +120,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                 <div
                   className="euiFormRow__fieldWrapper"
                 >
-                  <EuiSelect
+                  <EuiCompressedSelect
                     aria-label="Search Index"
                     hasNoInitialSelection={true}
                     id="random_html_id"
@@ -130,120 +130,132 @@ exports[`Flyout component Renders flyout component 1`] = `
                     options={Array []}
                     value=""
                   >
-                    <EuiFormControlLayout
-                      compressed={false}
-                      fullWidth={false}
-                      icon={
-                        Object {
-                          "side": "right",
-                          "type": "arrowDown",
-                        }
-                      }
-                      inputId="random_html_id"
-                      isLoading={false}
+                    <EuiSelect
+                      aria-label="Search Index"
+                      compressed={true}
+                      hasNoInitialSelection={true}
+                      id="random_html_id"
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onFocus={[Function]}
+                      options={Array []}
+                      value=""
                     >
-                      <div
-                        className="euiFormControlLayout"
+                      <EuiFormControlLayout
+                        compressed={true}
+                        fullWidth={false}
+                        icon={
+                          Object {
+                            "side": "right",
+                            "type": "arrowDown",
+                          }
+                        }
+                        inputId="random_html_id"
+                        isLoading={false}
                       >
                         <div
-                          className="euiFormControlLayout__childrenWrapper"
+                          className="euiFormControlLayout euiFormControlLayout--compressed"
                         >
-                          <EuiValidatableControl>
-                            <select
-                              aria-label="Search Index"
-                              className="euiSelect"
-                              id="random_html_id"
-                              onBlur={[Function]}
-                              onChange={[Function]}
-                              onFocus={[Function]}
-                              onMouseUp={[Function]}
-                              value=""
-                            >
-                              <option
-                                disabled={true}
-                                hidden={true}
-                                style={
-                                  Object {
-                                    "display": "none",
-                                  }
-                                }
+                          <div
+                            className="euiFormControlLayout__childrenWrapper"
+                          >
+                            <EuiValidatableControl>
+                              <select
+                                aria-label="Search Index"
+                                className="euiSelect euiSelect--compressed"
+                                id="random_html_id"
+                                onBlur={[Function]}
+                                onChange={[Function]}
+                                onFocus={[Function]}
+                                onMouseUp={[Function]}
                                 value=""
                               >
-                                 
-                              </option>
-                            </select>
-                          </EuiValidatableControl>
-                          <EuiFormControlLayoutIcons
-                            compressed={false}
-                            icon={
-                              Object {
-                                "side": "right",
-                                "type": "arrowDown",
+                                <option
+                                  disabled={true}
+                                  hidden={true}
+                                  style={
+                                    Object {
+                                      "display": "none",
+                                    }
+                                  }
+                                  value=""
+                                >
+                                   
+                                </option>
+                              </select>
+                            </EuiValidatableControl>
+                            <EuiFormControlLayoutIcons
+                              compressed={true}
+                              icon={
+                                Object {
+                                  "side": "right",
+                                  "type": "arrowDown",
+                                }
                               }
-                            }
-                            isLoading={false}
-                          >
-                            <div
-                              className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                              isLoading={false}
                             >
-                              <EuiFormControlLayoutCustomIcon
-                                size="m"
-                                type="arrowDown"
+                              <div
+                                className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                               >
-                                <span
-                                  className="euiFormControlLayoutCustomIcon"
+                                <EuiFormControlLayoutCustomIcon
+                                  size="s"
+                                  type="arrowDown"
                                 >
-                                  <EuiIcon
-                                    aria-hidden="true"
-                                    className="euiFormControlLayoutCustomIcon__icon"
-                                    size="m"
-                                    type="arrowDown"
+                                  <span
+                                    className="euiFormControlLayoutCustomIcon"
                                   >
-                                    <EuiIconArrowDown
-                                      aria-hidden={true}
-                                      className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                      focusable="false"
-                                      role="img"
-                                      style={null}
+                                    <EuiIcon
+                                      aria-hidden="true"
+                                      className="euiFormControlLayoutCustomIcon__icon"
+                                      size="s"
+                                      type="arrowDown"
                                     >
-                                      <svg
+                                      <EuiIconArrowDown
                                         aria-hidden={true}
-                                        className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                        className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
-                                        height={16}
                                         role="img"
                                         style={null}
-                                        viewBox="0 0 16 16"
-                                        width={16}
-                                        xmlns="http://www.w3.org/2000/svg"
                                       >
-                                        <path
-                                          d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
-                                          fillRule="non-zero"
-                                        />
-                                      </svg>
-                                    </EuiIconArrowDown>
-                                  </EuiIcon>
-                                </span>
-                              </EuiFormControlLayoutCustomIcon>
-                            </div>
-                          </EuiFormControlLayoutIcons>
+                                        <svg
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
+                                          focusable="false"
+                                          height={16}
+                                          role="img"
+                                          style={null}
+                                          viewBox="0 0 16 16"
+                                          width={16}
+                                          xmlns="http://www.w3.org/2000/svg"
+                                        >
+                                          <path
+                                            d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                                            fillRule="non-zero"
+                                          />
+                                        </svg>
+                                      </EuiIconArrowDown>
+                                    </EuiIcon>
+                                  </span>
+                                </EuiFormControlLayoutCustomIcon>
+                              </div>
+                            </EuiFormControlLayoutIcons>
+                          </div>
                         </div>
-                      </div>
-                    </EuiFormControlLayout>
-                  </EuiSelect>
+                      </EuiFormControlLayout>
+                    </EuiSelect>
+                  </EuiCompressedSelect>
                 </div>
               </div>
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </div>
         </EuiFlexItem>
         <EuiFlexItem>
           <div
             className="euiFlexItem"
           >
-            <EuiFormRow
+            <EuiCompressedFormRow
               describedByIds={Array []}
-              display="row"
+              display="rowCompressed"
               fullWidth={true}
               hasChildLabel={true}
               hasEmptyLabelSpace={false}
@@ -252,7 +264,7 @@ exports[`Flyout component Renders flyout component 1`] = `
               labelType="label"
             >
               <div
-                className="euiFormRow euiFormRow--fullWidth"
+                className="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                 id="random_html_id-row"
               >
                 <div
@@ -275,10 +287,10 @@ exports[`Flyout component Renders flyout component 1`] = `
                 <div
                   className="euiFormRow__fieldWrapper"
                 >
-                  <EuiComboBox
+                  <EuiCompressedComboBox
                     aria-describedby="random_html_id-help-0"
                     async={false}
-                    compressed={false}
+                    compressed={true}
                     fullWidth={false}
                     id="random_html_id"
                     isClearable={true}
@@ -305,13 +317,13 @@ exports[`Flyout component Renders flyout component 1`] = `
                       aria-describedby="random_html_id-help-0"
                       aria-expanded={false}
                       aria-haspopup="listbox"
-                      className="euiComboBox"
+                      className="euiComboBox euiComboBox--compressed"
                       onKeyDown={[Function]}
                       role="combobox"
                     >
                       <EuiComboBoxInput
                         autoSizeInputRef={[Function]}
-                        compressed={false}
+                        compressed={true}
                         fullWidth={false}
                         hasSelectedOptions={false}
                         id="random_html_id"
@@ -339,7 +351,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                         value=""
                       >
                         <EuiFormControlLayout
-                          compressed={false}
+                          compressed={true}
                           fullWidth={false}
                           icon={
                             Object {
@@ -354,13 +366,13 @@ exports[`Flyout component Renders flyout component 1`] = `
                           }
                         >
                           <div
-                            className="euiFormControlLayout"
+                            className="euiFormControlLayout euiFormControlLayout--compressed"
                           >
                             <div
                               className="euiFormControlLayout__childrenWrapper"
                             >
                               <div
-                                className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+                                className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
                                 data-test-subj="comboBoxInput"
                                 onClick={[Function]}
                                 tabIndex={-1}
@@ -426,7 +438,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                                 </AutosizeInput>
                               </div>
                               <EuiFormControlLayoutIcons
-                                compressed={false}
+                                compressed={true}
                                 icon={
                                   Object {
                                     "aria-label": "Open list of options",
@@ -447,7 +459,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                                     data-test-subj="comboBoxToggleListButton"
                                     iconRef={[Function]}
                                     onClick={[Function]}
-                                    size="m"
+                                    size="s"
                                     type="arrowDown"
                                   >
                                     <button
@@ -460,19 +472,19 @@ exports[`Flyout component Renders flyout component 1`] = `
                                       <EuiIcon
                                         aria-hidden="true"
                                         className="euiFormControlLayoutCustomIcon__icon"
-                                        size="m"
+                                        size="s"
                                         type="arrowDown"
                                       >
                                         <EuiIconArrowDown
                                           aria-hidden={true}
-                                          className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                          className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                           focusable="false"
                                           role="img"
                                           style={null}
                                         >
                                           <svg
                                             aria-hidden={true}
-                                            className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                            className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                             focusable="false"
                                             height={16}
                                             role="img"
@@ -497,7 +509,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                         </EuiFormControlLayout>
                       </EuiComboBoxInput>
                     </div>
-                  </EuiComboBox>
+                  </EuiCompressedComboBox>
                   <EuiFormHelpText
                     className="euiFormRow__text"
                     id="random_html_id-help-0"
@@ -512,14 +524,14 @@ exports[`Flyout component Renders flyout component 1`] = `
                   </EuiFormHelpText>
                 </div>
               </div>
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </div>
         </EuiFlexItem>
       </div>
     </EuiFlexGroup>
-    <EuiFormRow
+    <EuiCompressedFormRow
       describedByIds={Array []}
-      display="row"
+      display="rowCompressed"
       error={false}
       fullWidth={true}
       hasChildLabel={true}
@@ -554,7 +566,7 @@ exports[`Flyout component Renders flyout component 1`] = `
       labelType="label"
     >
       <div
-        className="euiFormRow euiFormRow--fullWidth"
+        className="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         id="random_html_id-row"
       >
         <div
@@ -782,7 +794,7 @@ exports[`Flyout component Renders flyout component 1`] = `
           </EuiFormHelpText>
         </div>
       </div>
-    </EuiFormRow>
+    </EuiCompressedFormRow>
   </SearchConfig>
 </SearchRelevanceContextProvider>
 `;
@@ -875,9 +887,9 @@ exports[`Flyout component Renders flyout component when multi-datasource is enab
           <div
             className="euiFlexItem"
           >
-            <EuiFormRow
+            <EuiCompressedFormRow
               describedByIds={Array []}
-              display="row"
+              display="rowCompressed"
               error={false}
               fullWidth={true}
               hasChildLabel={true}
@@ -887,7 +899,7 @@ exports[`Flyout component Renders flyout component when multi-datasource is enab
               labelType="label"
             >
               <div
-                className="euiFormRow euiFormRow--fullWidth"
+                className="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                 id="random_html_id-row"
               >
                 <div
@@ -913,7 +925,7 @@ exports[`Flyout component Renders flyout component when multi-datasource is enab
                 <div
                   className="euiFormRow__fieldWrapper"
                 >
-                  <EuiSelect
+                  <EuiCompressedSelect
                     aria-label="Search Index"
                     hasNoInitialSelection={true}
                     id="random_html_id"
@@ -923,119 +935,131 @@ exports[`Flyout component Renders flyout component when multi-datasource is enab
                     options={Array []}
                     value=""
                   >
-                    <EuiFormControlLayout
-                      compressed={false}
-                      fullWidth={false}
-                      icon={
-                        Object {
-                          "side": "right",
-                          "type": "arrowDown",
-                        }
-                      }
-                      inputId="random_html_id"
-                      isLoading={false}
+                    <EuiSelect
+                      aria-label="Search Index"
+                      compressed={true}
+                      hasNoInitialSelection={true}
+                      id="random_html_id"
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onFocus={[Function]}
+                      options={Array []}
+                      value=""
                     >
-                      <div
-                        className="euiFormControlLayout"
+                      <EuiFormControlLayout
+                        compressed={true}
+                        fullWidth={false}
+                        icon={
+                          Object {
+                            "side": "right",
+                            "type": "arrowDown",
+                          }
+                        }
+                        inputId="random_html_id"
+                        isLoading={false}
                       >
                         <div
-                          className="euiFormControlLayout__childrenWrapper"
+                          className="euiFormControlLayout euiFormControlLayout--compressed"
                         >
-                          <EuiValidatableControl>
-                            <select
-                              aria-label="Search Index"
-                              className="euiSelect"
-                              id="random_html_id"
-                              onBlur={[Function]}
-                              onChange={[Function]}
-                              onFocus={[Function]}
-                              onMouseUp={[Function]}
-                              value=""
-                            >
-                              <option
-                                disabled={true}
-                                hidden={true}
-                                style={
-                                  Object {
-                                    "display": "none",
-                                  }
-                                }
+                          <div
+                            className="euiFormControlLayout__childrenWrapper"
+                          >
+                            <EuiValidatableControl>
+                              <select
+                                aria-label="Search Index"
+                                className="euiSelect euiSelect--compressed"
+                                id="random_html_id"
+                                onBlur={[Function]}
+                                onChange={[Function]}
+                                onFocus={[Function]}
+                                onMouseUp={[Function]}
                                 value=""
                               >
-                                 
-                              </option>
-                            </select>
-                          </EuiValidatableControl>
-                          <EuiFormControlLayoutIcons
-                            compressed={false}
-                            icon={
-                              Object {
-                                "side": "right",
-                                "type": "arrowDown",
+                                <option
+                                  disabled={true}
+                                  hidden={true}
+                                  style={
+                                    Object {
+                                      "display": "none",
+                                    }
+                                  }
+                                  value=""
+                                >
+                                   
+                                </option>
+                              </select>
+                            </EuiValidatableControl>
+                            <EuiFormControlLayoutIcons
+                              compressed={true}
+                              icon={
+                                Object {
+                                  "side": "right",
+                                  "type": "arrowDown",
+                                }
                               }
-                            }
-                            isLoading={false}
-                          >
-                            <div
-                              className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                              isLoading={false}
                             >
-                              <EuiFormControlLayoutCustomIcon
-                                size="m"
-                                type="arrowDown"
+                              <div
+                                className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                               >
-                                <span
-                                  className="euiFormControlLayoutCustomIcon"
+                                <EuiFormControlLayoutCustomIcon
+                                  size="s"
+                                  type="arrowDown"
                                 >
-                                  <EuiIcon
-                                    aria-hidden="true"
-                                    className="euiFormControlLayoutCustomIcon__icon"
-                                    size="m"
-                                    type="arrowDown"
+                                  <span
+                                    className="euiFormControlLayoutCustomIcon"
                                   >
-                                    <EuiIconBeaker
-                                      aria-hidden={true}
-                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                      focusable="false"
-                                      role="img"
-                                      style={null}
+                                    <EuiIcon
+                                      aria-hidden="true"
+                                      className="euiFormControlLayoutCustomIcon__icon"
+                                      size="s"
+                                      type="arrowDown"
                                     >
-                                      <svg
+                                      <EuiIconBeaker
                                         aria-hidden={true}
-                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                        className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                         focusable="false"
-                                        height={16}
                                         role="img"
                                         style={null}
-                                        viewBox="0 0 16 16"
-                                        width={16}
-                                        xmlns="http://www.w3.org/2000/svg"
                                       >
-                                        <path
-                                          d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                        />
-                                      </svg>
-                                    </EuiIconBeaker>
-                                  </EuiIcon>
-                                </span>
-                              </EuiFormControlLayoutCustomIcon>
-                            </div>
-                          </EuiFormControlLayoutIcons>
+                                        <svg
+                                          aria-hidden={true}
+                                          className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                          focusable="false"
+                                          height={16}
+                                          role="img"
+                                          style={null}
+                                          viewBox="0 0 16 16"
+                                          width={16}
+                                          xmlns="http://www.w3.org/2000/svg"
+                                        >
+                                          <path
+                                            d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                          />
+                                        </svg>
+                                      </EuiIconBeaker>
+                                    </EuiIcon>
+                                  </span>
+                                </EuiFormControlLayoutCustomIcon>
+                              </div>
+                            </EuiFormControlLayoutIcons>
+                          </div>
                         </div>
-                      </div>
-                    </EuiFormControlLayout>
-                  </EuiSelect>
+                      </EuiFormControlLayout>
+                    </EuiSelect>
+                  </EuiCompressedSelect>
                 </div>
               </div>
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </div>
         </EuiFlexItem>
         <EuiFlexItem>
           <div
             className="euiFlexItem"
           >
-            <EuiFormRow
+            <EuiCompressedFormRow
               describedByIds={Array []}
-              display="row"
+              display="rowCompressed"
               fullWidth={true}
               hasChildLabel={true}
               hasEmptyLabelSpace={false}
@@ -1044,7 +1068,7 @@ exports[`Flyout component Renders flyout component when multi-datasource is enab
               labelType="label"
             >
               <div
-                className="euiFormRow euiFormRow--fullWidth"
+                className="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                 id="random_html_id-row"
               >
                 <div
@@ -1067,10 +1091,10 @@ exports[`Flyout component Renders flyout component when multi-datasource is enab
                 <div
                   className="euiFormRow__fieldWrapper"
                 >
-                  <EuiComboBox
+                  <EuiCompressedComboBox
                     aria-describedby="random_html_id-help-0"
                     async={false}
-                    compressed={false}
+                    compressed={true}
                     fullWidth={false}
                     id="random_html_id"
                     isClearable={true}
@@ -1097,13 +1121,13 @@ exports[`Flyout component Renders flyout component when multi-datasource is enab
                       aria-describedby="random_html_id-help-0"
                       aria-expanded={false}
                       aria-haspopup="listbox"
-                      className="euiComboBox"
+                      className="euiComboBox euiComboBox--compressed"
                       onKeyDown={[Function]}
                       role="combobox"
                     >
                       <EuiComboBoxInput
                         autoSizeInputRef={[Function]}
-                        compressed={false}
+                        compressed={true}
                         fullWidth={false}
                         hasSelectedOptions={false}
                         id="random_html_id"
@@ -1131,7 +1155,7 @@ exports[`Flyout component Renders flyout component when multi-datasource is enab
                         value=""
                       >
                         <EuiFormControlLayout
-                          compressed={false}
+                          compressed={true}
                           fullWidth={false}
                           icon={
                             Object {
@@ -1146,13 +1170,13 @@ exports[`Flyout component Renders flyout component when multi-datasource is enab
                           }
                         >
                           <div
-                            className="euiFormControlLayout"
+                            className="euiFormControlLayout euiFormControlLayout--compressed"
                           >
                             <div
                               className="euiFormControlLayout__childrenWrapper"
                             >
                               <div
-                                className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+                                className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
                                 data-test-subj="comboBoxInput"
                                 onClick={[Function]}
                                 tabIndex={-1}
@@ -1218,7 +1242,7 @@ exports[`Flyout component Renders flyout component when multi-datasource is enab
                                 </AutosizeInput>
                               </div>
                               <EuiFormControlLayoutIcons
-                                compressed={false}
+                                compressed={true}
                                 icon={
                                   Object {
                                     "aria-label": "Open list of options",
@@ -1239,7 +1263,7 @@ exports[`Flyout component Renders flyout component when multi-datasource is enab
                                     data-test-subj="comboBoxToggleListButton"
                                     iconRef={[Function]}
                                     onClick={[Function]}
-                                    size="m"
+                                    size="s"
                                     type="arrowDown"
                                   >
                                     <button
@@ -1252,19 +1276,19 @@ exports[`Flyout component Renders flyout component when multi-datasource is enab
                                       <EuiIcon
                                         aria-hidden="true"
                                         className="euiFormControlLayoutCustomIcon__icon"
-                                        size="m"
+                                        size="s"
                                         type="arrowDown"
                                       >
                                         <EuiIconBeaker
                                           aria-hidden={true}
-                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                          className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                           focusable="false"
                                           role="img"
                                           style={null}
                                         >
                                           <svg
                                             aria-hidden={true}
-                                            className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                            className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                             focusable="false"
                                             height={16}
                                             role="img"
@@ -1288,7 +1312,7 @@ exports[`Flyout component Renders flyout component when multi-datasource is enab
                         </EuiFormControlLayout>
                       </EuiComboBoxInput>
                     </div>
-                  </EuiComboBox>
+                  </EuiCompressedComboBox>
                   <EuiFormHelpText
                     className="euiFormRow__text"
                     id="random_html_id-help-0"
@@ -1303,14 +1327,14 @@ exports[`Flyout component Renders flyout component when multi-datasource is enab
                   </EuiFormHelpText>
                 </div>
               </div>
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </div>
         </EuiFlexItem>
       </div>
     </EuiFlexGroup>
-    <EuiFormRow
+    <EuiCompressedFormRow
       describedByIds={Array []}
-      display="row"
+      display="rowCompressed"
       error={false}
       fullWidth={true}
       hasChildLabel={true}
@@ -1345,7 +1369,7 @@ exports[`Flyout component Renders flyout component when multi-datasource is enab
       labelType="label"
     >
       <div
-        className="euiFormRow euiFormRow--fullWidth"
+        className="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
         id="random_html_id-row"
       >
         <div
@@ -1573,7 +1597,7 @@ exports[`Flyout component Renders flyout component when multi-datasource is enab
           </EuiFormHelpText>
         </div>
       </div>
-    </EuiFormRow>
+    </EuiCompressedFormRow>
   </SearchConfig>
 </SearchRelevanceContextProvider>
 `;
diff --git a/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_configs.test.tsx.snap b/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_configs.test.tsx.snap
index f3b0d024..c9ca2c85 100644
--- a/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_configs.test.tsx.snap
+++ b/public/components/query_compare/search_result/search_components/__tests__/__snapshots__/search_configs.test.tsx.snap
@@ -116,9 +116,9 @@ exports[`Flyout component Renders flyout component 1`] = `
                         <div
                           className="euiFlexItem"
                         >
-                          <EuiFormRow
+                          <EuiCompressedFormRow
                             describedByIds={Array []}
-                            display="row"
+                            display="rowCompressed"
                             error={false}
                             fullWidth={true}
                             hasChildLabel={true}
@@ -128,7 +128,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                             labelType="label"
                           >
                             <div
-                              className="euiFormRow euiFormRow--fullWidth"
+                              className="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                               id="random_html_id-row"
                             >
                               <div
@@ -154,7 +154,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                               <div
                                 className="euiFormRow__fieldWrapper"
                               >
-                                <EuiSelect
+                                <EuiCompressedSelect
                                   aria-label="Search Index"
                                   hasNoInitialSelection={true}
                                   id="random_html_id"
@@ -164,119 +164,131 @@ exports[`Flyout component Renders flyout component 1`] = `
                                   options={Array []}
                                   value=""
                                 >
-                                  <EuiFormControlLayout
-                                    compressed={false}
-                                    fullWidth={false}
-                                    icon={
-                                      Object {
-                                        "side": "right",
-                                        "type": "arrowDown",
-                                      }
-                                    }
-                                    inputId="random_html_id"
-                                    isLoading={false}
+                                  <EuiSelect
+                                    aria-label="Search Index"
+                                    compressed={true}
+                                    hasNoInitialSelection={true}
+                                    id="random_html_id"
+                                    onBlur={[Function]}
+                                    onChange={[Function]}
+                                    onFocus={[Function]}
+                                    options={Array []}
+                                    value=""
                                   >
-                                    <div
-                                      className="euiFormControlLayout"
+                                    <EuiFormControlLayout
+                                      compressed={true}
+                                      fullWidth={false}
+                                      icon={
+                                        Object {
+                                          "side": "right",
+                                          "type": "arrowDown",
+                                        }
+                                      }
+                                      inputId="random_html_id"
+                                      isLoading={false}
                                     >
                                       <div
-                                        className="euiFormControlLayout__childrenWrapper"
+                                        className="euiFormControlLayout euiFormControlLayout--compressed"
                                       >
-                                        <EuiValidatableControl>
-                                          <select
-                                            aria-label="Search Index"
-                                            className="euiSelect"
-                                            id="random_html_id"
-                                            onBlur={[Function]}
-                                            onChange={[Function]}
-                                            onFocus={[Function]}
-                                            onMouseUp={[Function]}
-                                            value=""
-                                          >
-                                            <option
-                                              disabled={true}
-                                              hidden={true}
-                                              style={
-                                                Object {
-                                                  "display": "none",
-                                                }
-                                              }
+                                        <div
+                                          className="euiFormControlLayout__childrenWrapper"
+                                        >
+                                          <EuiValidatableControl>
+                                            <select
+                                              aria-label="Search Index"
+                                              className="euiSelect euiSelect--compressed"
+                                              id="random_html_id"
+                                              onBlur={[Function]}
+                                              onChange={[Function]}
+                                              onFocus={[Function]}
+                                              onMouseUp={[Function]}
                                               value=""
                                             >
-                                               
-                                            </option>
-                                          </select>
-                                        </EuiValidatableControl>
-                                        <EuiFormControlLayoutIcons
-                                          compressed={false}
-                                          icon={
-                                            Object {
-                                              "side": "right",
-                                              "type": "arrowDown",
+                                              <option
+                                                disabled={true}
+                                                hidden={true}
+                                                style={
+                                                  Object {
+                                                    "display": "none",
+                                                  }
+                                                }
+                                                value=""
+                                              >
+                                                 
+                                              </option>
+                                            </select>
+                                          </EuiValidatableControl>
+                                          <EuiFormControlLayoutIcons
+                                            compressed={true}
+                                            icon={
+                                              Object {
+                                                "side": "right",
+                                                "type": "arrowDown",
+                                              }
                                             }
-                                          }
-                                          isLoading={false}
-                                        >
-                                          <div
-                                            className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                            isLoading={false}
                                           >
-                                            <EuiFormControlLayoutCustomIcon
-                                              size="m"
-                                              type="arrowDown"
+                                            <div
+                                              className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                                             >
-                                              <span
-                                                className="euiFormControlLayoutCustomIcon"
+                                              <EuiFormControlLayoutCustomIcon
+                                                size="s"
+                                                type="arrowDown"
                                               >
-                                                <EuiIcon
-                                                  aria-hidden="true"
-                                                  className="euiFormControlLayoutCustomIcon__icon"
-                                                  size="m"
-                                                  type="arrowDown"
+                                                <span
+                                                  className="euiFormControlLayoutCustomIcon"
                                                 >
-                                                  <EuiIconBeaker
-                                                    aria-hidden={true}
-                                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                                    focusable="false"
-                                                    role="img"
-                                                    style={null}
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiFormControlLayoutCustomIcon__icon"
+                                                    size="s"
+                                                    type="arrowDown"
                                                   >
-                                                    <svg
+                                                    <EuiIconBeaker
                                                       aria-hidden={true}
-                                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                      className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                                       focusable="false"
-                                                      height={16}
                                                       role="img"
                                                       style={null}
-                                                      viewBox="0 0 16 16"
-                                                      width={16}
-                                                      xmlns="http://www.w3.org/2000/svg"
                                                     >
-                                                      <path
-                                                        d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                      />
-                                                    </svg>
-                                                  </EuiIconBeaker>
-                                                </EuiIcon>
-                                              </span>
-                                            </EuiFormControlLayoutCustomIcon>
-                                          </div>
-                                        </EuiFormControlLayoutIcons>
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      >
+                                                        <path
+                                                          d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                        />
+                                                      </svg>
+                                                    </EuiIconBeaker>
+                                                  </EuiIcon>
+                                                </span>
+                                              </EuiFormControlLayoutCustomIcon>
+                                            </div>
+                                          </EuiFormControlLayoutIcons>
+                                        </div>
                                       </div>
-                                    </div>
-                                  </EuiFormControlLayout>
-                                </EuiSelect>
+                                    </EuiFormControlLayout>
+                                  </EuiSelect>
+                                </EuiCompressedSelect>
                               </div>
                             </div>
-                          </EuiFormRow>
+                          </EuiCompressedFormRow>
                         </div>
                       </EuiFlexItem>
                       <EuiFlexItem>
                         <div
                           className="euiFlexItem"
                         >
-                          <EuiFormRow
+                          <EuiCompressedFormRow
                             describedByIds={Array []}
-                            display="row"
+                            display="rowCompressed"
                             fullWidth={true}
                             hasChildLabel={true}
                             hasEmptyLabelSpace={false}
@@ -285,7 +297,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                             labelType="label"
                           >
                             <div
-                              className="euiFormRow euiFormRow--fullWidth"
+                              className="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                               id="random_html_id-row"
                             >
                               <div
@@ -308,10 +320,10 @@ exports[`Flyout component Renders flyout component 1`] = `
                               <div
                                 className="euiFormRow__fieldWrapper"
                               >
-                                <EuiComboBox
+                                <EuiCompressedComboBox
                                   aria-describedby="random_html_id-help-0"
                                   async={false}
-                                  compressed={false}
+                                  compressed={true}
                                   fullWidth={false}
                                   id="random_html_id"
                                   isClearable={true}
@@ -338,13 +350,13 @@ exports[`Flyout component Renders flyout component 1`] = `
                                     aria-describedby="random_html_id-help-0"
                                     aria-expanded={false}
                                     aria-haspopup="listbox"
-                                    className="euiComboBox"
+                                    className="euiComboBox euiComboBox--compressed"
                                     onKeyDown={[Function]}
                                     role="combobox"
                                   >
                                     <EuiComboBoxInput
                                       autoSizeInputRef={[Function]}
-                                      compressed={false}
+                                      compressed={true}
                                       fullWidth={false}
                                       hasSelectedOptions={false}
                                       id="random_html_id"
@@ -372,7 +384,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                                       value=""
                                     >
                                       <EuiFormControlLayout
-                                        compressed={false}
+                                        compressed={true}
                                         fullWidth={false}
                                         icon={
                                           Object {
@@ -387,13 +399,13 @@ exports[`Flyout component Renders flyout component 1`] = `
                                         }
                                       >
                                         <div
-                                          className="euiFormControlLayout"
+                                          className="euiFormControlLayout euiFormControlLayout--compressed"
                                         >
                                           <div
                                             className="euiFormControlLayout__childrenWrapper"
                                           >
                                             <div
-                                              className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+                                              className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
                                               data-test-subj="comboBoxInput"
                                               onClick={[Function]}
                                               tabIndex={-1}
@@ -459,7 +471,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                                               </AutosizeInput>
                                             </div>
                                             <EuiFormControlLayoutIcons
-                                              compressed={false}
+                                              compressed={true}
                                               icon={
                                                 Object {
                                                   "aria-label": "Open list of options",
@@ -480,7 +492,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                                                   data-test-subj="comboBoxToggleListButton"
                                                   iconRef={[Function]}
                                                   onClick={[Function]}
-                                                  size="m"
+                                                  size="s"
                                                   type="arrowDown"
                                                 >
                                                   <button
@@ -493,19 +505,19 @@ exports[`Flyout component Renders flyout component 1`] = `
                                                     <EuiIcon
                                                       aria-hidden="true"
                                                       className="euiFormControlLayoutCustomIcon__icon"
-                                                      size="m"
+                                                      size="s"
                                                       type="arrowDown"
                                                     >
                                                       <EuiIconBeaker
                                                         aria-hidden={true}
-                                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                        className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                                         focusable="false"
                                                         role="img"
                                                         style={null}
                                                       >
                                                         <svg
                                                           aria-hidden={true}
-                                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                          className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                                           focusable="false"
                                                           height={16}
                                                           role="img"
@@ -529,7 +541,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                                       </EuiFormControlLayout>
                                     </EuiComboBoxInput>
                                   </div>
-                                </EuiComboBox>
+                                </EuiCompressedComboBox>
                                 <EuiFormHelpText
                                   className="euiFormRow__text"
                                   id="random_html_id-help-0"
@@ -544,14 +556,14 @@ exports[`Flyout component Renders flyout component 1`] = `
                                 </EuiFormHelpText>
                               </div>
                             </div>
-                          </EuiFormRow>
+                          </EuiCompressedFormRow>
                         </div>
                       </EuiFlexItem>
                     </div>
                   </EuiFlexGroup>
-                  <EuiFormRow
+                  <EuiCompressedFormRow
                     describedByIds={Array []}
-                    display="row"
+                    display="rowCompressed"
                     error={false}
                     fullWidth={true}
                     hasChildLabel={true}
@@ -586,7 +598,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                     labelType="label"
                   >
                     <div
-                      className="euiFormRow euiFormRow--fullWidth"
+                      className="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                       id="random_html_id-row"
                     >
                       <div
@@ -814,7 +826,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                         </EuiFormHelpText>
                       </div>
                     </div>
-                  </EuiFormRow>
+                  </EuiCompressedFormRow>
                 </SearchConfig>
               </div>
             </EuiFlexItem>
@@ -883,9 +895,9 @@ exports[`Flyout component Renders flyout component 1`] = `
                         <div
                           className="euiFlexItem"
                         >
-                          <EuiFormRow
+                          <EuiCompressedFormRow
                             describedByIds={Array []}
-                            display="row"
+                            display="rowCompressed"
                             error={false}
                             fullWidth={true}
                             hasChildLabel={true}
@@ -895,7 +907,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                             labelType="label"
                           >
                             <div
-                              className="euiFormRow euiFormRow--fullWidth"
+                              className="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                               id="random_html_id-row"
                             >
                               <div
@@ -921,7 +933,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                               <div
                                 className="euiFormRow__fieldWrapper"
                               >
-                                <EuiSelect
+                                <EuiCompressedSelect
                                   aria-label="Search Index"
                                   hasNoInitialSelection={true}
                                   id="random_html_id"
@@ -931,119 +943,131 @@ exports[`Flyout component Renders flyout component 1`] = `
                                   options={Array []}
                                   value=""
                                 >
-                                  <EuiFormControlLayout
-                                    compressed={false}
-                                    fullWidth={false}
-                                    icon={
-                                      Object {
-                                        "side": "right",
-                                        "type": "arrowDown",
-                                      }
-                                    }
-                                    inputId="random_html_id"
-                                    isLoading={false}
+                                  <EuiSelect
+                                    aria-label="Search Index"
+                                    compressed={true}
+                                    hasNoInitialSelection={true}
+                                    id="random_html_id"
+                                    onBlur={[Function]}
+                                    onChange={[Function]}
+                                    onFocus={[Function]}
+                                    options={Array []}
+                                    value=""
                                   >
-                                    <div
-                                      className="euiFormControlLayout"
+                                    <EuiFormControlLayout
+                                      compressed={true}
+                                      fullWidth={false}
+                                      icon={
+                                        Object {
+                                          "side": "right",
+                                          "type": "arrowDown",
+                                        }
+                                      }
+                                      inputId="random_html_id"
+                                      isLoading={false}
                                     >
                                       <div
-                                        className="euiFormControlLayout__childrenWrapper"
+                                        className="euiFormControlLayout euiFormControlLayout--compressed"
                                       >
-                                        <EuiValidatableControl>
-                                          <select
-                                            aria-label="Search Index"
-                                            className="euiSelect"
-                                            id="random_html_id"
-                                            onBlur={[Function]}
-                                            onChange={[Function]}
-                                            onFocus={[Function]}
-                                            onMouseUp={[Function]}
-                                            value=""
-                                          >
-                                            <option
-                                              disabled={true}
-                                              hidden={true}
-                                              style={
-                                                Object {
-                                                  "display": "none",
-                                                }
-                                              }
+                                        <div
+                                          className="euiFormControlLayout__childrenWrapper"
+                                        >
+                                          <EuiValidatableControl>
+                                            <select
+                                              aria-label="Search Index"
+                                              className="euiSelect euiSelect--compressed"
+                                              id="random_html_id"
+                                              onBlur={[Function]}
+                                              onChange={[Function]}
+                                              onFocus={[Function]}
+                                              onMouseUp={[Function]}
                                               value=""
                                             >
-                                               
-                                            </option>
-                                          </select>
-                                        </EuiValidatableControl>
-                                        <EuiFormControlLayoutIcons
-                                          compressed={false}
-                                          icon={
-                                            Object {
-                                              "side": "right",
-                                              "type": "arrowDown",
+                                              <option
+                                                disabled={true}
+                                                hidden={true}
+                                                style={
+                                                  Object {
+                                                    "display": "none",
+                                                  }
+                                                }
+                                                value=""
+                                              >
+                                                 
+                                              </option>
+                                            </select>
+                                          </EuiValidatableControl>
+                                          <EuiFormControlLayoutIcons
+                                            compressed={true}
+                                            icon={
+                                              Object {
+                                                "side": "right",
+                                                "type": "arrowDown",
+                                              }
                                             }
-                                          }
-                                          isLoading={false}
-                                        >
-                                          <div
-                                            className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                            isLoading={false}
                                           >
-                                            <EuiFormControlLayoutCustomIcon
-                                              size="m"
-                                              type="arrowDown"
+                                            <div
+                                              className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                                             >
-                                              <span
-                                                className="euiFormControlLayoutCustomIcon"
+                                              <EuiFormControlLayoutCustomIcon
+                                                size="s"
+                                                type="arrowDown"
                                               >
-                                                <EuiIcon
-                                                  aria-hidden="true"
-                                                  className="euiFormControlLayoutCustomIcon__icon"
-                                                  size="m"
-                                                  type="arrowDown"
+                                                <span
+                                                  className="euiFormControlLayoutCustomIcon"
                                                 >
-                                                  <EuiIconBeaker
-                                                    aria-hidden={true}
-                                                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                                                    focusable="false"
-                                                    role="img"
-                                                    style={null}
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiFormControlLayoutCustomIcon__icon"
+                                                    size="s"
+                                                    type="arrowDown"
                                                   >
-                                                    <svg
+                                                    <EuiIconBeaker
                                                       aria-hidden={true}
-                                                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                      className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                                       focusable="false"
-                                                      height={16}
                                                       role="img"
                                                       style={null}
-                                                      viewBox="0 0 16 16"
-                                                      width={16}
-                                                      xmlns="http://www.w3.org/2000/svg"
                                                     >
-                                                      <path
-                                                        d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                                                      />
-                                                    </svg>
-                                                  </EuiIconBeaker>
-                                                </EuiIcon>
-                                              </span>
-                                            </EuiFormControlLayoutCustomIcon>
-                                          </div>
-                                        </EuiFormControlLayoutIcons>
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      >
+                                                        <path
+                                                          d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                                        />
+                                                      </svg>
+                                                    </EuiIconBeaker>
+                                                  </EuiIcon>
+                                                </span>
+                                              </EuiFormControlLayoutCustomIcon>
+                                            </div>
+                                          </EuiFormControlLayoutIcons>
+                                        </div>
                                       </div>
-                                    </div>
-                                  </EuiFormControlLayout>
-                                </EuiSelect>
+                                    </EuiFormControlLayout>
+                                  </EuiSelect>
+                                </EuiCompressedSelect>
                               </div>
                             </div>
-                          </EuiFormRow>
+                          </EuiCompressedFormRow>
                         </div>
                       </EuiFlexItem>
                       <EuiFlexItem>
                         <div
                           className="euiFlexItem"
                         >
-                          <EuiFormRow
+                          <EuiCompressedFormRow
                             describedByIds={Array []}
-                            display="row"
+                            display="rowCompressed"
                             fullWidth={true}
                             hasChildLabel={true}
                             hasEmptyLabelSpace={false}
@@ -1052,7 +1076,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                             labelType="label"
                           >
                             <div
-                              className="euiFormRow euiFormRow--fullWidth"
+                              className="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                               id="random_html_id-row"
                             >
                               <div
@@ -1075,10 +1099,10 @@ exports[`Flyout component Renders flyout component 1`] = `
                               <div
                                 className="euiFormRow__fieldWrapper"
                               >
-                                <EuiComboBox
+                                <EuiCompressedComboBox
                                   aria-describedby="random_html_id-help-0"
                                   async={false}
-                                  compressed={false}
+                                  compressed={true}
                                   fullWidth={false}
                                   id="random_html_id"
                                   isClearable={true}
@@ -1105,13 +1129,13 @@ exports[`Flyout component Renders flyout component 1`] = `
                                     aria-describedby="random_html_id-help-0"
                                     aria-expanded={false}
                                     aria-haspopup="listbox"
-                                    className="euiComboBox"
+                                    className="euiComboBox euiComboBox--compressed"
                                     onKeyDown={[Function]}
                                     role="combobox"
                                   >
                                     <EuiComboBoxInput
                                       autoSizeInputRef={[Function]}
-                                      compressed={false}
+                                      compressed={true}
                                       fullWidth={false}
                                       hasSelectedOptions={false}
                                       id="random_html_id"
@@ -1139,7 +1163,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                                       value=""
                                     >
                                       <EuiFormControlLayout
-                                        compressed={false}
+                                        compressed={true}
                                         fullWidth={false}
                                         icon={
                                           Object {
@@ -1154,13 +1178,13 @@ exports[`Flyout component Renders flyout component 1`] = `
                                         }
                                       >
                                         <div
-                                          className="euiFormControlLayout"
+                                          className="euiFormControlLayout euiFormControlLayout--compressed"
                                         >
                                           <div
                                             className="euiFormControlLayout__childrenWrapper"
                                           >
                                             <div
-                                              className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+                                              className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
                                               data-test-subj="comboBoxInput"
                                               onClick={[Function]}
                                               tabIndex={-1}
@@ -1226,7 +1250,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                                               </AutosizeInput>
                                             </div>
                                             <EuiFormControlLayoutIcons
-                                              compressed={false}
+                                              compressed={true}
                                               icon={
                                                 Object {
                                                   "aria-label": "Open list of options",
@@ -1247,7 +1271,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                                                   data-test-subj="comboBoxToggleListButton"
                                                   iconRef={[Function]}
                                                   onClick={[Function]}
-                                                  size="m"
+                                                  size="s"
                                                   type="arrowDown"
                                                 >
                                                   <button
@@ -1260,19 +1284,19 @@ exports[`Flyout component Renders flyout component 1`] = `
                                                     <EuiIcon
                                                       aria-hidden="true"
                                                       className="euiFormControlLayoutCustomIcon__icon"
-                                                      size="m"
+                                                      size="s"
                                                       type="arrowDown"
                                                     >
                                                       <EuiIconBeaker
                                                         aria-hidden={true}
-                                                        className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                        className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                                         focusable="false"
                                                         role="img"
                                                         style={null}
                                                       >
                                                         <svg
                                                           aria-hidden={true}
-                                                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                                                          className="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                                                           focusable="false"
                                                           height={16}
                                                           role="img"
@@ -1296,7 +1320,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                                       </EuiFormControlLayout>
                                     </EuiComboBoxInput>
                                   </div>
-                                </EuiComboBox>
+                                </EuiCompressedComboBox>
                                 <EuiFormHelpText
                                   className="euiFormRow__text"
                                   id="random_html_id-help-0"
@@ -1311,14 +1335,14 @@ exports[`Flyout component Renders flyout component 1`] = `
                                 </EuiFormHelpText>
                               </div>
                             </div>
-                          </EuiFormRow>
+                          </EuiCompressedFormRow>
                         </div>
                       </EuiFlexItem>
                     </div>
                   </EuiFlexGroup>
-                  <EuiFormRow
+                  <EuiCompressedFormRow
                     describedByIds={Array []}
-                    display="row"
+                    display="rowCompressed"
                     error={false}
                     fullWidth={true}
                     hasChildLabel={true}
@@ -1353,7 +1377,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                     labelType="label"
                   >
                     <div
-                      className="euiFormRow euiFormRow--fullWidth"
+                      className="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                       id="random_html_id-row"
                     >
                       <div
@@ -1581,7 +1605,7 @@ exports[`Flyout component Renders flyout component 1`] = `
                         </EuiFormHelpText>
                       </div>
                     </div>
-                  </EuiFormRow>
+                  </EuiCompressedFormRow>
                 </SearchConfig>
               </div>
             </EuiFlexItem>
@@ -1697,9 +1721,9 @@ exports[`Flyout component Renders flyout component when multi dataSource enabled
                         <div
                           className="euiFlexItem"
                         >
-                          <EuiFormRow
+                          <EuiCompressedFormRow
                             describedByIds={Array []}
-                            display="row"
+                            display="rowCompressed"
                             error={false}
                             fullWidth={true}
                             hasChildLabel={true}
@@ -1709,7 +1733,7 @@ exports[`Flyout component Renders flyout component when multi dataSource enabled
                             labelType="label"
                           >
                             <div
-                              className="euiFormRow euiFormRow--fullWidth"
+                              className="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                               id="random_html_id-row"
                             >
                               <div
@@ -1735,7 +1759,7 @@ exports[`Flyout component Renders flyout component when multi dataSource enabled
                               <div
                                 className="euiFormRow__fieldWrapper"
                               >
-                                <EuiSelect
+                                <EuiCompressedSelect
                                   aria-label="Search Index"
                                   hasNoInitialSelection={true}
                                   id="random_html_id"
@@ -1745,120 +1769,132 @@ exports[`Flyout component Renders flyout component when multi dataSource enabled
                                   options={Array []}
                                   value=""
                                 >
-                                  <EuiFormControlLayout
-                                    compressed={false}
-                                    fullWidth={false}
-                                    icon={
-                                      Object {
-                                        "side": "right",
-                                        "type": "arrowDown",
-                                      }
-                                    }
-                                    inputId="random_html_id"
-                                    isLoading={false}
+                                  <EuiSelect
+                                    aria-label="Search Index"
+                                    compressed={true}
+                                    hasNoInitialSelection={true}
+                                    id="random_html_id"
+                                    onBlur={[Function]}
+                                    onChange={[Function]}
+                                    onFocus={[Function]}
+                                    options={Array []}
+                                    value=""
                                   >
-                                    <div
-                                      className="euiFormControlLayout"
+                                    <EuiFormControlLayout
+                                      compressed={true}
+                                      fullWidth={false}
+                                      icon={
+                                        Object {
+                                          "side": "right",
+                                          "type": "arrowDown",
+                                        }
+                                      }
+                                      inputId="random_html_id"
+                                      isLoading={false}
                                     >
                                       <div
-                                        className="euiFormControlLayout__childrenWrapper"
+                                        className="euiFormControlLayout euiFormControlLayout--compressed"
                                       >
-                                        <EuiValidatableControl>
-                                          <select
-                                            aria-label="Search Index"
-                                            className="euiSelect"
-                                            id="random_html_id"
-                                            onBlur={[Function]}
-                                            onChange={[Function]}
-                                            onFocus={[Function]}
-                                            onMouseUp={[Function]}
-                                            value=""
-                                          >
-                                            <option
-                                              disabled={true}
-                                              hidden={true}
-                                              style={
-                                                Object {
-                                                  "display": "none",
-                                                }
-                                              }
+                                        <div
+                                          className="euiFormControlLayout__childrenWrapper"
+                                        >
+                                          <EuiValidatableControl>
+                                            <select
+                                              aria-label="Search Index"
+                                              className="euiSelect euiSelect--compressed"
+                                              id="random_html_id"
+                                              onBlur={[Function]}
+                                              onChange={[Function]}
+                                              onFocus={[Function]}
+                                              onMouseUp={[Function]}
                                               value=""
                                             >
-                                               
-                                            </option>
-                                          </select>
-                                        </EuiValidatableControl>
-                                        <EuiFormControlLayoutIcons
-                                          compressed={false}
-                                          icon={
-                                            Object {
-                                              "side": "right",
-                                              "type": "arrowDown",
+                                              <option
+                                                disabled={true}
+                                                hidden={true}
+                                                style={
+                                                  Object {
+                                                    "display": "none",
+                                                  }
+                                                }
+                                                value=""
+                                              >
+                                                 
+                                              </option>
+                                            </select>
+                                          </EuiValidatableControl>
+                                          <EuiFormControlLayoutIcons
+                                            compressed={true}
+                                            icon={
+                                              Object {
+                                                "side": "right",
+                                                "type": "arrowDown",
+                                              }
                                             }
-                                          }
-                                          isLoading={false}
-                                        >
-                                          <div
-                                            className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                            isLoading={false}
                                           >
-                                            <EuiFormControlLayoutCustomIcon
-                                              size="m"
-                                              type="arrowDown"
+                                            <div
+                                              className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                                             >
-                                              <span
-                                                className="euiFormControlLayoutCustomIcon"
+                                              <EuiFormControlLayoutCustomIcon
+                                                size="s"
+                                                type="arrowDown"
                                               >
-                                                <EuiIcon
-                                                  aria-hidden="true"
-                                                  className="euiFormControlLayoutCustomIcon__icon"
-                                                  size="m"
-                                                  type="arrowDown"
+                                                <span
+                                                  className="euiFormControlLayoutCustomIcon"
                                                 >
-                                                  <EuiIconArrowDown
-                                                    aria-hidden={true}
-                                                    className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                                    focusable="false"
-                                                    role="img"
-                                                    style={null}
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiFormControlLayoutCustomIcon__icon"
+                                                    size="s"
+                                                    type="arrowDown"
                                                   >
-                                                    <svg
+                                                    <EuiIconArrowDown
                                                       aria-hidden={true}
-                                                      className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                      className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                                       focusable="false"
-                                                      height={16}
                                                       role="img"
                                                       style={null}
-                                                      viewBox="0 0 16 16"
-                                                      width={16}
-                                                      xmlns="http://www.w3.org/2000/svg"
                                                     >
-                                                      <path
-                                                        d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
-                                                        fillRule="non-zero"
-                                                      />
-                                                    </svg>
-                                                  </EuiIconArrowDown>
-                                                </EuiIcon>
-                                              </span>
-                                            </EuiFormControlLayoutCustomIcon>
-                                          </div>
-                                        </EuiFormControlLayoutIcons>
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      >
+                                                        <path
+                                                          d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                                                          fillRule="non-zero"
+                                                        />
+                                                      </svg>
+                                                    </EuiIconArrowDown>
+                                                  </EuiIcon>
+                                                </span>
+                                              </EuiFormControlLayoutCustomIcon>
+                                            </div>
+                                          </EuiFormControlLayoutIcons>
+                                        </div>
                                       </div>
-                                    </div>
-                                  </EuiFormControlLayout>
-                                </EuiSelect>
+                                    </EuiFormControlLayout>
+                                  </EuiSelect>
+                                </EuiCompressedSelect>
                               </div>
                             </div>
-                          </EuiFormRow>
+                          </EuiCompressedFormRow>
                         </div>
                       </EuiFlexItem>
                       <EuiFlexItem>
                         <div
                           className="euiFlexItem"
                         >
-                          <EuiFormRow
+                          <EuiCompressedFormRow
                             describedByIds={Array []}
-                            display="row"
+                            display="rowCompressed"
                             fullWidth={true}
                             hasChildLabel={true}
                             hasEmptyLabelSpace={false}
@@ -1867,7 +1903,7 @@ exports[`Flyout component Renders flyout component when multi dataSource enabled
                             labelType="label"
                           >
                             <div
-                              className="euiFormRow euiFormRow--fullWidth"
+                              className="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                               id="random_html_id-row"
                             >
                               <div
@@ -1890,10 +1926,10 @@ exports[`Flyout component Renders flyout component when multi dataSource enabled
                               <div
                                 className="euiFormRow__fieldWrapper"
                               >
-                                <EuiComboBox
+                                <EuiCompressedComboBox
                                   aria-describedby="random_html_id-help-0"
                                   async={false}
-                                  compressed={false}
+                                  compressed={true}
                                   fullWidth={false}
                                   id="random_html_id"
                                   isClearable={true}
@@ -1920,13 +1956,13 @@ exports[`Flyout component Renders flyout component when multi dataSource enabled
                                     aria-describedby="random_html_id-help-0"
                                     aria-expanded={false}
                                     aria-haspopup="listbox"
-                                    className="euiComboBox"
+                                    className="euiComboBox euiComboBox--compressed"
                                     onKeyDown={[Function]}
                                     role="combobox"
                                   >
                                     <EuiComboBoxInput
                                       autoSizeInputRef={[Function]}
-                                      compressed={false}
+                                      compressed={true}
                                       fullWidth={false}
                                       hasSelectedOptions={false}
                                       id="random_html_id"
@@ -1954,7 +1990,7 @@ exports[`Flyout component Renders flyout component when multi dataSource enabled
                                       value=""
                                     >
                                       <EuiFormControlLayout
-                                        compressed={false}
+                                        compressed={true}
                                         fullWidth={false}
                                         icon={
                                           Object {
@@ -1969,13 +2005,13 @@ exports[`Flyout component Renders flyout component when multi dataSource enabled
                                         }
                                       >
                                         <div
-                                          className="euiFormControlLayout"
+                                          className="euiFormControlLayout euiFormControlLayout--compressed"
                                         >
                                           <div
                                             className="euiFormControlLayout__childrenWrapper"
                                           >
                                             <div
-                                              className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+                                              className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
                                               data-test-subj="comboBoxInput"
                                               onClick={[Function]}
                                               tabIndex={-1}
@@ -2041,7 +2077,7 @@ exports[`Flyout component Renders flyout component when multi dataSource enabled
                                               </AutosizeInput>
                                             </div>
                                             <EuiFormControlLayoutIcons
-                                              compressed={false}
+                                              compressed={true}
                                               icon={
                                                 Object {
                                                   "aria-label": "Open list of options",
@@ -2062,7 +2098,7 @@ exports[`Flyout component Renders flyout component when multi dataSource enabled
                                                   data-test-subj="comboBoxToggleListButton"
                                                   iconRef={[Function]}
                                                   onClick={[Function]}
-                                                  size="m"
+                                                  size="s"
                                                   type="arrowDown"
                                                 >
                                                   <button
@@ -2075,19 +2111,19 @@ exports[`Flyout component Renders flyout component when multi dataSource enabled
                                                     <EuiIcon
                                                       aria-hidden="true"
                                                       className="euiFormControlLayoutCustomIcon__icon"
-                                                      size="m"
+                                                      size="s"
                                                       type="arrowDown"
                                                     >
                                                       <EuiIconArrowDown
                                                         aria-hidden={true}
-                                                        className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                        className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                                         focusable="false"
                                                         role="img"
                                                         style={null}
                                                       >
                                                         <svg
                                                           aria-hidden={true}
-                                                          className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                          className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                                           focusable="false"
                                                           height={16}
                                                           role="img"
@@ -2112,7 +2148,7 @@ exports[`Flyout component Renders flyout component when multi dataSource enabled
                                       </EuiFormControlLayout>
                                     </EuiComboBoxInput>
                                   </div>
-                                </EuiComboBox>
+                                </EuiCompressedComboBox>
                                 <EuiFormHelpText
                                   className="euiFormRow__text"
                                   id="random_html_id-help-0"
@@ -2127,14 +2163,14 @@ exports[`Flyout component Renders flyout component when multi dataSource enabled
                                 </EuiFormHelpText>
                               </div>
                             </div>
-                          </EuiFormRow>
+                          </EuiCompressedFormRow>
                         </div>
                       </EuiFlexItem>
                     </div>
                   </EuiFlexGroup>
-                  <EuiFormRow
+                  <EuiCompressedFormRow
                     describedByIds={Array []}
-                    display="row"
+                    display="rowCompressed"
                     error={false}
                     fullWidth={true}
                     hasChildLabel={true}
@@ -2169,7 +2205,7 @@ exports[`Flyout component Renders flyout component when multi dataSource enabled
                     labelType="label"
                   >
                     <div
-                      className="euiFormRow euiFormRow--fullWidth"
+                      className="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                       id="random_html_id-row"
                     >
                       <div
@@ -2397,7 +2433,7 @@ exports[`Flyout component Renders flyout component when multi dataSource enabled
                         </EuiFormHelpText>
                       </div>
                     </div>
-                  </EuiFormRow>
+                  </EuiCompressedFormRow>
                 </SearchConfig>
               </div>
             </EuiFlexItem>
@@ -2460,9 +2496,9 @@ exports[`Flyout component Renders flyout component when multi dataSource enabled
                         <div
                           className="euiFlexItem"
                         >
-                          <EuiFormRow
+                          <EuiCompressedFormRow
                             describedByIds={Array []}
-                            display="row"
+                            display="rowCompressed"
                             error={false}
                             fullWidth={true}
                             hasChildLabel={true}
@@ -2472,7 +2508,7 @@ exports[`Flyout component Renders flyout component when multi dataSource enabled
                             labelType="label"
                           >
                             <div
-                              className="euiFormRow euiFormRow--fullWidth"
+                              className="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                               id="random_html_id-row"
                             >
                               <div
@@ -2498,7 +2534,7 @@ exports[`Flyout component Renders flyout component when multi dataSource enabled
                               <div
                                 className="euiFormRow__fieldWrapper"
                               >
-                                <EuiSelect
+                                <EuiCompressedSelect
                                   aria-label="Search Index"
                                   hasNoInitialSelection={true}
                                   id="random_html_id"
@@ -2508,120 +2544,132 @@ exports[`Flyout component Renders flyout component when multi dataSource enabled
                                   options={Array []}
                                   value=""
                                 >
-                                  <EuiFormControlLayout
-                                    compressed={false}
-                                    fullWidth={false}
-                                    icon={
-                                      Object {
-                                        "side": "right",
-                                        "type": "arrowDown",
-                                      }
-                                    }
-                                    inputId="random_html_id"
-                                    isLoading={false}
+                                  <EuiSelect
+                                    aria-label="Search Index"
+                                    compressed={true}
+                                    hasNoInitialSelection={true}
+                                    id="random_html_id"
+                                    onBlur={[Function]}
+                                    onChange={[Function]}
+                                    onFocus={[Function]}
+                                    options={Array []}
+                                    value=""
                                   >
-                                    <div
-                                      className="euiFormControlLayout"
+                                    <EuiFormControlLayout
+                                      compressed={true}
+                                      fullWidth={false}
+                                      icon={
+                                        Object {
+                                          "side": "right",
+                                          "type": "arrowDown",
+                                        }
+                                      }
+                                      inputId="random_html_id"
+                                      isLoading={false}
                                     >
                                       <div
-                                        className="euiFormControlLayout__childrenWrapper"
+                                        className="euiFormControlLayout euiFormControlLayout--compressed"
                                       >
-                                        <EuiValidatableControl>
-                                          <select
-                                            aria-label="Search Index"
-                                            className="euiSelect"
-                                            id="random_html_id"
-                                            onBlur={[Function]}
-                                            onChange={[Function]}
-                                            onFocus={[Function]}
-                                            onMouseUp={[Function]}
-                                            value=""
-                                          >
-                                            <option
-                                              disabled={true}
-                                              hidden={true}
-                                              style={
-                                                Object {
-                                                  "display": "none",
-                                                }
-                                              }
+                                        <div
+                                          className="euiFormControlLayout__childrenWrapper"
+                                        >
+                                          <EuiValidatableControl>
+                                            <select
+                                              aria-label="Search Index"
+                                              className="euiSelect euiSelect--compressed"
+                                              id="random_html_id"
+                                              onBlur={[Function]}
+                                              onChange={[Function]}
+                                              onFocus={[Function]}
+                                              onMouseUp={[Function]}
                                               value=""
                                             >
-                                               
-                                            </option>
-                                          </select>
-                                        </EuiValidatableControl>
-                                        <EuiFormControlLayoutIcons
-                                          compressed={false}
-                                          icon={
-                                            Object {
-                                              "side": "right",
-                                              "type": "arrowDown",
+                                              <option
+                                                disabled={true}
+                                                hidden={true}
+                                                style={
+                                                  Object {
+                                                    "display": "none",
+                                                  }
+                                                }
+                                                value=""
+                                              >
+                                                 
+                                              </option>
+                                            </select>
+                                          </EuiValidatableControl>
+                                          <EuiFormControlLayoutIcons
+                                            compressed={true}
+                                            icon={
+                                              Object {
+                                                "side": "right",
+                                                "type": "arrowDown",
+                                              }
                                             }
-                                          }
-                                          isLoading={false}
-                                        >
-                                          <div
-                                            className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                                            isLoading={false}
                                           >
-                                            <EuiFormControlLayoutCustomIcon
-                                              size="m"
-                                              type="arrowDown"
+                                            <div
+                                              className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                                             >
-                                              <span
-                                                className="euiFormControlLayoutCustomIcon"
+                                              <EuiFormControlLayoutCustomIcon
+                                                size="s"
+                                                type="arrowDown"
                                               >
-                                                <EuiIcon
-                                                  aria-hidden="true"
-                                                  className="euiFormControlLayoutCustomIcon__icon"
-                                                  size="m"
-                                                  type="arrowDown"
+                                                <span
+                                                  className="euiFormControlLayoutCustomIcon"
                                                 >
-                                                  <EuiIconArrowDown
-                                                    aria-hidden={true}
-                                                    className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
-                                                    focusable="false"
-                                                    role="img"
-                                                    style={null}
+                                                  <EuiIcon
+                                                    aria-hidden="true"
+                                                    className="euiFormControlLayoutCustomIcon__icon"
+                                                    size="s"
+                                                    type="arrowDown"
                                                   >
-                                                    <svg
+                                                    <EuiIconArrowDown
                                                       aria-hidden={true}
-                                                      className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                      className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                                       focusable="false"
-                                                      height={16}
                                                       role="img"
                                                       style={null}
-                                                      viewBox="0 0 16 16"
-                                                      width={16}
-                                                      xmlns="http://www.w3.org/2000/svg"
                                                     >
-                                                      <path
-                                                        d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
-                                                        fillRule="non-zero"
-                                                      />
-                                                    </svg>
-                                                  </EuiIconArrowDown>
-                                                </EuiIcon>
-                                              </span>
-                                            </EuiFormControlLayoutCustomIcon>
-                                          </div>
-                                        </EuiFormControlLayoutIcons>
+                                                      <svg
+                                                        aria-hidden={true}
+                                                        className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
+                                                        focusable="false"
+                                                        height={16}
+                                                        role="img"
+                                                        style={null}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                        xmlns="http://www.w3.org/2000/svg"
+                                                      >
+                                                        <path
+                                                          d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                                                          fillRule="non-zero"
+                                                        />
+                                                      </svg>
+                                                    </EuiIconArrowDown>
+                                                  </EuiIcon>
+                                                </span>
+                                              </EuiFormControlLayoutCustomIcon>
+                                            </div>
+                                          </EuiFormControlLayoutIcons>
+                                        </div>
                                       </div>
-                                    </div>
-                                  </EuiFormControlLayout>
-                                </EuiSelect>
+                                    </EuiFormControlLayout>
+                                  </EuiSelect>
+                                </EuiCompressedSelect>
                               </div>
                             </div>
-                          </EuiFormRow>
+                          </EuiCompressedFormRow>
                         </div>
                       </EuiFlexItem>
                       <EuiFlexItem>
                         <div
                           className="euiFlexItem"
                         >
-                          <EuiFormRow
+                          <EuiCompressedFormRow
                             describedByIds={Array []}
-                            display="row"
+                            display="rowCompressed"
                             fullWidth={true}
                             hasChildLabel={true}
                             hasEmptyLabelSpace={false}
@@ -2630,7 +2678,7 @@ exports[`Flyout component Renders flyout component when multi dataSource enabled
                             labelType="label"
                           >
                             <div
-                              className="euiFormRow euiFormRow--fullWidth"
+                              className="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                               id="random_html_id-row"
                             >
                               <div
@@ -2653,10 +2701,10 @@ exports[`Flyout component Renders flyout component when multi dataSource enabled
                               <div
                                 className="euiFormRow__fieldWrapper"
                               >
-                                <EuiComboBox
+                                <EuiCompressedComboBox
                                   aria-describedby="random_html_id-help-0"
                                   async={false}
-                                  compressed={false}
+                                  compressed={true}
                                   fullWidth={false}
                                   id="random_html_id"
                                   isClearable={true}
@@ -2683,13 +2731,13 @@ exports[`Flyout component Renders flyout component when multi dataSource enabled
                                     aria-describedby="random_html_id-help-0"
                                     aria-expanded={false}
                                     aria-haspopup="listbox"
-                                    className="euiComboBox"
+                                    className="euiComboBox euiComboBox--compressed"
                                     onKeyDown={[Function]}
                                     role="combobox"
                                   >
                                     <EuiComboBoxInput
                                       autoSizeInputRef={[Function]}
-                                      compressed={false}
+                                      compressed={true}
                                       fullWidth={false}
                                       hasSelectedOptions={false}
                                       id="random_html_id"
@@ -2717,7 +2765,7 @@ exports[`Flyout component Renders flyout component when multi dataSource enabled
                                       value=""
                                     >
                                       <EuiFormControlLayout
-                                        compressed={false}
+                                        compressed={true}
                                         fullWidth={false}
                                         icon={
                                           Object {
@@ -2732,13 +2780,13 @@ exports[`Flyout component Renders flyout component when multi dataSource enabled
                                         }
                                       >
                                         <div
-                                          className="euiFormControlLayout"
+                                          className="euiFormControlLayout euiFormControlLayout--compressed"
                                         >
                                           <div
                                             className="euiFormControlLayout__childrenWrapper"
                                           >
                                             <div
-                                              className="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
+                                              className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable"
                                               data-test-subj="comboBoxInput"
                                               onClick={[Function]}
                                               tabIndex={-1}
@@ -2804,7 +2852,7 @@ exports[`Flyout component Renders flyout component when multi dataSource enabled
                                               </AutosizeInput>
                                             </div>
                                             <EuiFormControlLayoutIcons
-                                              compressed={false}
+                                              compressed={true}
                                               icon={
                                                 Object {
                                                   "aria-label": "Open list of options",
@@ -2825,7 +2873,7 @@ exports[`Flyout component Renders flyout component when multi dataSource enabled
                                                   data-test-subj="comboBoxToggleListButton"
                                                   iconRef={[Function]}
                                                   onClick={[Function]}
-                                                  size="m"
+                                                  size="s"
                                                   type="arrowDown"
                                                 >
                                                   <button
@@ -2838,19 +2886,19 @@ exports[`Flyout component Renders flyout component when multi dataSource enabled
                                                     <EuiIcon
                                                       aria-hidden="true"
                                                       className="euiFormControlLayoutCustomIcon__icon"
-                                                      size="m"
+                                                      size="s"
                                                       type="arrowDown"
                                                     >
                                                       <EuiIconArrowDown
                                                         aria-hidden={true}
-                                                        className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                        className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                                         focusable="false"
                                                         role="img"
                                                         style={null}
                                                       >
                                                         <svg
                                                           aria-hidden={true}
-                                                          className="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                                                          className="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                                                           focusable="false"
                                                           height={16}
                                                           role="img"
@@ -2875,7 +2923,7 @@ exports[`Flyout component Renders flyout component when multi dataSource enabled
                                       </EuiFormControlLayout>
                                     </EuiComboBoxInput>
                                   </div>
-                                </EuiComboBox>
+                                </EuiCompressedComboBox>
                                 <EuiFormHelpText
                                   className="euiFormRow__text"
                                   id="random_html_id-help-0"
@@ -2890,14 +2938,14 @@ exports[`Flyout component Renders flyout component when multi dataSource enabled
                                 </EuiFormHelpText>
                               </div>
                             </div>
-                          </EuiFormRow>
+                          </EuiCompressedFormRow>
                         </div>
                       </EuiFlexItem>
                     </div>
                   </EuiFlexGroup>
-                  <EuiFormRow
+                  <EuiCompressedFormRow
                     describedByIds={Array []}
-                    display="row"
+                    display="rowCompressed"
                     error={false}
                     fullWidth={true}
                     hasChildLabel={true}
@@ -2932,7 +2980,7 @@ exports[`Flyout component Renders flyout component when multi dataSource enabled
                     labelType="label"
                   >
                     <div
-                      className="euiFormRow euiFormRow--fullWidth"
+                      className="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
                       id="random_html_id-row"
                     >
                       <div
@@ -3160,7 +3208,7 @@ exports[`Flyout component Renders flyout component when multi dataSource enabled
                         </EuiFormHelpText>
                       </div>
                     </div>
-                  </EuiFormRow>
+                  </EuiCompressedFormRow>
                 </SearchConfig>
               </div>
             </EuiFlexItem>
diff --git a/public/components/query_compare/search_result/search_components/__tests__/search_config.test.tsx b/public/components/query_compare/search_result/search_components/__tests__/search_config.test.tsx
index 76d47451..a5359ab2 100644
--- a/public/components/query_compare/search_result/search_components/__tests__/search_config.test.tsx
+++ b/public/components/query_compare/search_result/search_components/__tests__/search_config.test.tsx
@@ -44,8 +44,8 @@ describe('Flyout component', () => {
       wrapper.find('EuiCodeEditor').prop('onChange')?.({ target: { value: '' } });
       wrapper.find('EuiSelect').prop('onChange')?.({ target: {} });
       wrapper.find('EuiSelect').prop('onBlur')?.({ target: {} });
-      wrapper.find('EuiComboBox').prop('onChange')?.({ target: { selectedPipelineOptions: [] } });
-      wrapper.find('EuiComboBox').prop('onChange')?.({
+      wrapper.find('EuiCompressedComboBox').prop('onChange')?.({ target: { selectedPipelineOptions: [] } });
+      wrapper.find('EuiCompressedComboBox').prop('onChange')?.({
         target: { selectedPipelineOptions: [{ label: '_none' }] },
       });
     });
@@ -84,8 +84,8 @@ describe('Flyout component', () => {
       wrapper.find('EuiCodeEditor').prop('onChange')?.({ target: { value: '' } });
       wrapper.find('EuiSelect').prop('onChange')?.({ target: {} });
       wrapper.find('EuiSelect').prop('onBlur')?.({ target: {} });
-      wrapper.find('EuiComboBox').prop('onChange')?.({ target: { selectedPipelineOptions: [] } });
-      wrapper.find('EuiComboBox').prop('onChange')?.({
+      wrapper.find('EuiCompressedComboBox').prop('onChange')?.({ target: { selectedPipelineOptions: [] } });
+      wrapper.find('EuiCompressedComboBox').prop('onChange')?.({
         target: { selectedPipelineOptions: [{ label: '_none' }] },
       });
     });
diff --git a/public/components/query_compare/search_result/search_components/search_bar.tsx b/public/components/query_compare/search_result/search_components/search_bar.tsx
index 60b510d5..126e04b6 100644
--- a/public/components/query_compare/search_result/search_components/search_bar.tsx
+++ b/public/components/query_compare/search_result/search_components/search_bar.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiButton, EuiFieldSearch, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
+import { EuiSmallButton, EuiCompressedFieldSearch, EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
 import React from 'react';
 
 interface SearchBarProps {
@@ -22,7 +22,7 @@ export const SearchInputBar = ({
       <EuiSpacer size="m" />
       <EuiFlexGroup>
         <EuiFlexItem grow={true}>
-          <EuiFieldSearch
+          <EuiCompressedFieldSearch
             id="searchRelevance-searchBar"
             fullWidth={true}
             placeholder="Search"
@@ -34,9 +34,9 @@ export const SearchInputBar = ({
           />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
-          <EuiButton fill onClick={onClickSearch} aria-label="searchRelevance-searchButton">
+          <EuiSmallButton fill onClick={onClickSearch} aria-label="searchRelevance-searchButton">
             Search
-          </EuiButton>
+          </EuiSmallButton>
         </EuiFlexItem>
       </EuiFlexGroup>
     </>
diff --git a/public/components/query_compare/search_result/search_components/search_configs/search_config.tsx b/public/components/query_compare/search_result/search_components/search_configs/search_config.tsx
index a3766e5b..77b6c456 100644
--- a/public/components/query_compare/search_result/search_components/search_configs/search_config.tsx
+++ b/public/components/query_compare/search_result/search_components/search_configs/search_config.tsx
@@ -6,11 +6,11 @@
 import {
   EuiButtonEmpty,
   EuiCodeEditor,
-  EuiComboBox,
+  EuiCompressedComboBox,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiFormRow,
-  EuiSelect,
+  EuiCompressedFormRow,
+  EuiCompressedSelect,
   EuiSpacer,
   EuiText,
   EuiTitle,
@@ -53,7 +53,7 @@ interface SearchConfigProps {
   dataSourceManagement: DataSourceManagementPluginSetup;
   navigation: NavigationPublicPluginStart;
   setActionMenu: (menuMount: MountPoint | undefined) => void;
-  dataSourceOptions: DataSourceOption[] 
+  dataSourceOptions: DataSourceOption[]
 }
 
 export const SearchConfig: FunctionComponent<SearchConfigProps> = ({
@@ -84,7 +84,7 @@ export const SearchConfig: FunctionComponent<SearchConfigProps> = ({
       selectIndex: '',
     }));
   };
-  
+
   const documentIndex = queryNumber === 1? documentsIndexes1: documentsIndexes2
   console.log(fetchedPipelines1)
   const pipelines = queryNumber === 1? fetchedPipelines1: fetchedPipelines2
@@ -143,7 +143,7 @@ export const SearchConfig: FunctionComponent<SearchConfigProps> = ({
     }
     else{
       setDataSource2(dataConnectionId)
-    }   
+    }
     setPipeline('')
   }
   useEffect(() => {
@@ -155,7 +155,7 @@ export const SearchConfig: FunctionComponent<SearchConfigProps> = ({
 
   if (dataSourceEnabled) {
     DataSourceSelector = dataSourceManagement.ui.DataSourceSelector;
-  } 
+  }
   return (
     <>
       <EuiTitle size="xs">
@@ -165,29 +165,29 @@ export const SearchConfig: FunctionComponent<SearchConfigProps> = ({
       <EuiFlexGroup>
         {dataSourceEnabled && (
           <EuiFlexItem>
-            <EuiFormRow 
+            <EuiCompressedFormRow
               fullWidth
               label="Data Source"
             >
               <DataSourceSelector
                 savedObjectsClient={savedObjects.client}
-                notifications={notifications} 
+                notifications={notifications}
                 onSelectedDataSource={onSelectedDataSource}
-                disabled={false} 
+                disabled={false}
                 fullWidth={false}
                 removePrepend={true}
                 defaultOption= {[]}
               />
-            </EuiFormRow>
+            </EuiCompressedFormRow>
           </EuiFlexItem> )}
         <EuiFlexItem>
-          <EuiFormRow
+          <EuiCompressedFormRow
             fullWidth
             label="Index"
             error={!!queryError.selectIndex.length && <span>{queryError.selectIndex}</span>}
             isInvalid={!!queryError.selectIndex.length}
           >
-            <EuiSelect
+            <EuiCompressedSelect
               hasNoInitialSelection={true}
               options={documentIndex.map(({ index }) => ({
                 value: index,
@@ -198,21 +198,21 @@ export const SearchConfig: FunctionComponent<SearchConfigProps> = ({
               value={selectedIndex}
               onBlur={selectIndexOnBlur}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </EuiFlexItem>
         <EuiFlexItem>
-          <EuiFormRow fullWidth label="Pipeline" helpText="Optional">
-            <EuiComboBox
+          <EuiCompressedFormRow fullWidth label="Pipeline" helpText="Optional">
+            <EuiCompressedComboBox
               placeholder=""
               singleSelection={{ asPlainText: true }}
               options={sortedPipelines}
               selectedOptions={pipeline ? [{ label: pipeline }] : []}
               onChange={onChangePipeline}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         </EuiFlexItem>
       </EuiFlexGroup>
-      <EuiFormRow
+      <EuiCompressedFormRow
         fullWidth
         label="Query"
         error={!!queryError.queryString.length && <span>{queryError.queryString}</span>}
@@ -249,7 +249,7 @@ export const SearchConfig: FunctionComponent<SearchConfigProps> = ({
           onBlur={codeEditorOnBlur}
           tabSize={2}
         />
-      </EuiFormRow>
+      </EuiCompressedFormRow>
     </>
   );
 };