From 13821d94d98d572afd8e7f26bec3d2e9859bf415 Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Wed, 24 Apr 2024 09:10:21 -0700
Subject: [PATCH] [EuiSuperDatePicker] Fix absolute tab for small mobile
 screens (#7708)

---
 changelogs/upcoming/7708.md                           |  3 +++
 .../date_popover/_date_popover_content.scss           | 11 ++++-------
 2 files changed, 7 insertions(+), 7 deletions(-)
 create mode 100644 changelogs/upcoming/7708.md

diff --git a/changelogs/upcoming/7708.md b/changelogs/upcoming/7708.md
new file mode 100644
index 00000000000..9d8803b71b4
--- /dev/null
+++ b/changelogs/upcoming/7708.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed a visual bug with `EuiSuperDatePicker`'s absolute tab on small mobile screens
diff --git a/src/components/date_picker/super_date_picker/date_popover/_date_popover_content.scss b/src/components/date_picker/super_date_picker/date_popover/_date_popover_content.scss
index 34bb31560fb..0182e258066 100644
--- a/src/components/date_picker/super_date_picker/date_popover/_date_popover_content.scss
+++ b/src/components/date_picker/super_date_picker/date_popover/_date_popover_content.scss
@@ -2,6 +2,10 @@
 .euiDatePopoverContent .react-datepicker {
   width: $euiFormMaxWidth;
   max-width: 100%;
+
+  @include euiBreakpoint('xs') {
+    width: $euiDatePickerCalendarWidth;
+  }
 }
 
 .euiDatePopoverContent__padded {
@@ -11,10 +15,3 @@
 .euiDatePopoverContent__padded--large {
   padding: $euiSize;
 }
-
-@include euiBreakpoint('xs') {
-  .euiDatePopoverContent {
-    // Small screens drop the time selector
-    width: $euiDatePickerCalendarWidth;
-  }
-}