Forms: apply tip-styles on mobile responses as well (#45846)

Author: simison

projects/packages/forms/changelog/fix-forms-tip-styles-mobile

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Forms: apply tip-styles on mobile responses as well

projects/packages/forms/src/dashboard/components/response-view/body.tsx

@@ -536,21 +536,25 @@ const ResponseViewBody = ( {
 				</ConfirmDialog>
 			</div>
 			{ response.status === 'spam' && (
-				<Tip>{ __( 'Spam responses are moved to trash after 15 days.', 'jetpack-forms' ) }</Tip>
+				<div className="jp-forms__inbox__tip-container">
+					<Tip>{ __( 'Spam responses are moved to trash after 15 days.', 'jetpack-forms' ) }</Tip>
+				</div>
 			) }
 			{ response.status === 'trash' && (
-				<Tip>
-					{ sprintf(
-						/* translators: %d number of days. */
-						_n(
-							'Items in trash are permanently deleted after %d day.',
-							'Items in trash are permanently deleted after %d days.',
-							emptyTrashDays,
-							'jetpack-forms'
-						),
-						emptyTrashDays
-					) }
-				</Tip>
+				<div className="jp-forms__inbox__tip-container">
+					<Tip>
+						{ sprintf(
+							/* translators: %d number of days. */
+							_n(
+								'Items in trash are permanently deleted after %d day.',
+								'Items in trash are permanently deleted after %d days.',
+								emptyTrashDays,
+								'jetpack-forms'
+							),
+							emptyTrashDays
+						) }
+					</Tip>
+				</div>
 			) }
 		</>
 	);

projects/packages/forms/src/dashboard/inbox/style.scss

@@ -459,13 +459,22 @@
 		height: calc(100vh - var(--wp-admin--admin-bar--height, 32px) - 57px);
 		margin-bottom: 57px;
 	}
+}
+
+.jp-forms__inbox__tip-container {
+	border-top: 1px solid var(--jp-forms-border-color);
+	margin: 8px 0 0 0;
+	padding: 16px 0;
+	text-wrap: balance;
 
+	// https://wordpress.github.io/gutenberg/?path=/docs/components-tip--docs
 	.components-tip {
 		align-items: anchor-center;
-		border-top: 1px solid var(--jp-forms-border-color);
-		margin: 8px 0 56px 0;
-		padding: 16px;
-		text-wrap: pretty;
+	}
+
+	@media (min-width: 782px) {
+		padding: 16px 32px;
+		margin-bottom: 57px; // Compensate for fixed footer from DataViews
 	}
 }
 
@@ -481,7 +490,6 @@
 	}
 }
 
-
 /*
  * We need to make the available canvas 100% tall. Without this,
  * no flex values will work, they will only use the available space.