remove classes and align bullet to the end center

Yoast · Jan 7, 2025 · 3988dbd · 3988dbd
1 parent 4b66ad0
commit 3988dbd
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 14 deletions.
diff --git a/css/src/general-page.css b/css/src/general-page.css
@@ -249,28 +249,32 @@ body.toplevel_page_wpseo_dashboard {
 	}
 
 
-	.yst-site-kit-widget-table .yst-numbered-cell:first-child {
+	.yst-site-kit-widget-table td:first-child {
 		counter-increment: row-number;
 		@apply yst-relative;
 	}
 
-	.yst-site-kit-widget-table .yst-numbered-cell:first-child span {
+	.yst-site-kit-widget-table td:first-child div {
 		@apply yst-text-slate-900 yst-font-medium;
 	}
-	.yst-site-kit-widget-table .yst-numbered-cell:first-child span, .yst-site-kit-widget-table th:first-child span{
+	.yst-site-kit-widget-table td:first-child div, .yst-site-kit-widget-table th:first-child div{
 		@apply yst-ps-3;
 	}
 
-	.yst-site-kit-widget-table .yst-numbered-cell:first-child::before {
+	.yst-site-kit-widget-table td:first-child::before {
 		content: counter(row-number) ". ";
 		@apply yst-absolute yst-left-0 yst-text-slate-500 yst-font-normal;
 	}
 
 	/* Initialize the counter at the parent element level */
-	.yst-parent-numbered-cell {
+	.yst-site-kit-widget-table tbody {
 		counter-reset: row-number;
 	}
 
+	.yst-site-kit-widget-table th:last-child div {
+		@apply yst-text-end;
+	}
+
 	/* RTL */
 
 	&.rtl {

diff --git a/packages/js/src/dashboard/scores/components/site-kit-table.js b/packages/js/src/dashboard/scores/components/site-kit-table.js
@@ -33,11 +33,13 @@ const SortableHeader = ( { columnName, isAscending, onClick, index } ) =>  {
  * @returns {JSX.Element} The element.
  */
 const ScoreBullet = ( { score } ) => (
-	<span className="yst-flex yst-justify-center yst-items-center">
-		<span className={ classNames( "yst-shrink-0 yst-w-3 yst-aspect-square yst-rounded-full", SCORE_META[ score ].color ) }>
-			<span className="yst-sr-only">{ SCORE_META[ score ].label }</span>
-		</span>
-	</span>
+	<div className="yst-flex yst-justify-end yst-items-center">
+		<div className="yst-flex yst-justify-center yst-w-16">
+			<span className={ classNames( "yst-shrink-0 yst-w-3 yst-aspect-square yst-rounded-full", SCORE_META[ score ].color ) }>
+				<span className="yst-sr-only">{ SCORE_META[ score ].label }</span>
+			</span>
+		</div>
+	</div>
 );
 
 /**
@@ -95,20 +97,20 @@ export const SiteKitTable = ( { title, columns, data } ) => {
 										index={ index }
 										onClick={ handleSort }
 									/>
-								) : <span className={ column.className }>{ column.label }</span> }
+								) : <div className={ column.className }>{ column.label }</div> }
 							</Table.Header>
 						) }
 					</Table.Row>
 				</Table.Head>
-				<Table.Body className="yst-parent-numbered-cell">
+				<Table.Body>
 					{ sortedData.map( ( row, rowIndex ) => (
 						<Table.Row key={ `row-${title}-${rowIndex}` }>
 							{ row.map( ( cell, cellIndex ) => (
 								<Table.Cell key={ `cell-${title}-${cellIndex}` } className="yst-numbered-cell">
-									{ columns[ cellIndex ].name === "seo-score" ? <ScoreBullet score={ cell } /> : <span
+									{ columns[ cellIndex ].name === "seo-score" ? <ScoreBullet score={ cell } /> : <div
 										className={ classNames( columns[ cellIndex ].sortable ? "yst-text-end yst-pe-5" : "",
 											columns[ cellIndex ].className ) }
-									>{ cell }</span> }
+									>{ cell }</div> }
 								</Table.Cell> ) ) }
 						</Table.Row>
 					) ) }