Fix calendar CSS for Firefox.

components/common/Calendar.js

@@ -70,6 +70,7 @@ export default function Calendar({ date, minDate, maxDate, onChange }) {
           <Icon className={styles.icon} icon={selectYear ? <Cross /> : <Chevron />} size="small" />
         </div>
       </div>
+      <div className={styles.body}>
         {!selectMonth && !selectYear && (
           <DaySelector
             date={date}
@@ -99,6 +100,7 @@ export default function Calendar({ date, minDate, maxDate, onChange }) {
           />
         )}
       </div>
+    </div>
   );
 }
 
@@ -220,14 +222,16 @@ const YearSelector = ({ date, minDate, maxDate, onSelect }) => {
 
   return (
     <div className={styles.pager}>
+      <div className={styles.left}>
         <Button
           icon={<Chevron />}
           size="small"
-        className={styles.left}
           onClick={handlePrevClick}
           disabled={years[0] <= minYear}
           variant="light"
         />
+      </div>
+      <div className={styles.middle}>
         <table>
           <tbody>
             {chunk(years, 5).map((row, i) => (
@@ -248,14 +252,16 @@ const YearSelector = ({ date, minDate, maxDate, onSelect }) => {
             ))}
           </tbody>
         </table>
+      </div>
+      <div className={styles.right}>
         <Button
           icon={<Chevron />}
           size="small"
-        className={styles.right}
           onClick={handleNextClick}
           disabled={years[years.length - 1] > maxYear}
           variant="light"
         />
       </div>
+    </div>
   );
 };

components/common/Calendar.module.css

@@ -3,11 +3,11 @@
   flex-direction: column;
   font-size: var(--font-size-small);
   flex: 1;
-  min-height: 285px;
+  min-height: 306px;
 }
 
 .calendar table {
-  flex: 1;
+  width: 100%;
   border-spacing: 5px;
 }
 
@@ -64,18 +64,34 @@
   font-size: var(--font-size-normal);
 }
 
+.body {
+  display: flex;
+}
+
 .selector {
   cursor: pointer;
 }
 
 .pager {
   display: flex;
+  flex: 1;
 }
 
 .pager button {
   align-self: center;
 }
 
+.middle {
+  flex: 1;
+}
+
+.left,
+.right {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
 .left svg {
   transform: rotate(90deg);
 }