SpecialInbox: Use a real table with mw-datatable class

edg2s · edg2s · commit 2eedc3916f4e · 2021-02-25T20:39:38.000Z
diff --git a/includes/Specials/SpecialInbox.php b/includes/Specials/SpecialInbox.php
@@ -69,19 +69,20 @@ private function showAllEmails( $emailAddress ) {
 		if ( $emails ) {
 			$this->getOutput()->addModuleStyles( 'inbox.style' );
 			$this->getOutput()->addHTML( Html::rawElement(
-				'div',
-				[ 'class' => 'email-all' ],
+				'table',
+				[ 'class' => 'email-all mw-datatable' ],
+				'<tr><th>From</th><th>Subject</th><th>Time</th></tr>' .
 				implode( '', array_map( function ( $email ) {
 					return Html::rawElement(
-						'div',
+						'tr',
 						[ 'class' => [ !$email->email_read ? 'email-unread' : '', 'email-one' ] ],
 						Html::element(
-							'span',
+							'td',
 							[ 'class' => 'email-from' ],
 							$email->email_from
 						) .
 						Html::rawElement(
-							'span',
+							'td',
 							[ 'class' => 'email-subject' ],
 							Html::element(
 								'a',
@@ -90,7 +91,7 @@ private function showAllEmails( $emailAddress ) {
 							)
 						) .
 						Html::element(
-							'span',
+							'td',
 							[ 'class' => 'email-timestamp' ],
 							$this->getLanguage()->userTimeAndDate( $email->email_timestamp, $this->getUser() )
 						)
diff --git a/modules/inbox.less b/modules/inbox.less
@@ -1,24 +1,14 @@
 @import 'mediawiki.ui/variables';
 
 .email-all {
-	display: table;
 	width: 100%;
 
 	.email-one {
-		display: table-row;
-		&:hover {
-			background-color: @colorGray12;
+		.email-subject {
+			width: 50%;
 		}
 
-		span {
-			display: table-cell;
-
-			&.email-subject {
-				width: 50%;
-			}
-		}
-
-		&.email-unread span {
+		&.email-unread {
 			font-weight: bold;
 		}
 	}
