datepicker cell size

src/styles/partials/_datepicker.scss

@@ -89,7 +89,7 @@ p-calendar,
 
 	.p-datepicker-calendar {
 		td {
-			width: $cell-size;
+			width: $cell-size-datepicker-small;
 			padding: 0.15rem 0.25rem;
 		}
 
@@ -97,8 +97,8 @@ p-calendar,
 		.p-ripple {
 			margin: 0;
 			padding: 0.25em;
-			width: $cell-size;
-			height: $cell-size;
+			width: $cell-size-datepicker-small;
+			height: $cell-size-datepicker-small;
 			transition: all ease 0.5s;
 			background: $white;
 			border: solid 1px $primary_color;

src/styles/partials/_responsive.scss

@@ -5,6 +5,7 @@
 	#creation_stepper {
 		.step-title-poll {
 			font-size: 0.85rem;
+			max-width: 20ch;
 		}
 		.title-section {
 			width: 40%;
@@ -14,6 +15,23 @@
 		}
 	}
 }
+
+@media (min-width: 341px) {
+	// calendar datepicker cells
+	.p-datepicker {
+		.p-datepicker-calendar {
+			td {
+				width: $cell-size-datepicker-desktop;
+			}
+
+			td span,
+			.p-ripple {
+				width: $cell-size-datepicker-desktop;
+				height: $cell-size-datepicker-desktop;
+			}
+		}
+	}
+}
 @media (max-width: 400px) {
 	#creation_stepper {
 		.title-section {
@@ -49,7 +67,7 @@
 		padding: calc(56px + 32px) 1rem;
 	}
 	.bottom-step-buttons {
-		padding: 0.25rem;
+		padding: 0.25rem 0;
 		.contained-in-main-column {
 			padding: 0.5rem;
 		}
@@ -87,20 +105,6 @@
 	.feedback-container {
 		//position: fixed;
 	}
-
-	.p-datepicker {
-		.p-datepicker-calendar {
-			td {
-				width: $cell-size-desktop;
-			}
-
-			td span,
-			.p-ripple {
-				width: $cell-size-desktop;
-				height: $cell-size-desktop;
-			}
-		}
-	}
 }
 
 // wide screen like desktop

src/styles/variables.scss

@@ -83,8 +83,8 @@ $stepper-nav-height: 56px;
 $home-nav-height: 56px;
 $home-nav-height-small: 3.5rem;
 // datepicker
-$cell-size: 30px;
-$cell-size-desktop: 40px;
+$cell-size-datepicker-small: 30px;
+$cell-size-datepicker-desktop: 40px;
 
 // css vars
 :root {