diff --git a/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.scss b/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.scss
index 4856e6b4274d9..2d13d320ae78b 100644
--- a/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.scss
+++ b/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.scss
@@ -1,3 +1,23 @@
-.backgroundSessionIndicator__secondaryActionContainer {
-  border-left: $euiBorderThin;
+.backgroundSessionIndicator {
+  padding: 0 $euiSizeXS;
+}
+
+@include euiBreakpoint('xs', 's') {
+  .backgroundSessionIndicator__popoverContainer.euiFlexGroup--responsive .euiFlexItem {
+    margin-bottom: $euiSizeXS !important;
+  }
+}
+
+.backgroundSessionIndicator__verticalDivider {
+  @include euiBreakpoint('xs', 's') {
+    margin-left: $euiSizeXS;
+    padding-left: $euiSizeXS;
+  }
+
+  @include euiBreakpoint('m', 'l', 'xl') {
+    border-left: $euiBorderThin;
+    align-self: stretch;
+    margin-left: $euiSizeS;
+    padding-left: $euiSizeS;
+  }
 }
diff --git a/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.tsx b/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.tsx
index 56b3b7d710ff9..b55bd6b655371 100644
--- a/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.tsx
+++ b/x-pack/plugins/data_enhanced/public/search/ui/background_session_indicator/background_session_indicator.tsx
@@ -219,6 +219,10 @@ const backgroundSessionIndicatorViewStateToProps: {
   },
 };
 
+const VerticalDivider: React.FC = () => (
+  <div className="backgroundSessionIndicator__verticalDivider" />
+);
+
 export const BackgroundSessionIndicator: React.FC<BackgroundSessionIndicatorProps> = (props) => {
   const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
   const onButtonClick = () => setIsPopoverOpen((isOpen) => !isOpen);
@@ -233,6 +237,7 @@ export const BackgroundSessionIndicator: React.FC<BackgroundSessionIndicatorProp
       closePopover={closePopover}
       anchorPosition={'rightCenter'}
       panelPaddingSize={'s'}
+      className="backgroundSessionIndicator"
       data-test-subj={'backgroundSessionIndicator'}
       button={
         <EuiToolTip content={button.tooltipText}>
@@ -245,33 +250,32 @@ export const BackgroundSessionIndicator: React.FC<BackgroundSessionIndicatorProp
         </EuiToolTip>
       }
     >
-      <EuiFlexGroup responsive={false} alignItems={'center'} gutterSize={'s'}>
+      <EuiFlexGroup
+        responsive={true}
+        alignItems={'center'}
+        gutterSize={'s'}
+        className="backgroundSessionIndicator__popoverContainer"
+      >
         <EuiFlexItem grow={true}>
-          <EuiFlexGroup responsive={false} alignItems={'center'} gutterSize={'xs'}>
-            <EuiFlexItem grow={true}>
-              <EuiText size="s" color={'subdued'}>
-                <p>{popover.text}</p>
-              </EuiText>
-            </EuiFlexItem>
+          <EuiText size="s" color={'subdued'}>
+            <p>{popover.text}</p>
+          </EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiFlexGroup wrap={true} responsive={false} alignItems={'center'} gutterSize={'s'}>
             {popover.primaryAction && (
               <EuiFlexItem grow={false}>
-                <popover.primaryAction {...props} buttonProps={{ size: 'xs' }} />
+                <popover.primaryAction {...props} buttonProps={{ size: 'xs', flush: 'both' }} />
+              </EuiFlexItem>
+            )}
+            {popover.primaryAction && popover.secondaryAction && <VerticalDivider />}
+            {popover.secondaryAction && (
+              <EuiFlexItem grow={false}>
+                <popover.secondaryAction {...props} buttonProps={{ size: 'xs', flush: 'both' }} />
               </EuiFlexItem>
             )}
           </EuiFlexGroup>
         </EuiFlexItem>
-        {popover.secondaryAction && (
-          <EuiFlexItem
-            grow={false}
-            className={'backgroundSessionIndicator__secondaryActionContainer'}
-          >
-            <popover.secondaryAction
-              {...props}
-              // marginLeft: 10 to make borderLeft look like a separator
-              buttonProps={{ size: 'xs', style: { marginLeft: 10 } }}
-            />
-          </EuiFlexItem>
-        )}
       </EuiFlexGroup>
     </EuiPopover>
   );