Forms: update meta section to use table instead of divs (#45656)

Author: simison

projects/packages/forms/changelog/update-forms-meta-table

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Forms: use table to render response meta

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

@@ -449,41 +449,37 @@ const ResponseViewBody = ( {
 				</div>
 
 				<div className="jp-forms__inbox-response-meta">
-					<div className="jp-forms__inbox-response-meta-label">
-						<span className="jp-forms__inbox-response-meta-key">
-							{ __( 'Date:', 'jetpack-forms' ) }&nbsp;
-						</span>
-						<span className="jp-forms__inbox-response-meta-value">
-							{ sprintf(
-								/* Translators: %1$s is the date, %2$s is the time. */
-								__( '%1$s at %2$s', 'jetpack-forms' ),
-								dateI18n( getDateSettings().formats.date, response.date ),
-								dateI18n( getDateSettings().formats.time, response.date )
-							) }
-						</span>
-					</div>
-					<div className="jp-forms__inbox-response-meta-label">
-						<span className="jp-forms__inbox-response-meta-key">
-							{ __( 'Source:', 'jetpack-forms' ) }&nbsp;
-						</span>
-						<span className="jp-forms__inbox-response-meta-value">
-							<ExternalLink href={ response.entry_permalink }>
-								{ decodeEntities( response.entry_title ) || getPath( response ) }
-							</ExternalLink>
-						</span>
-					</div>
-					<div className="jp-forms__inbox-response-meta-label">
-						<span className="jp-forms__inbox-response-meta-key	">
-							{ __( 'IP address:', 'jetpack-forms' ) }&nbsp;
-						</span>
-						<span className="jp-forms__inbox-response-meta-value">
-							<Tooltip text={ __( 'Lookup IP address', 'jetpack-forms' ) }>
-								<ExternalLink href={ getRedirectUrl( 'ip-lookup', { path: response.ip } ) }>
-									{ response.ip }
+					<table>
+						<tr>
+							<th>{ __( 'Date:', 'jetpack-forms' ) }</th>
+							<td>
+								{ sprintf(
+									/* Translators: %1$s is the date, %2$s is the time. */
+									__( '%1$s at %2$s', 'jetpack-forms' ),
+									dateI18n( getDateSettings().formats.date, response.date ),
+									dateI18n( getDateSettings().formats.time, response.date )
+								) }
+							</td>
+						</tr>
+						<tr>
+							<th>{ __( 'Source:', 'jetpack-forms' ) }</th>
+							<td>
+								<ExternalLink href={ response.entry_permalink }>
+									{ decodeEntities( response.entry_title ) || getPath( response ) }
 								</ExternalLink>
-							</Tooltip>
-						</span>
-					</div>
+							</td>
+						</tr>
+						<tr>
+							<th>{ __( 'IP address:', 'jetpack-forms' ) }&nbsp;</th>
+							<td>
+								<Tooltip text={ __( 'Lookup IP address', 'jetpack-forms' ) }>
+									<ExternalLink href={ getRedirectUrl( 'ip-lookup', { path: response.ip } ) }>
+										{ response.ip }
+									</ExternalLink>
+								</Tooltip>
+							</td>
+						</tr>
+					</table>
 				</div>
 
 				<div className="jp-forms__inbox-response-data">
@@ -498,7 +494,6 @@ const ResponseViewBody = ( {
 						</div>
 					) ) }
 				</div>
-
 				{ isPreviewModalOpen && previewFile && onModalStateChange && (
 					<Modal
 						title={ decodeEntities( ( previewFile as { name: string } ).name ) }
@@ -512,7 +507,6 @@ const ResponseViewBody = ( {
 						/>
 					</Modal>
 				) }
-
 				<ConfirmDialog
 					isOpen={ isConfirmDialogOpen }
 					onConfirm={ onConfirmMarkAsSpam }

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

@@ -126,41 +126,23 @@
 
 .jp-forms__inbox-response-meta {
 	color: var(--jp-gray-80);
-	display: table;
-	flex-direction: column;
 	font-size: 12px;
-	font-weight: 400;
-	line-height: 20px;
-	row-gap: 4px;
-	padding: 12px 32px 24px;
-}
-
-.jp-forms__inbox-response-meta-label {
-	display: table-row;
-}
-
-.jp-forms__inbox-response-meta-key,
-.jp-forms__inbox-response-meta-value {
-	display: table-cell;
-	white-space: nowrap;
-}
-
-.jp-forms__inbox-response-meta-key {
-	padding-right: 8px;
-}
+	padding: 12px 30px 24px;
 
-.jp-forms__inbox-response-meta-value {
-	overflow: hidden;
-	text-overflow: ellipsis;
-	width: 80%;
-	max-width: 0;
+	table {
+		text-align: left;
+		width: fit-content;
 
-	.is-link {
-		text-decoration: none;
-		color: inherit;
+		td,
+		th {
+			padding: 0;
+		}
 
-		&:hover {
-			text-decoration: underline;
+		th {
+			font-weight: 400;
+			padding-right: variables.$grid-unit-10;
+			vertical-align: top;
+			white-space: nowrap;
 		}
 	}
 }