From 4f172cfc130bf53920ace4389b29c03a60ba7905 Mon Sep 17 00:00:00 2001
From: sumukhswamy <sumukhhs@amazon.com>
Date: Tue, 5 Sep 2023 11:06:36 -0700
Subject: [PATCH] =?UTF-8?q?added=20code=20for=20the=20change=20of=20design?=
 =?UTF-8?q?=20of=20the=20sidebar,=20fixed=20overriding=20=E2=80=A6=20(#928?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* added code for the change of design of the sidebar, fixed overriding spinner bug, changed font size

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>

* addressed PR comments

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>

* code for overriding pattern

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>

* updated snapshots

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>

---------

Signed-off-by: sumukhswamy <sumukhhs@amazon.com>
---
 .../event_analytics/explorer/explorer.tsx     |   1 +
 .../__snapshots__/field.test.tsx.snap         |  10 +-
 .../__snapshots__/sidebar.test.tsx.snap       | 351 ++++++++++--------
 .../explorer/sidebar/field.tsx                |   8 +-
 .../explorer/sidebar/sidebar.scss             |   4 +
 .../explorer/sidebar/sidebar.tsx              |  17 +-
 6 files changed, 210 insertions(+), 181 deletions(-)

diff --git a/public/components/event_analytics/explorer/explorer.tsx b/public/components/event_analytics/explorer/explorer.tsx
index 9ceaaa9f44..be6030da5b 100644
--- a/public/components/event_analytics/explorer/explorer.tsx
+++ b/public/components/event_analytics/explorer/explorer.tsx
@@ -642,6 +642,7 @@ export const Explorer = ({
     isOverridingTimestamp,
     query,
     isLiveTailOnRef.current,
+    isOverridingPattern
   ]);
 
   const visualizations: IVisualizationContainerProps = useMemo(() => {
diff --git a/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/field.test.tsx.snap b/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/field.test.tsx.snap
index 8ec133b20d..a94df6beba 100644
--- a/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/field.test.tsx.snap
+++ b/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/field.test.tsx.snap
@@ -21,7 +21,7 @@ exports[`Field component Renders a sidebar field 1`] = `
     anchorPosition="rightUp"
     button={
       <FieldButton
-        className="shard__fieldSelectorField explorer__fieldSelectorField"
+        className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
         dataTestSubj="field-agent-showDetails"
         fieldAction={
           <React.Fragment>
@@ -87,7 +87,7 @@ exports[`Field component Renders a sidebar field 1`] = `
         }
         isActive={false}
         onClick={[Function]}
-        size="m"
+        size="s"
       />
     }
     closePopover={[Function]}
@@ -105,7 +105,7 @@ exports[`Field component Renders a sidebar field 1`] = `
         className="euiPopover__anchor"
       >
         <FieldButton
-          className="shard__fieldSelectorField explorer__fieldSelectorField"
+          className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
           dataTestSubj="field-agent-showDetails"
           fieldAction={
             <React.Fragment>
@@ -171,10 +171,10 @@ exports[`Field component Renders a sidebar field 1`] = `
           }
           isActive={false}
           onClick={[Function]}
-          size="m"
+          size="s"
         >
           <div
-            className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+            className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
           >
             <button
               className="osd-resetFocusState osdFieldButton__button"
diff --git a/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap b/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
index bc4bb32652..5e51cb9c9d 100644
--- a/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
+++ b/public/components/event_analytics/explorer/sidebar/__tests__/__snapshots__/sidebar.test.tsx.snap
@@ -685,7 +685,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                 arrowDisplay="left"
                 buttonContent={
                   <EuiTitle
-                    size="xxxs"
+                    size="xxs"
                   >
                     <span>
                       Query fields
@@ -745,10 +745,10 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                         className="euiIEFlexWrapFix"
                       >
                         <EuiTitle
-                          size="xxxs"
+                          size="xxs"
                         >
                           <span
-                            className="euiTitle euiTitle--xxxsmall"
+                            className="euiTitle euiTitle--xxsmall"
                           >
                             Query fields
                           </span>
@@ -770,13 +770,20 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                         <div
                           className="euiAccordion__padding--xs"
                         >
+                          <EuiHorizontalRule
+                            margin="xs"
+                          >
+                            <hr
+                              className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
+                            />
+                          </EuiHorizontalRule>
                           <ul
                             aria-labelledby="queried_fields"
                             className="dscSidebarList dscFieldList--selected"
                             data-test-subj="fieldList-selected"
                           >
                             <li
-                              className="dscSidebar__item"
+                              className="dscSidebar__item sidebar_content"
                               data-attr-field="double_per_ip_bytes"
                               key="fielddouble_per_ip_bytes"
                             >
@@ -799,7 +806,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                   anchorPosition="rightUp"
                                   button={
                                     <FieldButton
-                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                       dataTestSubj="field-double_per_ip_bytes-showDetails"
                                       fieldAction={
                                         <React.Fragment>
@@ -854,7 +861,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       }
                                       isActive={false}
                                       onClick={[Function]}
-                                      size="m"
+                                      size="s"
                                     />
                                   }
                                   closePopover={[Function]}
@@ -872,7 +879,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       className="euiPopover__anchor"
                                     >
                                       <FieldButton
-                                        className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                        className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         dataTestSubj="field-double_per_ip_bytes-showDetails"
                                         fieldAction={
                                           <React.Fragment>
@@ -927,10 +934,10 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                         }
                                         isActive={false}
                                         onClick={[Function]}
-                                        size="m"
+                                        size="s"
                                       >
                                         <div
-                                          className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                          className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         >
                                           <button
                                             className="osd-resetFocusState osdFieldButton__button"
@@ -1095,7 +1102,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                               </Component>
                             </li>
                             <li
-                              className="dscSidebar__item"
+                              className="dscSidebar__item sidebar_content"
                               data-attr-field="host"
                               key="fieldhost"
                             >
@@ -1118,7 +1125,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                   anchorPosition="rightUp"
                                   button={
                                     <FieldButton
-                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                       dataTestSubj="field-host-showDetails"
                                       fieldAction={
                                         <React.Fragment>
@@ -1173,7 +1180,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       }
                                       isActive={false}
                                       onClick={[Function]}
-                                      size="m"
+                                      size="s"
                                     />
                                   }
                                   closePopover={[Function]}
@@ -1191,7 +1198,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       className="euiPopover__anchor"
                                     >
                                       <FieldButton
-                                        className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                        className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         dataTestSubj="field-host-showDetails"
                                         fieldAction={
                                           <React.Fragment>
@@ -1246,10 +1253,10 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                         }
                                         isActive={false}
                                         onClick={[Function]}
-                                        size="m"
+                                        size="s"
                                       >
                                         <div
-                                          className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                          className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         >
                                           <button
                                             className="osd-resetFocusState osdFieldButton__button"
@@ -1414,7 +1421,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                               </Component>
                             </li>
                             <li
-                              className="dscSidebar__item"
+                              className="dscSidebar__item sidebar_content"
                               data-attr-field="ip_count"
                               key="fieldip_count"
                             >
@@ -1437,7 +1444,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                   anchorPosition="rightUp"
                                   button={
                                     <FieldButton
-                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                       dataTestSubj="field-ip_count-showDetails"
                                       fieldAction={
                                         <React.Fragment>
@@ -1492,7 +1499,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       }
                                       isActive={false}
                                       onClick={[Function]}
-                                      size="m"
+                                      size="s"
                                     />
                                   }
                                   closePopover={[Function]}
@@ -1510,7 +1517,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       className="euiPopover__anchor"
                                     >
                                       <FieldButton
-                                        className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                        className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         dataTestSubj="field-ip_count-showDetails"
                                         fieldAction={
                                           <React.Fragment>
@@ -1565,10 +1572,10 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                         }
                                         isActive={false}
                                         onClick={[Function]}
-                                        size="m"
+                                        size="s"
                                       >
                                         <div
-                                          className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                          className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         >
                                           <button
                                             className="osd-resetFocusState osdFieldButton__button"
@@ -1733,7 +1740,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                               </Component>
                             </li>
                             <li
-                              className="dscSidebar__item"
+                              className="dscSidebar__item sidebar_content"
                               data-attr-field="per_ip_bytes"
                               key="fieldper_ip_bytes"
                             >
@@ -1756,7 +1763,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                   anchorPosition="rightUp"
                                   button={
                                     <FieldButton
-                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                       dataTestSubj="field-per_ip_bytes-showDetails"
                                       fieldAction={
                                         <React.Fragment>
@@ -1811,7 +1818,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       }
                                       isActive={false}
                                       onClick={[Function]}
-                                      size="m"
+                                      size="s"
                                     />
                                   }
                                   closePopover={[Function]}
@@ -1829,7 +1836,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       className="euiPopover__anchor"
                                     >
                                       <FieldButton
-                                        className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                        className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         dataTestSubj="field-per_ip_bytes-showDetails"
                                         fieldAction={
                                           <React.Fragment>
@@ -1884,10 +1891,10 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                         }
                                         isActive={false}
                                         onClick={[Function]}
-                                        size="m"
+                                        size="s"
                                       >
                                         <div
-                                          className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                          className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         >
                                           <button
                                             className="osd-resetFocusState osdFieldButton__button"
@@ -2052,7 +2059,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                               </Component>
                             </li>
                             <li
-                              className="dscSidebar__item"
+                              className="dscSidebar__item sidebar_content"
                               data-attr-field="resp_code"
                               key="fieldresp_code"
                             >
@@ -2075,7 +2082,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                   anchorPosition="rightUp"
                                   button={
                                     <FieldButton
-                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                       dataTestSubj="field-resp_code-showDetails"
                                       fieldAction={
                                         <React.Fragment>
@@ -2130,7 +2137,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       }
                                       isActive={false}
                                       onClick={[Function]}
-                                      size="m"
+                                      size="s"
                                     />
                                   }
                                   closePopover={[Function]}
@@ -2148,7 +2155,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       className="euiPopover__anchor"
                                     >
                                       <FieldButton
-                                        className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                        className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         dataTestSubj="field-resp_code-showDetails"
                                         fieldAction={
                                           <React.Fragment>
@@ -2203,10 +2210,10 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                         }
                                         isActive={false}
                                         onClick={[Function]}
-                                        size="m"
+                                        size="s"
                                       >
                                         <div
-                                          className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                          className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         >
                                           <button
                                             className="osd-resetFocusState osdFieldButton__button"
@@ -2371,7 +2378,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                               </Component>
                             </li>
                             <li
-                              className="dscSidebar__item"
+                              className="dscSidebar__item sidebar_content"
                               data-attr-field="sum_bytes"
                               key="fieldsum_bytes"
                             >
@@ -2394,7 +2401,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                   anchorPosition="rightUp"
                                   button={
                                     <FieldButton
-                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                       dataTestSubj="field-sum_bytes-showDetails"
                                       fieldAction={
                                         <React.Fragment>
@@ -2449,7 +2456,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       }
                                       isActive={false}
                                       onClick={[Function]}
-                                      size="m"
+                                      size="s"
                                     />
                                   }
                                   closePopover={[Function]}
@@ -2467,7 +2474,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       className="euiPopover__anchor"
                                     >
                                       <FieldButton
-                                        className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                        className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         dataTestSubj="field-sum_bytes-showDetails"
                                         fieldAction={
                                           <React.Fragment>
@@ -2522,10 +2529,10 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                         }
                                         isActive={false}
                                         onClick={[Function]}
-                                        size="m"
+                                        size="s"
                                       >
                                         <div
-                                          className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                          className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         >
                                           <button
                                             className="osd-resetFocusState osdFieldButton__button"
@@ -2707,7 +2714,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                 arrowDisplay="left"
                 buttonContent={
                   <EuiTitle
-                    size="xxxs"
+                    size="xxs"
                   >
                     <span>
                       Selected Fields
@@ -2767,10 +2774,10 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                         className="euiIEFlexWrapFix"
                       >
                         <EuiTitle
-                          size="xxxs"
+                          size="xxs"
                         >
                           <span
-                            className="euiTitle euiTitle--xxxsmall"
+                            className="euiTitle euiTitle--xxsmall"
                           >
                             Selected Fields
                           </span>
@@ -2792,6 +2799,13 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                         <div
                           className="euiAccordion__padding--xs"
                         >
+                          <EuiHorizontalRule
+                            margin="xs"
+                          >
+                            <hr
+                              className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
+                            />
+                          </EuiHorizontalRule>
                           <ul
                             aria-labelledby="selected_fields"
                             className="dscSidebarList dscFieldList--selected"
@@ -2814,7 +2828,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                 arrowDisplay="left"
                 buttonContent={
                   <EuiTitle
-                    size="xxxs"
+                    size="xxs"
                   >
                     <span>
                       Available Fields
@@ -2874,10 +2888,10 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                         className="euiIEFlexWrapFix"
                       >
                         <EuiTitle
-                          size="xxxs"
+                          size="xxs"
                         >
                           <span
-                            className="euiTitle euiTitle--xxxsmall"
+                            className="euiTitle euiTitle--xxsmall"
                           >
                             Available Fields
                           </span>
@@ -2899,13 +2913,20 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                         <div
                           className="euiAccordion__padding--xs"
                         >
+                          <EuiHorizontalRule
+                            margin="xs"
+                          >
+                            <hr
+                              className="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginXSmall"
+                            />
+                          </EuiHorizontalRule>
                           <ul
                             aria-labelledby="available_fields"
                             className="dscFieldList dscFieldList--unpopular hidden-sm hidden-xs"
                             data-test-subj="fieldList-unpopular"
                           >
                             <li
-                              className="dscSidebar__item"
+                              className="dscSidebar__item sidebar_content"
                               data-attr-field="agent"
                               key="fieldagent"
                             >
@@ -2928,7 +2949,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                   anchorPosition="rightUp"
                                   button={
                                     <FieldButton
-                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                       dataTestSubj="field-agent-showDetails"
                                       fieldAction={
                                         <React.Fragment>
@@ -2994,7 +3015,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       }
                                       isActive={false}
                                       onClick={[Function]}
-                                      size="m"
+                                      size="s"
                                     />
                                   }
                                   closePopover={[Function]}
@@ -3012,7 +3033,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       className="euiPopover__anchor"
                                     >
                                       <FieldButton
-                                        className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                        className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         dataTestSubj="field-agent-showDetails"
                                         fieldAction={
                                           <React.Fragment>
@@ -3078,10 +3099,10 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                         }
                                         isActive={false}
                                         onClick={[Function]}
-                                        size="m"
+                                        size="s"
                                       >
                                         <div
-                                          className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                          className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         >
                                           <button
                                             className="osd-resetFocusState osdFieldButton__button"
@@ -3293,7 +3314,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                               </Component>
                             </li>
                             <li
-                              className="dscSidebar__item"
+                              className="dscSidebar__item sidebar_content"
                               data-attr-field="bytes"
                               key="fieldbytes"
                             >
@@ -3316,7 +3337,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                   anchorPosition="rightUp"
                                   button={
                                     <FieldButton
-                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                       dataTestSubj="field-bytes-showDetails"
                                       fieldAction={
                                         <React.Fragment>
@@ -3370,7 +3391,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       }
                                       isActive={false}
                                       onClick={[Function]}
-                                      size="m"
+                                      size="s"
                                     />
                                   }
                                   closePopover={[Function]}
@@ -3388,7 +3409,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       className="euiPopover__anchor"
                                     >
                                       <FieldButton
-                                        className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                        className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         dataTestSubj="field-bytes-showDetails"
                                         fieldAction={
                                           <React.Fragment>
@@ -3442,10 +3463,10 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                         }
                                         isActive={false}
                                         onClick={[Function]}
-                                        size="m"
+                                        size="s"
                                       >
                                         <div
-                                          className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                          className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         >
                                           <button
                                             className="osd-resetFocusState osdFieldButton__button"
@@ -3610,7 +3631,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                               </Component>
                             </li>
                             <li
-                              className="dscSidebar__item"
+                              className="dscSidebar__item sidebar_content"
                               data-attr-field="clientip"
                               key="fieldclientip"
                             >
@@ -3633,7 +3654,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                   anchorPosition="rightUp"
                                   button={
                                     <FieldButton
-                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                       dataTestSubj="field-clientip-showDetails"
                                       fieldAction={
                                         <React.Fragment>
@@ -3687,7 +3708,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       }
                                       isActive={false}
                                       onClick={[Function]}
-                                      size="m"
+                                      size="s"
                                     />
                                   }
                                   closePopover={[Function]}
@@ -3705,7 +3726,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       className="euiPopover__anchor"
                                     >
                                       <FieldButton
-                                        className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                        className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         dataTestSubj="field-clientip-showDetails"
                                         fieldAction={
                                           <React.Fragment>
@@ -3759,10 +3780,10 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                         }
                                         isActive={false}
                                         onClick={[Function]}
-                                        size="m"
+                                        size="s"
                                       >
                                         <div
-                                          className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                          className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         >
                                           <button
                                             className="osd-resetFocusState osdFieldButton__button"
@@ -3927,7 +3948,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                               </Component>
                             </li>
                             <li
-                              className="dscSidebar__item"
+                              className="dscSidebar__item sidebar_content"
                               data-attr-field="event"
                               key="fieldevent"
                             >
@@ -3950,7 +3971,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                   anchorPosition="rightUp"
                                   button={
                                     <FieldButton
-                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                       dataTestSubj="field-event-showDetails"
                                       fieldAction={
                                         <React.Fragment>
@@ -4004,7 +4025,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       }
                                       isActive={false}
                                       onClick={[Function]}
-                                      size="m"
+                                      size="s"
                                     />
                                   }
                                   closePopover={[Function]}
@@ -4022,7 +4043,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       className="euiPopover__anchor"
                                     >
                                       <FieldButton
-                                        className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                        className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         dataTestSubj="field-event-showDetails"
                                         fieldAction={
                                           <React.Fragment>
@@ -4076,10 +4097,10 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                         }
                                         isActive={false}
                                         onClick={[Function]}
-                                        size="m"
+                                        size="s"
                                       >
                                         <div
-                                          className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                          className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         >
                                           <button
                                             className="osd-resetFocusState osdFieldButton__button"
@@ -4244,7 +4265,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                               </Component>
                             </li>
                             <li
-                              className="dscSidebar__item"
+                              className="dscSidebar__item sidebar_content"
                               data-attr-field="extension"
                               key="fieldextension"
                             >
@@ -4267,7 +4288,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                   anchorPosition="rightUp"
                                   button={
                                     <FieldButton
-                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                       dataTestSubj="field-extension-showDetails"
                                       fieldAction={
                                         <React.Fragment>
@@ -4333,7 +4354,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       }
                                       isActive={false}
                                       onClick={[Function]}
-                                      size="m"
+                                      size="s"
                                     />
                                   }
                                   closePopover={[Function]}
@@ -4351,7 +4372,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       className="euiPopover__anchor"
                                     >
                                       <FieldButton
-                                        className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                        className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         dataTestSubj="field-extension-showDetails"
                                         fieldAction={
                                           <React.Fragment>
@@ -4417,10 +4438,10 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                         }
                                         isActive={false}
                                         onClick={[Function]}
-                                        size="m"
+                                        size="s"
                                       >
                                         <div
-                                          className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                          className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         >
                                           <button
                                             className="osd-resetFocusState osdFieldButton__button"
@@ -4632,7 +4653,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                               </Component>
                             </li>
                             <li
-                              className="dscSidebar__item"
+                              className="dscSidebar__item sidebar_content"
                               data-attr-field="geo"
                               key="fieldgeo"
                             >
@@ -4655,7 +4676,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                   anchorPosition="rightUp"
                                   button={
                                     <FieldButton
-                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                       dataTestSubj="field-geo-showDetails"
                                       fieldAction={
                                         <React.Fragment>
@@ -4709,7 +4730,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       }
                                       isActive={false}
                                       onClick={[Function]}
-                                      size="m"
+                                      size="s"
                                     />
                                   }
                                   closePopover={[Function]}
@@ -4727,7 +4748,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       className="euiPopover__anchor"
                                     >
                                       <FieldButton
-                                        className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                        className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         dataTestSubj="field-geo-showDetails"
                                         fieldAction={
                                           <React.Fragment>
@@ -4781,10 +4802,10 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                         }
                                         isActive={false}
                                         onClick={[Function]}
-                                        size="m"
+                                        size="s"
                                       >
                                         <div
-                                          className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                          className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         >
                                           <button
                                             className="osd-resetFocusState osdFieldButton__button"
@@ -4949,7 +4970,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                               </Component>
                             </li>
                             <li
-                              className="dscSidebar__item"
+                              className="dscSidebar__item sidebar_content"
                               data-attr-field="host"
                               key="fieldhost"
                             >
@@ -4972,7 +4993,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                   anchorPosition="rightUp"
                                   button={
                                     <FieldButton
-                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                       dataTestSubj="field-host-showDetails"
                                       fieldAction={
                                         <React.Fragment>
@@ -5038,7 +5059,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       }
                                       isActive={false}
                                       onClick={[Function]}
-                                      size="m"
+                                      size="s"
                                     />
                                   }
                                   closePopover={[Function]}
@@ -5056,7 +5077,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       className="euiPopover__anchor"
                                     >
                                       <FieldButton
-                                        className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                        className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         dataTestSubj="field-host-showDetails"
                                         fieldAction={
                                           <React.Fragment>
@@ -5122,10 +5143,10 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                         }
                                         isActive={false}
                                         onClick={[Function]}
-                                        size="m"
+                                        size="s"
                                       >
                                         <div
-                                          className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                          className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         >
                                           <button
                                             className="osd-resetFocusState osdFieldButton__button"
@@ -5337,7 +5358,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                               </Component>
                             </li>
                             <li
-                              className="dscSidebar__item"
+                              className="dscSidebar__item sidebar_content"
                               data-attr-field="index"
                               key="fieldindex"
                             >
@@ -5360,7 +5381,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                   anchorPosition="rightUp"
                                   button={
                                     <FieldButton
-                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                       dataTestSubj="field-index-showDetails"
                                       fieldAction={
                                         <React.Fragment>
@@ -5426,7 +5447,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       }
                                       isActive={false}
                                       onClick={[Function]}
-                                      size="m"
+                                      size="s"
                                     />
                                   }
                                   closePopover={[Function]}
@@ -5444,7 +5465,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       className="euiPopover__anchor"
                                     >
                                       <FieldButton
-                                        className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                        className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         dataTestSubj="field-index-showDetails"
                                         fieldAction={
                                           <React.Fragment>
@@ -5510,10 +5531,10 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                         }
                                         isActive={false}
                                         onClick={[Function]}
-                                        size="m"
+                                        size="s"
                                       >
                                         <div
-                                          className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                          className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         >
                                           <button
                                             className="osd-resetFocusState osdFieldButton__button"
@@ -5725,7 +5746,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                               </Component>
                             </li>
                             <li
-                              className="dscSidebar__item"
+                              className="dscSidebar__item sidebar_content"
                               data-attr-field="ip"
                               key="fieldip"
                             >
@@ -5748,7 +5769,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                   anchorPosition="rightUp"
                                   button={
                                     <FieldButton
-                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                       dataTestSubj="field-ip-showDetails"
                                       fieldAction={
                                         <React.Fragment>
@@ -5802,7 +5823,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       }
                                       isActive={false}
                                       onClick={[Function]}
-                                      size="m"
+                                      size="s"
                                     />
                                   }
                                   closePopover={[Function]}
@@ -5820,7 +5841,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       className="euiPopover__anchor"
                                     >
                                       <FieldButton
-                                        className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                        className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         dataTestSubj="field-ip-showDetails"
                                         fieldAction={
                                           <React.Fragment>
@@ -5874,10 +5895,10 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                         }
                                         isActive={false}
                                         onClick={[Function]}
-                                        size="m"
+                                        size="s"
                                       >
                                         <div
-                                          className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                          className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         >
                                           <button
                                             className="osd-resetFocusState osdFieldButton__button"
@@ -6042,7 +6063,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                               </Component>
                             </li>
                             <li
-                              className="dscSidebar__item"
+                              className="dscSidebar__item sidebar_content"
                               data-attr-field="machine"
                               key="fieldmachine"
                             >
@@ -6065,7 +6086,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                   anchorPosition="rightUp"
                                   button={
                                     <FieldButton
-                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                       dataTestSubj="field-machine-showDetails"
                                       fieldAction={
                                         <React.Fragment>
@@ -6119,7 +6140,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       }
                                       isActive={false}
                                       onClick={[Function]}
-                                      size="m"
+                                      size="s"
                                     />
                                   }
                                   closePopover={[Function]}
@@ -6137,7 +6158,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       className="euiPopover__anchor"
                                     >
                                       <FieldButton
-                                        className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                        className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         dataTestSubj="field-machine-showDetails"
                                         fieldAction={
                                           <React.Fragment>
@@ -6191,10 +6212,10 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                         }
                                         isActive={false}
                                         onClick={[Function]}
-                                        size="m"
+                                        size="s"
                                       >
                                         <div
-                                          className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                          className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         >
                                           <button
                                             className="osd-resetFocusState osdFieldButton__button"
@@ -6359,7 +6380,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                               </Component>
                             </li>
                             <li
-                              className="dscSidebar__item"
+                              className="dscSidebar__item sidebar_content"
                               data-attr-field="memory"
                               key="fieldmemory"
                             >
@@ -6382,7 +6403,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                   anchorPosition="rightUp"
                                   button={
                                     <FieldButton
-                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                       dataTestSubj="field-memory-showDetails"
                                       fieldAction={
                                         <React.Fragment>
@@ -6436,7 +6457,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       }
                                       isActive={false}
                                       onClick={[Function]}
-                                      size="m"
+                                      size="s"
                                     />
                                   }
                                   closePopover={[Function]}
@@ -6454,7 +6475,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       className="euiPopover__anchor"
                                     >
                                       <FieldButton
-                                        className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                        className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         dataTestSubj="field-memory-showDetails"
                                         fieldAction={
                                           <React.Fragment>
@@ -6508,10 +6529,10 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                         }
                                         isActive={false}
                                         onClick={[Function]}
-                                        size="m"
+                                        size="s"
                                       >
                                         <div
-                                          className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                          className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         >
                                           <button
                                             className="osd-resetFocusState osdFieldButton__button"
@@ -6676,7 +6697,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                               </Component>
                             </li>
                             <li
-                              className="dscSidebar__item"
+                              className="dscSidebar__item sidebar_content"
                               data-attr-field="message"
                               key="fieldmessage"
                             >
@@ -6699,7 +6720,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                   anchorPosition="rightUp"
                                   button={
                                     <FieldButton
-                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                       dataTestSubj="field-message-showDetails"
                                       fieldAction={
                                         <React.Fragment>
@@ -6765,7 +6786,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       }
                                       isActive={false}
                                       onClick={[Function]}
-                                      size="m"
+                                      size="s"
                                     />
                                   }
                                   closePopover={[Function]}
@@ -6783,7 +6804,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       className="euiPopover__anchor"
                                     >
                                       <FieldButton
-                                        className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                        className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         dataTestSubj="field-message-showDetails"
                                         fieldAction={
                                           <React.Fragment>
@@ -6849,10 +6870,10 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                         }
                                         isActive={false}
                                         onClick={[Function]}
-                                        size="m"
+                                        size="s"
                                       >
                                         <div
-                                          className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                          className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         >
                                           <button
                                             className="osd-resetFocusState osdFieldButton__button"
@@ -7064,7 +7085,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                               </Component>
                             </li>
                             <li
-                              className="dscSidebar__item"
+                              className="dscSidebar__item sidebar_content"
                               data-attr-field="phpmemory"
                               key="fieldphpmemory"
                             >
@@ -7087,7 +7108,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                   anchorPosition="rightUp"
                                   button={
                                     <FieldButton
-                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                       dataTestSubj="field-phpmemory-showDetails"
                                       fieldAction={
                                         <React.Fragment>
@@ -7141,7 +7162,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       }
                                       isActive={false}
                                       onClick={[Function]}
-                                      size="m"
+                                      size="s"
                                     />
                                   }
                                   closePopover={[Function]}
@@ -7159,7 +7180,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       className="euiPopover__anchor"
                                     >
                                       <FieldButton
-                                        className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                        className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         dataTestSubj="field-phpmemory-showDetails"
                                         fieldAction={
                                           <React.Fragment>
@@ -7213,10 +7234,10 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                         }
                                         isActive={false}
                                         onClick={[Function]}
-                                        size="m"
+                                        size="s"
                                       >
                                         <div
-                                          className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                          className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         >
                                           <button
                                             className="osd-resetFocusState osdFieldButton__button"
@@ -7381,7 +7402,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                               </Component>
                             </li>
                             <li
-                              className="dscSidebar__item"
+                              className="dscSidebar__item sidebar_content"
                               data-attr-field="referer"
                               key="fieldreferer"
                             >
@@ -7404,7 +7425,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                   anchorPosition="rightUp"
                                   button={
                                     <FieldButton
-                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                       dataTestSubj="field-referer-showDetails"
                                       fieldAction={
                                         <React.Fragment>
@@ -7470,7 +7491,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       }
                                       isActive={false}
                                       onClick={[Function]}
-                                      size="m"
+                                      size="s"
                                     />
                                   }
                                   closePopover={[Function]}
@@ -7488,7 +7509,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       className="euiPopover__anchor"
                                     >
                                       <FieldButton
-                                        className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                        className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         dataTestSubj="field-referer-showDetails"
                                         fieldAction={
                                           <React.Fragment>
@@ -7554,10 +7575,10 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                         }
                                         isActive={false}
                                         onClick={[Function]}
-                                        size="m"
+                                        size="s"
                                       >
                                         <div
-                                          className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                          className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         >
                                           <button
                                             className="osd-resetFocusState osdFieldButton__button"
@@ -7769,7 +7790,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                               </Component>
                             </li>
                             <li
-                              className="dscSidebar__item"
+                              className="dscSidebar__item sidebar_content"
                               data-attr-field="request"
                               key="fieldrequest"
                             >
@@ -7792,7 +7813,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                   anchorPosition="rightUp"
                                   button={
                                     <FieldButton
-                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                       dataTestSubj="field-request-showDetails"
                                       fieldAction={
                                         <React.Fragment>
@@ -7858,7 +7879,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       }
                                       isActive={false}
                                       onClick={[Function]}
-                                      size="m"
+                                      size="s"
                                     />
                                   }
                                   closePopover={[Function]}
@@ -7876,7 +7897,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       className="euiPopover__anchor"
                                     >
                                       <FieldButton
-                                        className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                        className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         dataTestSubj="field-request-showDetails"
                                         fieldAction={
                                           <React.Fragment>
@@ -7942,10 +7963,10 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                         }
                                         isActive={false}
                                         onClick={[Function]}
-                                        size="m"
+                                        size="s"
                                       >
                                         <div
-                                          className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                          className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         >
                                           <button
                                             className="osd-resetFocusState osdFieldButton__button"
@@ -8157,7 +8178,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                               </Component>
                             </li>
                             <li
-                              className="dscSidebar__item"
+                              className="dscSidebar__item sidebar_content"
                               data-attr-field="response"
                               key="fieldresponse"
                             >
@@ -8180,7 +8201,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                   anchorPosition="rightUp"
                                   button={
                                     <FieldButton
-                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                       dataTestSubj="field-response-showDetails"
                                       fieldAction={
                                         <React.Fragment>
@@ -8246,7 +8267,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       }
                                       isActive={false}
                                       onClick={[Function]}
-                                      size="m"
+                                      size="s"
                                     />
                                   }
                                   closePopover={[Function]}
@@ -8264,7 +8285,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       className="euiPopover__anchor"
                                     >
                                       <FieldButton
-                                        className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                        className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         dataTestSubj="field-response-showDetails"
                                         fieldAction={
                                           <React.Fragment>
@@ -8330,10 +8351,10 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                         }
                                         isActive={false}
                                         onClick={[Function]}
-                                        size="m"
+                                        size="s"
                                       >
                                         <div
-                                          className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                          className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         >
                                           <button
                                             className="osd-resetFocusState osdFieldButton__button"
@@ -8545,7 +8566,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                               </Component>
                             </li>
                             <li
-                              className="dscSidebar__item"
+                              className="dscSidebar__item sidebar_content"
                               data-attr-field="tags"
                               key="fieldtags"
                             >
@@ -8568,7 +8589,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                   anchorPosition="rightUp"
                                   button={
                                     <FieldButton
-                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                       dataTestSubj="field-tags-showDetails"
                                       fieldAction={
                                         <React.Fragment>
@@ -8634,7 +8655,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       }
                                       isActive={false}
                                       onClick={[Function]}
-                                      size="m"
+                                      size="s"
                                     />
                                   }
                                   closePopover={[Function]}
@@ -8652,7 +8673,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       className="euiPopover__anchor"
                                     >
                                       <FieldButton
-                                        className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                        className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         dataTestSubj="field-tags-showDetails"
                                         fieldAction={
                                           <React.Fragment>
@@ -8718,10 +8739,10 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                         }
                                         isActive={false}
                                         onClick={[Function]}
-                                        size="m"
+                                        size="s"
                                       >
                                         <div
-                                          className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                          className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         >
                                           <button
                                             className="osd-resetFocusState osdFieldButton__button"
@@ -8933,7 +8954,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                               </Component>
                             </li>
                             <li
-                              className="dscSidebar__item"
+                              className="dscSidebar__item sidebar_content"
                               data-attr-field="timestamp"
                               key="fieldtimestamp"
                             >
@@ -8956,7 +8977,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                   anchorPosition="rightUp"
                                   button={
                                     <FieldButton
-                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                       dataTestSubj="field-timestamp-showDetails"
                                       fieldAction={
                                         <React.Fragment>
@@ -9016,7 +9037,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       }
                                       isActive={false}
                                       onClick={[Function]}
-                                      size="m"
+                                      size="s"
                                     />
                                   }
                                   closePopover={[Function]}
@@ -9034,7 +9055,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       className="euiPopover__anchor"
                                     >
                                       <FieldButton
-                                        className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                        className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         dataTestSubj="field-timestamp-showDetails"
                                         fieldAction={
                                           <React.Fragment>
@@ -9094,10 +9115,10 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                         }
                                         isActive={false}
                                         onClick={[Function]}
-                                        size="m"
+                                        size="s"
                                       >
                                         <div
-                                          className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                          className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         >
                                           <button
                                             className="osd-resetFocusState osdFieldButton__button"
@@ -9273,7 +9294,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                               </Component>
                             </li>
                             <li
-                              className="dscSidebar__item"
+                              className="dscSidebar__item sidebar_content"
                               data-attr-field="url"
                               key="fieldurl"
                             >
@@ -9296,7 +9317,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                   anchorPosition="rightUp"
                                   button={
                                     <FieldButton
-                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                       dataTestSubj="field-url-showDetails"
                                       fieldAction={
                                         <React.Fragment>
@@ -9362,7 +9383,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       }
                                       isActive={false}
                                       onClick={[Function]}
-                                      size="m"
+                                      size="s"
                                     />
                                   }
                                   closePopover={[Function]}
@@ -9380,7 +9401,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       className="euiPopover__anchor"
                                     >
                                       <FieldButton
-                                        className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                        className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         dataTestSubj="field-url-showDetails"
                                         fieldAction={
                                           <React.Fragment>
@@ -9446,10 +9467,10 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                         }
                                         isActive={false}
                                         onClick={[Function]}
-                                        size="m"
+                                        size="s"
                                       >
                                         <div
-                                          className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                          className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         >
                                           <button
                                             className="osd-resetFocusState osdFieldButton__button"
@@ -9661,7 +9682,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                               </Component>
                             </li>
                             <li
-                              className="dscSidebar__item"
+                              className="dscSidebar__item sidebar_content"
                               data-attr-field="utc_time"
                               key="fieldutc_time"
                             >
@@ -9684,7 +9705,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                   anchorPosition="rightUp"
                                   button={
                                     <FieldButton
-                                      className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                      className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                       dataTestSubj="field-utc_time-showDetails"
                                       fieldAction={
                                         <React.Fragment>
@@ -9750,7 +9771,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       }
                                       isActive={false}
                                       onClick={[Function]}
-                                      size="m"
+                                      size="s"
                                     />
                                   }
                                   closePopover={[Function]}
@@ -9768,7 +9789,7 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                       className="euiPopover__anchor"
                                     >
                                       <FieldButton
-                                        className="shard__fieldSelectorField explorer__fieldSelectorField"
+                                        className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         dataTestSubj="field-utc_time-showDetails"
                                         fieldAction={
                                           <React.Fragment>
@@ -9834,10 +9855,10 @@ exports[`Siderbar component Renders sidebar component 1`] = `
                                         }
                                         isActive={false}
                                         onClick={[Function]}
-                                        size="m"
+                                        size="s"
                                       >
                                         <div
-                                          className="osdFieldButton shard__fieldSelectorField explorer__fieldSelectorField"
+                                          className="osdFieldButton osdFieldButton--small shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
                                         >
                                           <button
                                             className="osd-resetFocusState osdFieldButton__button"
diff --git a/public/components/event_analytics/explorer/sidebar/field.tsx b/public/components/event_analytics/explorer/sidebar/field.tsx
index 2b18be672b..521976d8cb 100644
--- a/public/components/event_analytics/explorer/sidebar/field.tsx
+++ b/public/components/event_analytics/explorer/sidebar/field.tsx
@@ -83,7 +83,7 @@ export const Field = (props: IFieldProps) => {
                   Default Pattern
                 </EuiMark>
               ) : isOverridingPattern ? (
-                <EuiLoadingSpinner className="override_pattern_loading" size="m" />
+                <EuiLoadingSpinner className="override_pattern_loading" size="s" />
               ) : (
                 <EuiButtonIcon
                   aria-labelledby="override_pattern"
@@ -108,7 +108,7 @@ export const Field = (props: IFieldProps) => {
                   Default Timestamp
                 </EuiMark>
               ) : isOverridingTimestamp ? (
-                <EuiLoadingSpinner className="override_timestamp_loading" size="m" />
+                <EuiLoadingSpinner className="override_timestamp_loading" size="s" />
               ) : (
                 <EuiButtonIcon
                   aria-labelledby="override_timestamp"
@@ -179,8 +179,8 @@ export const Field = (props: IFieldProps) => {
       panelClassName="dscSidebarItem__fieldPopoverPanel"
       button={
         <FieldButton
-          size="m"
-          className="shard__fieldSelectorField explorer__fieldSelectorField"
+          size="s"
+          className="shard__fieldSelectorField explorer__fieldSelectorField vbFieldButton"
           isActive={isFieldDetailsOpen}
           dataTestSubj={`field-${field.name}-showDetails`}
           fieldIcon={<FieldIcon type={isEqual(field.type, 'timestamp') ? 'date' : field.type} />}
diff --git a/public/components/event_analytics/explorer/sidebar/sidebar.scss b/public/components/event_analytics/explorer/sidebar/sidebar.scss
index cc9557c25f..00cf3718a8 100644
--- a/public/components/event_analytics/explorer/sidebar/sidebar.scss
+++ b/public/components/event_analytics/explorer/sidebar/sidebar.scss
@@ -124,3 +124,7 @@
 .ws__configPanel--right{
   overflow-y: unset;
 }
+
+.sidebar_content{
+  white-space: nowrap;
+}
\ No newline at end of file
diff --git a/public/components/event_analytics/explorer/sidebar/sidebar.tsx b/public/components/event_analytics/explorer/sidebar/sidebar.tsx
index f949047f56..00b0449155 100644
--- a/public/components/event_analytics/explorer/sidebar/sidebar.tsx
+++ b/public/components/event_analytics/explorer/sidebar/sidebar.tsx
@@ -6,7 +6,7 @@
 import React, { useState, useCallback, useContext } from 'react';
 import { batch, useDispatch } from 'react-redux';
 import { isEmpty } from 'lodash';
-import { EuiTitle, EuiSpacer, EuiFieldSearch, EuiAccordion } from '@elastic/eui';
+import { EuiTitle, EuiSpacer, EuiFieldSearch, EuiAccordion, EuiHorizontalRule } from '@elastic/eui';
 import { I18nProvider } from '@osd/i18n/react';
 import { Field } from './field';
 import { ExplorerFields, IExplorerFields, IField } from '../../../../../common/types/explorer';
@@ -134,12 +134,13 @@ export const Sidebar = (props: ISidebarProps) => {
                   initialIsOpen
                   id="fieldSelector__queriedFields"
                   buttonContent={
-                    <EuiTitle size="xxxs">
+                    <EuiTitle size="xxs">
                       <span>Query fields</span>
                     </EuiTitle>
                   }
                   paddingSize="xs"
                 >
+                <EuiHorizontalRule margin ='xs' />
                   <ul
                     className="dscSidebarList dscFieldList--selected"
                     aria-labelledby="queried_fields"
@@ -151,7 +152,7 @@ export const Sidebar = (props: ISidebarProps) => {
                           <li
                             key={`field${field.name}`}
                             data-attr-field={field.name}
-                            className="dscSidebar__item"
+                            className="dscSidebar__item sidebar_content"
                           >
                             <Field
                               query={query}
@@ -178,12 +179,13 @@ export const Sidebar = (props: ISidebarProps) => {
                 initialIsOpen
                 id="fieldSelector__selectedFields"
                 buttonContent={
-                  <EuiTitle size="xxxs">
+                  <EuiTitle size="xxs">
                     <span>Selected Fields</span>
                   </EuiTitle>
                 }
                 paddingSize="xs"
               >
+                <EuiHorizontalRule margin ='xs' />
                 <ul
                   className="dscSidebarList dscFieldList--selected"
                   aria-labelledby="selected_fields"
@@ -197,7 +199,7 @@ export const Sidebar = (props: ISidebarProps) => {
                         <li
                           key={`field${field.name}`}
                           data-attr-field={field.name}
-                          className="dscSidebar__item"
+                            className="dscSidebar__item sidebar_content"
                         >
                           <Field
                             query={query}
@@ -223,12 +225,13 @@ export const Sidebar = (props: ISidebarProps) => {
                 initialIsOpen
                 id="fieldSelector__availableFields"
                 buttonContent={
-                  <EuiTitle size="xxxs">
+                  <EuiTitle size="xxs">
                     <span>Available Fields</span>
                   </EuiTitle>
                 }
                 paddingSize="xs"
               >
+                <EuiHorizontalRule margin ='xs' />
                 <ul
                   className={`dscFieldList dscFieldList--unpopular ${
                     !showFields ? 'hidden-sm hidden-xs' : ''
@@ -244,7 +247,7 @@ export const Sidebar = (props: ISidebarProps) => {
                           <li
                             key={`field${field.name}`}
                             data-attr-field={field.name}
-                            className="dscSidebar__item"
+                            className="dscSidebar__item sidebar_content"
                           >
                             <Field
                               query={query}