UI improvments

src/app/components/user-input/user-input.scss

@@ -1,7 +1,8 @@
 .user-input {
-	display: flex;
-	flex-direction: column;
-	gap: 1.25rem;
+	display: grid;
+	grid-template-columns: minmax(0, 1fr);
+	align-items: start;
+	gap: 1rem;
 	min-width: 0;
 }
 
@@ -16,7 +17,7 @@
 	}
 
 	h2 {
-		font-size: 1.5rem;
+		font-size: 1.125rem;
 		font-weight: 700;
 		line-height: 1.2;
 		text-wrap: balance;
@@ -24,6 +25,7 @@
 
 	p {
 		max-width: 55ch;
+		font-size: 0.875rem;
 		color: var(--ui-text-secondary, #45464f);
 		line-height: 1.5;
 	}
@@ -80,11 +82,15 @@ form {
 
 .add-day-button {
 	display: flex;
-	justify-content: flex-start;
+	justify-content: center;
+	border-style: dashed;
+	border-color: var(--mat-sys-outline);
+	border-radius: var(--ui-radius-sm);
 }
 
 .calculate-button {
 	min-height: 3.25rem;
+	border-radius: var(--ui-radius-sm);
 	font-weight: 600;
 }
 
@@ -116,3 +122,44 @@ form {
 	container: user-input / inline-size;
 	max-width: 100%;
 }
+
+@container user-input (min-width: 40rem) {
+	.listOfDays {
+		display: grid;
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+	}
+	.add-day-button {
+		grid-column: 1 / -1;
+	}
+}
+
+@container user-input (min-width: 48rem) {
+	.user-input {
+		grid-template-columns: repeat(2, minmax(0, 1fr));
+		column-gap: 1.5rem;
+	}
+	.section-heading,
+	.calculate-button,
+	.warning-card {
+		grid-column: 1 / -1;
+	}
+	.listOfDays {
+		grid-template-columns: minmax(0, 1fr);
+	}
+}
+
+.jump-to-plan {
+	display: inline-flex;
+	align-items: center;
+	gap: 0.5rem;
+	width: fit-content;
+	min-height: 2.75rem;
+	color: var(--mat-sys-primary);
+	font-size: 0.875rem;
+	text-underline-offset: 0.25em;
+}
+@media (min-width: 75rem) {
+	.jump-to-plan {
+		display: none;
+	}
+}