Restore width of Billing History in Purchases (#98606)

* Set purchases screens to full width

* Remove full-width style for billing history

* Add dataviews specific class to wrapper

* Refactor HTML markup to be more semantic

---------

Co-authored-by: Bill Robbins <[email protected]>

Author: billrobbins

client/me/purchases/billing-history/billing-history-list-data-view.tsx

@@ -47,24 +47,20 @@ export default function BillingHistoryListDataView( {
 	const handleViewChange = ( view: View ) => viewState.updateView( view as ViewStateUpdate );
 
 	return (
-		<div className="billing-history">
-			<div className="dataviews-wrapper">
-				<DataViews
-					data={ paginatedItems }
-					paginationInfo={ {
-						totalItems,
-						totalPages,
-					} }
-					fields={ fields }
-					view={ viewState.view }
-					search
-					searchLabel={ translate( 'Search receipts' ) }
-					onChangeView={ handleViewChange }
-					defaultLayouts={ DEFAULT_LAYOUT }
-					actions={ actions }
-					isLoading={ isLoading }
-				/>
-			</div>
-		</div>
+		<DataViews
+			data={ paginatedItems }
+			paginationInfo={ {
+				totalItems,
+				totalPages,
+			} }
+			fields={ fields }
+			view={ viewState.view }
+			search
+			searchLabel={ translate( 'Search receipts' ) }
+			onChangeView={ handleViewChange }
+			defaultLayouts={ DEFAULT_LAYOUT }
+			actions={ actions }
+			isLoading={ isLoading }
+		/>
 	);
 }

client/me/purchases/billing-history/main.tsx

@@ -28,7 +28,7 @@ export function BillingHistoryContent( {
 	const useDataViewBillingHistoryList = config.isEnabled( 'purchases/billing-history-data-view' );
 
 	return (
-		<Card className="billing-history__receipts">
+		<Card id="billing-history" className="section-content" tagName="section">
 			{ useDataViewBillingHistoryList ? (
 				<BillingHistoryListDataView getReceiptUrlFor={ getReceiptUrlFor } />
 			) : (
@@ -61,7 +61,7 @@ function BillingHistory() {
 	const vatText = vatDetails.id ? editVatText : addVatText;
 
 	return (
-		<Main wideLayout className="billing-history">
+		<Main id="purchases" wideLayout>
 			<DocumentHead title={ titles.billingHistory } />
 			<PageViewTracker path="/me/purchases/billing" title="Me > Billing History" />
 			<NavigationHeader

client/me/purchases/billing-history/style-data-view.scss

@@ -1,11 +1,9 @@
-.billing-history {
-    .navigation-header::after {
-        display: none;
-    }
+#billing-history {
 
     .dataviews-wrapper {
         width: 100%;
         margin-bottom: 1rem;
+        padding: 0 1rem;
 
         .dataviews-view-table {
             width: 100%;
@@ -201,19 +199,3 @@
         gap: 1em;
     }
 }
-
-@media screen and (min-width: 782px) {
-    body.is-section-me .navigation-header::after {
-        display: none;
-    }
-}
-
-body.is-section-me div.layout.is-global-sidebar-visible .layout__primary .billing-history.main > * {
-    max-width: 100%;
-}
-
-@media screen and (min-width: 782px) {
-    body.is-section-me .navigation-header::after {
-       display: none !important;
-    }
-}