[EuiSuperDatePicker] Fix absolute tab for small mobile screens (#7708)

elastic · Apr 24, 2024 · 13821d9 · 13821d9
1 parent e33f59f
commit 13821d9
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 7 deletions.
diff --git a/changelogs/upcoming/7708.md 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
@@ -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;
-  }
-}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		Bug fixes

		- Fixed a visual bug with `EuiSuperDatePicker`'s absolute tab on small mobile screens