diff --git a/components/snapshot/Calendar.vue b/components/snapshot/Calendar.vue
index 9cd08ac..d8d4e54 100644
--- a/components/snapshot/Calendar.vue
+++ b/components/snapshot/Calendar.vue
@@ -104,7 +104,7 @@ const isQueryMonth = (date: Date) => date.getMonth() === queryMonth.value;
       <Datepicker
         v-show="!(loadingCalendarEntries || calendarEntriesLoadError)"
         v-model="displayDate"
-        class="md:p-0 p-2"
+        class="md:px-0 px-4"
         :min-date="minDate"
         :max-date="now"
         :allowed-dates="allowedDates"
diff --git a/pages/playlists/[playlistId]/snapshots/index.vue b/pages/playlists/[playlistId]/snapshots/index.vue
index c8357d5..a563cc1 100644
--- a/pages/playlists/[playlistId]/snapshots/index.vue
+++ b/pages/playlists/[playlistId]/snapshots/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="md:text-lg text-base">
-    <p class="mt-0 mb-4 text-center">
+    <p class="mt-0 mb-4 mx-3 text-center">
       Click on a highlighted date to show a snapshot captured that day.
     </p>
     <ClientOnly>