diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index 4eef57000..c76fb4687 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -312,6 +312,11 @@
   box-shadow: 0 0 0 0.2rem #ffe8b3;
 }
 
+@media screen and (max-width: 769px) {
+  .p-datepicker table th, .p-datepicker table td {
+    padding: 0;
+  }
+}
 .p-checkbox {
   width: 1.5rem;
   height: 1.5rem;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 13c3ca36a..07d3d73fb 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -312,6 +312,11 @@
   box-shadow: 0 0 0 0.2rem #88e9aa;
 }
 
+@media screen and (max-width: 769px) {
+  .p-datepicker table th, .p-datepicker table td {
+    padding: 0;
+  }
+}
 .p-checkbox {
   width: 1.5rem;
   height: 1.5rem;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index b2ab9be78..ebc034c24 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -312,6 +312,11 @@
   box-shadow: 0 0 0 0.2rem #f1b6c8;
 }
 
+@media screen and (max-width: 769px) {
+  .p-datepicker table th, .p-datepicker table td {
+    padding: 0;
+  }
+}
 .p-checkbox {
   width: 1.5rem;
   height: 1.5rem;
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index ede26b088..ecebfdc81 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -312,6 +312,11 @@
   box-shadow: 0 0 0 0.2rem #8dcdff;
 }
 
+@media screen and (max-width: 769px) {
+  .p-datepicker table th, .p-datepicker table td {
+    padding: 0.25rem;
+  }
+}
 .p-checkbox {
   width: 1.5rem;
   height: 1.5rem;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 16119aeee..bcf0a6dbc 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -312,6 +312,11 @@
   box-shadow: 0 0 0 0.2rem #8dcdff;
 }
 
+@media screen and (max-width: 769px) {
+  .p-datepicker table th, .p-datepicker table td {
+    padding: 0.25rem;
+  }
+}
 .p-checkbox {
   width: 1.5rem;
   height: 1.5rem;
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 8d125bfec..45bdaff48 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -312,6 +312,11 @@
   box-shadow: 0 0 0 0.2rem #c2e9d8;
 }
 
+@media screen and (max-width: 769px) {
+  .p-datepicker table th, .p-datepicker table td {
+    padding: 0.25rem;
+  }
+}
 .p-checkbox {
   width: 1.5rem;
   height: 1.5rem;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index c8574c185..78b5b0fce 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -312,6 +312,11 @@
   box-shadow: 0 0 0 0.2rem #8dcdff;
 }
 
+@media screen and (max-width: 769px) {
+  .p-datepicker table th, .p-datepicker table td {
+    padding: 0.25rem;
+  }
+}
 .p-checkbox {
   width: 1.5rem;
   height: 1.5rem;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index bbdccba64..5650a36c4 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -312,6 +312,11 @@
   box-shadow: 0 0 0 0.2rem #e4e9ec;
 }
 
+@media screen and (max-width: 769px) {
+  .p-datepicker table th, .p-datepicker table td {
+    padding: 0.25rem;
+  }
+}
 .p-checkbox {
   width: 1.5rem;
   height: 1.5rem;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index f46a8e49a..5bc95e12d 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -312,6 +312,11 @@
   box-shadow: 0 0 0 0.2rem #BBDEFB;
 }
 
+@media screen and (max-width: 769px) {
+  .p-datepicker table th, .p-datepicker table td {
+    padding: 0;
+  }
+}
 .p-checkbox {
   width: 1.5rem;
   height: 1.5rem;
@@ -1645,7 +1650,7 @@
   color: #ffffff;
 }
 
-@media screen and (max-width: 960px) {
+@media screen and (max-width: 769px) {
   .p-orderlist {
     flex-direction: column;
   }
@@ -1806,7 +1811,7 @@
   color: #ffffff;
 }
 
-@media screen and (max-width: 960px) {
+@media screen and (max-width: 769px) {
   .p-picklist {
     flex-direction: column;
   }
diff --git a/public/themes/saga-cyan/theme.css b/public/themes/saga-cyan/theme.css
index e8ccd7e1b..7701f9a33 100644
--- a/public/themes/saga-cyan/theme.css
+++ b/public/themes/saga-cyan/theme.css
@@ -312,6 +312,11 @@
   box-shadow: 0 0 0 0.2rem #B2EBF2;
 }
 
+@media screen and (max-width: 769px) {
+  .p-datepicker table th, .p-datepicker table td {
+    padding: 0;
+  }
+}
 .p-checkbox {
   width: 1.5rem;
   height: 1.5rem;
@@ -1645,7 +1650,7 @@
   color: #ffffff;
 }
 
-@media screen and (max-width: 960px) {
+@media screen and (max-width: 769px) {
   .p-orderlist {
     flex-direction: column;
   }
@@ -1806,7 +1811,7 @@
   color: #ffffff;
 }
 
-@media screen and (max-width: 960px) {
+@media screen and (max-width: 769px) {
   .p-picklist {
     flex-direction: column;
   }
diff --git a/public/themes/saga-deeppurple/theme.css b/public/themes/saga-deeppurple/theme.css
index dc2843252..097e2e5d8 100644
--- a/public/themes/saga-deeppurple/theme.css
+++ b/public/themes/saga-deeppurple/theme.css
@@ -312,6 +312,11 @@
   box-shadow: 0 0 0 0.2rem #D1C4E9;
 }
 
+@media screen and (max-width: 769px) {
+  .p-datepicker table th, .p-datepicker table td {
+    padding: 0;
+  }
+}
 .p-checkbox {
   width: 1.5rem;
   height: 1.5rem;
@@ -1645,7 +1650,7 @@
   color: #ffffff;
 }
 
-@media screen and (max-width: 960px) {
+@media screen and (max-width: 769px) {
   .p-orderlist {
     flex-direction: column;
   }
@@ -1806,7 +1811,7 @@
   color: #ffffff;
 }
 
-@media screen and (max-width: 960px) {
+@media screen and (max-width: 769px) {
   .p-picklist {
     flex-direction: column;
   }
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index ccefcb3a4..6926598d3 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -312,6 +312,11 @@
   box-shadow: 0 0 0 0.2rem #C8E6C9;
 }
 
+@media screen and (max-width: 769px) {
+  .p-datepicker table th, .p-datepicker table td {
+    padding: 0;
+  }
+}
 .p-checkbox {
   width: 1.5rem;
   height: 1.5rem;
@@ -1645,7 +1650,7 @@
   color: #ffffff;
 }
 
-@media screen and (max-width: 960px) {
+@media screen and (max-width: 769px) {
   .p-orderlist {
     flex-direction: column;
   }
@@ -1806,7 +1811,7 @@
   color: #ffffff;
 }
 
-@media screen and (max-width: 960px) {
+@media screen and (max-width: 769px) {
   .p-picklist {
     flex-direction: column;
   }
diff --git a/public/themes/saga-indigo/theme.css b/public/themes/saga-indigo/theme.css
index 62dece955..3f4b026c4 100644
--- a/public/themes/saga-indigo/theme.css
+++ b/public/themes/saga-indigo/theme.css
@@ -312,6 +312,11 @@
   box-shadow: 0 0 0 0.2rem #C5CAE9;
 }
 
+@media screen and (max-width: 769px) {
+  .p-datepicker table th, .p-datepicker table td {
+    padding: 0;
+  }
+}
 .p-checkbox {
   width: 1.5rem;
   height: 1.5rem;
@@ -1645,7 +1650,7 @@
   color: #ffffff;
 }
 
-@media screen and (max-width: 960px) {
+@media screen and (max-width: 769px) {
   .p-orderlist {
     flex-direction: column;
   }
@@ -1806,7 +1811,7 @@
   color: #ffffff;
 }
 
-@media screen and (max-width: 960px) {
+@media screen and (max-width: 769px) {
   .p-picklist {
     flex-direction: column;
   }
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 642c457dc..80ea04a98 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -312,6 +312,11 @@
   box-shadow: 0 0 0 0.2rem #FFECB3;
 }
 
+@media screen and (max-width: 769px) {
+  .p-datepicker table th, .p-datepicker table td {
+    padding: 0;
+  }
+}
 .p-checkbox {
   width: 1.5rem;
   height: 1.5rem;
@@ -1645,7 +1650,7 @@
   color: #212529;
 }
 
-@media screen and (max-width: 960px) {
+@media screen and (max-width: 769px) {
   .p-orderlist {
     flex-direction: column;
   }
@@ -1806,7 +1811,7 @@
   color: #212529;
 }
 
-@media screen and (max-width: 960px) {
+@media screen and (max-width: 769px) {
   .p-picklist {
     flex-direction: column;
   }
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index 77552d8a8..e7d8802d9 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -312,6 +312,11 @@
   box-shadow: 0 0 0 0.2rem #E1BEE7;
 }
 
+@media screen and (max-width: 769px) {
+  .p-datepicker table th, .p-datepicker table td {
+    padding: 0;
+  }
+}
 .p-checkbox {
   width: 1.5rem;
   height: 1.5rem;
@@ -1645,7 +1650,7 @@
   color: #ffffff;
 }
 
-@media screen and (max-width: 960px) {
+@media screen and (max-width: 769px) {
   .p-orderlist {
     flex-direction: column;
   }
@@ -1806,7 +1811,7 @@
   color: #ffffff;
 }
 
-@media screen and (max-width: 960px) {
+@media screen and (max-width: 769px) {
   .p-picklist {
     flex-direction: column;
   }
diff --git a/public/themes/saga-teal/theme.css b/public/themes/saga-teal/theme.css
index 91ff66f1f..c4e9a744f 100644
--- a/public/themes/saga-teal/theme.css
+++ b/public/themes/saga-teal/theme.css
@@ -312,6 +312,11 @@
   box-shadow: 0 0 0 0.2rem #B2DFDB;
 }
 
+@media screen and (max-width: 769px) {
+  .p-datepicker table th, .p-datepicker table td {
+    padding: 0;
+  }
+}
 .p-checkbox {
   width: 1.5rem;
   height: 1.5rem;
@@ -1645,7 +1650,7 @@
   color: #ffffff;
 }
 
-@media screen and (max-width: 960px) {
+@media screen and (max-width: 769px) {
   .p-orderlist {
     flex-direction: column;
   }
@@ -1806,7 +1811,7 @@
   color: #ffffff;
 }
 
-@media screen and (max-width: 960px) {
+@media screen and (max-width: 769px) {
   .p-picklist {
     flex-direction: column;
   }
diff --git a/src/components/calendar/Calendar.vue b/src/components/calendar/Calendar.vue
index 7770f63d6..43d400cae 100755
--- a/src/components/calendar/Calendar.vue
+++ b/src/components/calendar/Calendar.vue
@@ -3,7 +3,7 @@
         <CalendarInputText ref="input" v-if="!inline" type="text" v-bind="$attrs" v-on="listeners" :value="inputFieldValue" :readonly="!manualInput" :aria-labelledby="ariaLabelledBy" inputmode="none" />
         <CalendarButton v-if="showIcon" :icon="icon" tabindex="-1" class="p-datepicker-trigger" :disabled="$attrs.disabled" @click="onButtonClick" type="button" :aria-label="inputFieldValue"/>
         <transition name="p-input-overlay" @enter="onOverlayEnter" @after-enter="onOverlayEnterComplete" @leave="onOverlayLeave">
-            <div ref="overlay" :class="panelStyleClass" v-if="inline ? true : overlayVisible" :role="inline ? null : dialog" :aria-labelledby="ariaLabelledBy">
+            <div ref="overlay" :class="panelStyleClass" v-if="inline ? true : overlayVisible" :role="inline ? null : 'dialog'" :aria-labelledby="ariaLabelledBy">
                 <template v-if="!timeOnly">
                     <div class="p-datepicker-group" v-for="(month,groupIndex) of months" :key="month.month + month.year">
                         <div class="p-datepicker-header">