TimePicker: Fixes relative timerange of less than a day not displaying

packages/grafana-ui/src/components/DateTimePickers/TimeRangePicker/CalendarBody.tsx

@@ -65,6 +65,9 @@ function dateInfo(date: Date): number[] {
 }
 
 export const getBodyStyles = (theme: GrafanaTheme2) => {
+  // If a time range is part of only 1 day but does not encompass the whole day,
+  // the class that react-calendar uses is '--hasActive' by itself (without being part of a '--range')
+  const hasActiveSelector = `.react-calendar__tile--hasActive:not(.react-calendar__tile--range)`;
   return {
     title: css`
       color: ${theme.colors.text.primary};
@@ -126,6 +129,7 @@ export const getBodyStyles = (theme: GrafanaTheme2) => {
         outline: 0;
       }
 
+      ${hasActiveSelector},
       .react-calendar__tile--active,
       .react-calendar__tile--active:hover {
         color: ${theme.colors.primary.contrastText};
@@ -152,11 +156,13 @@ export const getBodyStyles = (theme: GrafanaTheme2) => {
         }
       }
 
+      ${hasActiveSelector},
       .react-calendar__tile--rangeStart {
         border-top-left-radius: 20px;
         border-bottom-left-radius: 20px;
       }
 
+      ${hasActiveSelector},
       .react-calendar__tile--rangeEnd {
         border-top-right-radius: 20px;
         border-bottom-right-radius: 20px;