Improve Calendar styles

* Create new stacking context for the month view to ensure selection stays visible
* Always keep border around day cell to prevent flicker on hover

Author: connor-baer

packages/circuit-ui/components/Calendar/Calendar.module.css

@@ -19,6 +19,7 @@
 
 .months {
   display: flex;
+  isolation: isolate;
 }
 
 .month:not(:last-child) {
@@ -97,7 +98,7 @@
   touch-action: manipulation;
   cursor: pointer;
   background: none;
-  border: 0;
+  border: 1px solid transparent;
   border-radius: var(--cui-border-radius-circle);
 }
 
@@ -114,17 +115,17 @@
 }
 
 .day[aria-current="date"] {
-  border: 1px solid var(--cui-border-normal);
+  border-color: var(--cui-border-normal);
 }
 
 .day:hover {
   background: var(--cui-bg-normal-hovered);
-  border: 1px solid var(--cui-border-strong-hovered);
+  border-color: var(--cui-border-strong-hovered);
 }
 
 .day:active {
   background: var(--cui-bg-normal-pressed);
-  border: 1px solid var(--cui-border-strong-pressed);
+  border-color: var(--cui-border-strong-pressed);
 }
 
 /* Selected */
@@ -203,7 +204,7 @@ td:not(:last-of-type) .range-end.last-day::before {
 }
 
 .day[aria-current="date"][aria-disabled="true"] {
-  border: 1px solid var(--cui-border-normal-disabled);
+  border-color: var(--cui-border-normal-disabled);
 }
 
 .day[aria-disabled="true"].selected,