From 9bef643b0d2ca84967084a761900da35c2e339de Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Wed, 15 Nov 2023 13:25:37 +0300
Subject: [PATCH] Fixed #4822 - Calendar responsiveness updates

---
 components/lib/calendar/BaseCalendar.vue        |  4 ++++
 components/lib/calendar/Calendar.vue            | 10 +++++++++-
 components/lib/calendar/style/CalendarStyle.js  |  1 +
 public/themes/arya-blue/theme.css               |  8 +++-----
 public/themes/arya-green/theme.css              |  8 +++-----
 public/themes/arya-orange/theme.css             |  8 +++-----
 public/themes/arya-purple/theme.css             |  8 +++-----
 public/themes/bootstrap4-dark-blue/theme.css    |  8 +++-----
 public/themes/bootstrap4-dark-purple/theme.css  |  8 +++-----
 public/themes/bootstrap4-light-blue/theme.css   |  8 +++-----
 public/themes/bootstrap4-light-purple/theme.css |  8 +++-----
 public/themes/fluent-light/theme.css            |  8 +++-----
 public/themes/lara-dark-amber/theme.css         |  8 +++-----
 public/themes/lara-dark-blue/theme.css          |  8 +++-----
 public/themes/lara-dark-cyan/theme.css          |  8 +++-----
 public/themes/lara-dark-indigo/theme.css        |  8 +++-----
 public/themes/lara-dark-pink/theme.css          |  8 +++-----
 public/themes/lara-dark-purple/theme.css        |  8 +++-----
 public/themes/lara-dark-teal/theme.css          |  8 +++-----
 public/themes/lara-dark-turquoise/theme.css     |  8 +++-----
 public/themes/lara-light-amber/theme.css        |  8 +++-----
 public/themes/lara-light-blue/theme.css         |  8 +++-----
 public/themes/lara-light-cyan/theme.css         |  8 +++-----
 public/themes/lara-light-indigo/theme.css       |  8 +++-----
 public/themes/lara-light-pink/theme.css         |  8 +++-----
 public/themes/lara-light-purple/theme.css       |  8 +++-----
 public/themes/lara-light-teal/theme.css         |  8 +++-----
 public/themes/lara-light-turquoise/theme.css    |  8 +++-----
 public/themes/luna-amber/theme.css              |  8 +++-----
 public/themes/luna-blue/theme.css               |  8 +++-----
 public/themes/luna-green/theme.css              |  8 +++-----
 public/themes/luna-pink/theme.css               |  8 +++-----
 public/themes/md-dark-deeppurple/theme.css      |  8 +++-----
 public/themes/md-dark-indigo/theme.css          |  8 +++-----
 public/themes/md-light-deeppurple/theme.css     |  8 +++-----
 public/themes/md-light-indigo/theme.css         |  8 +++-----
 public/themes/mdc-dark-deeppurple/theme.css     |  8 +++-----
 public/themes/mdc-dark-indigo/theme.css         |  8 +++-----
 public/themes/mdc-light-deeppurple/theme.css    |  8 +++-----
 public/themes/mdc-light-indigo/theme.css        |  8 +++-----
 public/themes/mira/theme.css                    |  8 +++-----
 public/themes/nano/theme.css                    |  8 +++-----
 public/themes/nova-accent/theme.css             |  8 +++-----
 public/themes/nova-alt/theme.css                |  8 +++-----
 public/themes/nova-vue/theme.css                |  8 +++-----
 public/themes/nova/theme.css                    |  8 +++-----
 public/themes/rhea/theme.css                    |  8 +++-----
 public/themes/saga-blue/theme.css               |  8 +++-----
 public/themes/saga-green/theme.css              |  8 +++-----
 public/themes/saga-orange/theme.css             |  8 +++-----
 public/themes/saga-purple/theme.css             |  8 +++-----
 public/themes/soho-dark/theme.css               |  8 +++-----
 public/themes/soho-light/theme.css              |  8 +++-----
 public/themes/tailwind-light/theme.css          |  8 +++-----
 public/themes/vela-blue/theme.css               |  8 +++-----
 public/themes/vela-green/theme.css              |  8 +++-----
 public/themes/vela-orange/theme.css             |  8 +++-----
 public/themes/vela-purple/theme.css             |  8 +++-----
 public/themes/viva-dark/theme.css               |  8 +++-----
 public/themes/viva-light/theme.css              |  8 +++-----
 60 files changed, 185 insertions(+), 286 deletions(-)

diff --git a/components/lib/calendar/BaseCalendar.vue b/components/lib/calendar/BaseCalendar.vue
index 7e266da4e..198c7a3f7 100644
--- a/components/lib/calendar/BaseCalendar.vue
+++ b/components/lib/calendar/BaseCalendar.vue
@@ -56,6 +56,10 @@ export default {
             default: 1
         },
         responsiveOptions: Array,
+        breakpoint: {
+            type: String,
+            default: '769px'
+        },
         view: {
             type: String,
             default: 'date'
diff --git a/components/lib/calendar/Calendar.vue b/components/lib/calendar/Calendar.vue
index a09039c0d..52d89acbe 100755
--- a/components/lib/calendar/Calendar.vue
+++ b/components/lib/calendar/Calendar.vue
@@ -538,7 +538,8 @@ export default {
             pm: null,
             focused: false,
             overlayVisible: false,
-            currentView: this.view
+            currentView: this.view,
+            queryMatches: false
         };
     },
     watch: {
@@ -588,6 +589,13 @@ export default {
     },
     mounted() {
         this.createResponsiveStyle();
+        const query = matchMedia(`(max-width: ${this.breakpoint})`);
+
+        this.queryMatches = query.matches;
+
+        query.addEventListener('change', () => {
+            this.queryMatches = query.matches;
+        });
 
         if (this.inline) {
             this.overlay && this.overlay.setAttribute(this.attributeSelector, '');
diff --git a/components/lib/calendar/style/CalendarStyle.js b/components/lib/calendar/style/CalendarStyle.js
index b35ad376e..472fb07e3 100644
--- a/components/lib/calendar/style/CalendarStyle.js
+++ b/components/lib/calendar/style/CalendarStyle.js
@@ -171,6 +171,7 @@ const classes = {
     panel: ({ instance, props, state }) => [
         'p-datepicker p-component',
         {
+            'p-datepicker-mobile': instance.queryMatches,
             'p-datepicker-inline': props.inline,
             'p-disabled': props.disabled,
             'p-datepicker-timeonly': props.timeOnly,
diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index 22212a7e4..eae4544fb 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -627,6 +627,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.03);
   }
@@ -652,11 +655,6 @@
     box-shadow: 0 0 0 1px #93cbf9;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #121212;
     border: 1px solid #383838;
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index 230a936cd..9acaa49f5 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -627,6 +627,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.03);
   }
@@ -652,11 +655,6 @@
     box-shadow: 0 0 0 1px #a7d8a9;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #121212;
     border: 1px solid #383838;
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index 79163893a..2c2de41d2 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -627,6 +627,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.03);
   }
@@ -652,11 +655,6 @@
     box-shadow: 0 0 0 1px #ffe284;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #121212;
     border: 1px solid #383838;
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index 35353de40..3393f0ca4 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -627,6 +627,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.03);
   }
@@ -652,11 +655,6 @@
     box-shadow: 0 0 0 1px #cf95d9;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #121212;
     border: 1px solid #383838;
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index 6b8251bd1..12d8c11a9 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -627,6 +627,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.04);
   }
@@ -652,11 +655,6 @@
     box-shadow: 0 0 0 1px #e3f3fe;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #20262e;
     border: 1px solid #3f4b5b;
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index 17143a42f..54dbf0756 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -627,6 +627,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.04);
   }
@@ -652,11 +655,6 @@
     box-shadow: 0 0 0 1px #f0e6f5;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #20262e;
     border: 1px solid #3f4b5b;
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index c44da0b81..ec187d65c 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -627,6 +627,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #e9ecef;
   }
@@ -652,11 +655,6 @@
     box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #ffffff;
     border: 1px solid #ced4da;
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index 8542a9e6b..7a15612c5 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -627,6 +627,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #e9ecef;
   }
@@ -652,11 +655,6 @@
     box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #ffffff;
     border: 1px solid #ced4da;
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index 916b6c33f..21db19abb 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -627,6 +627,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #f3f2f1;
   }
@@ -652,11 +655,6 @@
     box-shadow: inset 0 0 0 1px #605e5c;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #ffffff;
     border: 1px solid #605e5c;
diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css
index caf0f6d92..a98d240c8 100644
--- a/public/themes/lara-dark-amber/theme.css
+++ b/public/themes/lara-dark-amber/theme.css
@@ -646,6 +646,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.03);
   }
@@ -671,11 +674,6 @@
     box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #111827;
     border: 1px solid #424b57;
diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css
index 2d4f28697..cd1d1ae64 100644
--- a/public/themes/lara-dark-blue/theme.css
+++ b/public/themes/lara-dark-blue/theme.css
@@ -646,6 +646,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.03);
   }
@@ -671,11 +674,6 @@
     box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #111827;
     border: 1px solid #424b57;
diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css
index 773c101e2..c4a7a1d4d 100644
--- a/public/themes/lara-dark-cyan/theme.css
+++ b/public/themes/lara-dark-cyan/theme.css
@@ -646,6 +646,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.03);
   }
@@ -671,11 +674,6 @@
     box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #111827;
     border: 1px solid #424b57;
diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css
index c562b4823..007afdefa 100644
--- a/public/themes/lara-dark-indigo/theme.css
+++ b/public/themes/lara-dark-indigo/theme.css
@@ -646,6 +646,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.03);
   }
@@ -671,11 +674,6 @@
     box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #111827;
     border: 1px solid #424b57;
diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css
index ec49016c4..2fd276469 100644
--- a/public/themes/lara-dark-pink/theme.css
+++ b/public/themes/lara-dark-pink/theme.css
@@ -646,6 +646,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.03);
   }
@@ -671,11 +674,6 @@
     box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #111827;
     border: 1px solid #424b57;
diff --git a/public/themes/lara-dark-purple/theme.css b/public/themes/lara-dark-purple/theme.css
index 6bf8dd1a6..0f6f97bd2 100644
--- a/public/themes/lara-dark-purple/theme.css
+++ b/public/themes/lara-dark-purple/theme.css
@@ -646,6 +646,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.03);
   }
@@ -671,11 +674,6 @@
     box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #111827;
     border: 1px solid #424b57;
diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css
index a341fafda..f90ed4675 100644
--- a/public/themes/lara-dark-teal/theme.css
+++ b/public/themes/lara-dark-teal/theme.css
@@ -646,6 +646,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.03);
   }
@@ -671,11 +674,6 @@
     box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #111827;
     border: 1px solid #424b57;
diff --git a/public/themes/lara-dark-turquoise/theme.css b/public/themes/lara-dark-turquoise/theme.css
index 84cafbf5e..94f0c1ef3 100644
--- a/public/themes/lara-dark-turquoise/theme.css
+++ b/public/themes/lara-dark-turquoise/theme.css
@@ -646,6 +646,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.03);
   }
@@ -671,11 +674,6 @@
     box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #111827;
     border: 1px solid #424b57;
diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css
index 621c021ac..b30c1a867 100644
--- a/public/themes/lara-light-amber/theme.css
+++ b/public/themes/lara-light-amber/theme.css
@@ -646,6 +646,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #f3f4f6;
   }
@@ -671,11 +674,6 @@
     box-shadow: 0 0 0 0.2rem #fef08a;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #ffffff;
     border: 1px solid #d1d5db;
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index bf8591389..3e56cfebf 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -646,6 +646,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #f3f4f6;
   }
@@ -671,11 +674,6 @@
     box-shadow: 0 0 0 0.2rem #BFDBFE;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #ffffff;
     border: 1px solid #d1d5db;
diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css
index 6438048ee..dad0b2626 100644
--- a/public/themes/lara-light-cyan/theme.css
+++ b/public/themes/lara-light-cyan/theme.css
@@ -646,6 +646,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #f3f4f6;
   }
@@ -671,11 +674,6 @@
     box-shadow: 0 0 0 0.2rem #a5f3fc;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #ffffff;
     border: 1px solid #d1d5db;
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
index e08fc66a0..3036062b2 100644
--- a/public/themes/lara-light-indigo/theme.css
+++ b/public/themes/lara-light-indigo/theme.css
@@ -646,6 +646,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #f3f4f6;
   }
@@ -671,11 +674,6 @@
     box-shadow: 0 0 0 0.2rem #C7D2FE;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #ffffff;
     border: 1px solid #d1d5db;
diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css
index 81e4754ca..81873b26e 100644
--- a/public/themes/lara-light-pink/theme.css
+++ b/public/themes/lara-light-pink/theme.css
@@ -646,6 +646,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #f3f4f6;
   }
@@ -671,11 +674,6 @@
     box-shadow: 0 0 0 0.2rem #fbcfe8;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #ffffff;
     border: 1px solid #d1d5db;
diff --git a/public/themes/lara-light-purple/theme.css b/public/themes/lara-light-purple/theme.css
index bc7fd42aa..564724da2 100644
--- a/public/themes/lara-light-purple/theme.css
+++ b/public/themes/lara-light-purple/theme.css
@@ -646,6 +646,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #f3f4f6;
   }
@@ -671,11 +674,6 @@
     box-shadow: 0 0 0 0.2rem #DDD6FE;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #ffffff;
     border: 1px solid #d1d5db;
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index cd0e67912..e728d094c 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -646,6 +646,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #f3f4f6;
   }
@@ -671,11 +674,6 @@
     box-shadow: 0 0 0 0.2rem #a7f3d0;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #ffffff;
     border: 1px solid #d1d5db;
diff --git a/public/themes/lara-light-turquoise/theme.css b/public/themes/lara-light-turquoise/theme.css
index 463d10265..5980129da 100644
--- a/public/themes/lara-light-turquoise/theme.css
+++ b/public/themes/lara-light-turquoise/theme.css
@@ -646,6 +646,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #f3f4f6;
   }
@@ -671,11 +674,6 @@
     box-shadow: 0 0 0 0.2rem #99f6e4;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #ffffff;
     border: 1px solid #d1d5db;
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index d1c7430d0..fbc5c255d 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -627,6 +627,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #4c4c4c;
   }
@@ -652,11 +655,6 @@
     box-shadow: 0 0 0 0.1rem white;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #191919;
     border: 1px solid #4b4b4b;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index bf1dd261f..b4d7effaa 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -627,6 +627,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #4c4c4c;
   }
@@ -652,11 +655,6 @@
     box-shadow: 0 0 0 0.1rem white;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #191919;
     border: 1px solid #4b4b4b;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 20c8a30c8..d1f2a90c4 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -627,6 +627,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #4c4c4c;
   }
@@ -652,11 +655,6 @@
     box-shadow: 0 0 0 0.1rem white;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #191919;
     border: 1px solid #4b4b4b;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index d09491f08..87b63e8dc 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -627,6 +627,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #4c4c4c;
   }
@@ -652,11 +655,6 @@
     box-shadow: 0 0 0 0.1rem white;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #191919;
     border: 1px solid #4b4b4b;
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index 7ea2c0f6c..921d9f8a5 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -651,6 +651,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.04);
   }
@@ -676,11 +679,6 @@
     box-shadow: none;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #1e1e1e;
     border: 1px solid rgba(255, 255, 255, 0.3);
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index f12002019..331513104 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -651,6 +651,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.04);
   }
@@ -676,11 +679,6 @@
     box-shadow: none;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #1e1e1e;
     border: 1px solid rgba(255, 255, 255, 0.3);
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index 56763a26c..9693e0eab 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -651,6 +651,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(0, 0, 0, 0.04);
   }
@@ -676,11 +679,6 @@
     box-shadow: none;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #ffffff;
     border: 1px solid rgba(0, 0, 0, 0.38);
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index b1b0b6f03..76411ea0c 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -651,6 +651,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(0, 0, 0, 0.04);
   }
@@ -676,11 +679,6 @@
     box-shadow: none;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #ffffff;
     border: 1px solid rgba(0, 0, 0, 0.38);
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index 5c0c2753d..fd0670dac 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -651,6 +651,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.04);
   }
@@ -676,11 +679,6 @@
     box-shadow: none;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #1e1e1e;
     border: 1px solid rgba(255, 255, 255, 0.3);
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index bec63a59a..1b0a32b3f 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -651,6 +651,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.04);
   }
@@ -676,11 +679,6 @@
     box-shadow: none;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #1e1e1e;
     border: 1px solid rgba(255, 255, 255, 0.3);
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index 11b958d2a..c5bc55c47 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -651,6 +651,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(0, 0, 0, 0.04);
   }
@@ -676,11 +679,6 @@
     box-shadow: none;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #ffffff;
     border: 1px solid rgba(0, 0, 0, 0.38);
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index f2dc51076..a916605f3 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -651,6 +651,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(0, 0, 0, 0.04);
   }
@@ -676,11 +679,6 @@
     box-shadow: none;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #ffffff;
     border: 1px solid rgba(0, 0, 0, 0.38);
diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css
index ce2f1bd95..1297824da 100644
--- a/public/themes/mira/theme.css
+++ b/public/themes/mira/theme.css
@@ -655,6 +655,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #D8DEE9;
   }
@@ -680,11 +683,6 @@
     box-shadow: 0 0 0 0.2rem #C0D0E0;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #ffffff;
     border: 1px solid #D8DEE9;
diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css
index 4e5fbef28..8095b9262 100644
--- a/public/themes/nano/theme.css
+++ b/public/themes/nano/theme.css
@@ -627,6 +627,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #dde1e6;
   }
@@ -652,11 +655,6 @@
     box-shadow: 0 0 0 0.2rem #90c9f5;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #ffffff;
     border: 1px solid #a5acb3;
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 81e524826..f7b9beba6 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -627,6 +627,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0.25rem;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #eaeaea;
   }
@@ -652,11 +655,6 @@
     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-cascadeselect {
     background: #ffffff;
     border: 1px solid #a6a6a6;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 6ed2e1834..5a5fe10af 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -627,6 +627,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0.25rem;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #eaeaea;
   }
@@ -652,11 +655,6 @@
     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-cascadeselect {
     background: #ffffff;
     border: 1px solid #a6a6a6;
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 1aaa7b07b..6d4be8b58 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -627,6 +627,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0.25rem;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #eaeaea;
   }
@@ -652,11 +655,6 @@
     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-cascadeselect {
     background: #ffffff;
     border: 1px solid #a6a6a6;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index d83db0dd8..82cdc3f75 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -627,6 +627,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0.25rem;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #eaeaea;
   }
@@ -652,11 +655,6 @@
     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-cascadeselect {
     background: #ffffff;
     border: 1px solid #a6a6a6;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 5e0027ec7..14d515e3f 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -627,6 +627,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0.25rem;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #f4f4f4;
   }
@@ -652,11 +655,6 @@
     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-cascadeselect {
     background: #ffffff;
     border: 1px solid #dadada;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index f197f5d0d..2b6ab18f9 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -627,6 +627,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #e9ecef;
   }
@@ -652,11 +655,6 @@
     box-shadow: 0 0 0 0.2rem #a6d5fa;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #ffffff;
     border: 1px solid #ced4da;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index b98fdcca3..2fae306bd 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -627,6 +627,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #e9ecef;
   }
@@ -652,11 +655,6 @@
     box-shadow: 0 0 0 0.2rem #b7e0b8;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #ffffff;
     border: 1px solid #ced4da;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 2dba70429..df0141782 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -627,6 +627,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #e9ecef;
   }
@@ -652,11 +655,6 @@
     box-shadow: 0 0 0 0.2rem #ffe69c;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #ffffff;
     border: 1px solid #ced4da;
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index 99fd4cd71..4d449d8d4 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -627,6 +627,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #e9ecef;
   }
@@ -652,11 +655,6 @@
     box-shadow: 0 0 0 0.2rem #df9eea;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #ffffff;
     border: 1px solid #ced4da;
diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css
index 7e7f34047..0ea68f44e 100644
--- a/public/themes/soho-dark/theme.css
+++ b/public/themes/soho-dark/theme.css
@@ -651,6 +651,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.03);
   }
@@ -676,11 +679,6 @@
     box-shadow: 0 0 0 1px #e0d8fc;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #1d1e27;
     border: 1px solid #3e4053;
diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css
index 9713d5375..22dc92d26 100644
--- a/public/themes/soho-light/theme.css
+++ b/public/themes/soho-light/theme.css
@@ -651,6 +651,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.2);
   }
@@ -676,11 +679,6 @@
     box-shadow: 0 0 0 1px #c7bbfa;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #ffffff;
     border: 1px solid #d3dbe3;
diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css
index 311b6f3dc..6c2fb9dc7 100644
--- a/public/themes/tailwind-light/theme.css
+++ b/public/themes/tailwind-light/theme.css
@@ -662,6 +662,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #f4f4f5;
   }
@@ -687,11 +690,6 @@
     box-shadow: 0 0 0 1px #6366F1;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #ffffff;
     border: 1px solid #d4d4d8;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index 28fa43b62..cf17288ae 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -627,6 +627,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.03);
   }
@@ -652,11 +655,6 @@
     box-shadow: 0 0 0 1px #93cbf9;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #17212f;
     border: 1px solid #304562;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index 42781a949..747747d83 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -627,6 +627,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.03);
   }
@@ -652,11 +655,6 @@
     box-shadow: 0 0 0 1px #a7d8a9;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #17212f;
     border: 1px solid #304562;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 6d29aaa16..fa0c70908 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -627,6 +627,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.03);
   }
@@ -652,11 +655,6 @@
     box-shadow: 0 0 0 1px #ffe284;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #17212f;
     border: 1px solid #304562;
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 1d788ba03..2bba3112f 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -627,6 +627,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(255, 255, 255, 0.03);
   }
@@ -652,11 +655,6 @@
     box-shadow: 0 0 0 1px #cf95d9;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #17212f;
     border: 1px solid #304562;
diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css
index edfba90d5..ca572aa23 100644
--- a/public/themes/viva-dark/theme.css
+++ b/public/themes/viva-dark/theme.css
@@ -659,6 +659,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: rgba(158, 173, 230, 0.08);
   }
@@ -684,11 +687,6 @@
     box-shadow: 0 0 0 1px #9eade6;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #0e1315;
     border: 2px solid #263238;
diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css
index 1a9469578..acf4127f6 100644
--- a/public/themes/viva-light/theme.css
+++ b/public/themes/viva-light/theme.css
@@ -659,6 +659,9 @@
   .p-datepicker.p-datepicker-multiple-month .p-datepicker-group:last-child {
     padding-right: 0;
   }
+  .p-datepicker.p-datepicker-mobile table th, .p-datepicker.p-datepicker-mobile table td {
+    padding: 0;
+  }
   .p-datepicker:not(.p-disabled) table td span:not(.p-highlight):not(.p-disabled):hover {
     background: #edf0fA;
   }
@@ -684,11 +687,6 @@
     box-shadow: 0 0 0 0.1rem #bbc7ee;
   }
 
-  @media screen and (max-width: 769px) {
-    .p-datepicker table th, .p-datepicker table td {
-      padding: 0;
-    }
-  }
   .p-cascadeselect {
     background: #ffffff;
     border: 2px solid #e1e1e1;