From 930396ee1d045408393b51ca69867f5a048b22a2 Mon Sep 17 00:00:00 2001
From: Bill Robbins <billrobbins@users.noreply.github.com>
Date: Wed, 22 Jan 2025 11:08:29 -0600
Subject: [PATCH] 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 <bill.robbins@automattic.com>
---
 .../billing-history-list-data-view.tsx        | 34 ++++++++-----------
 client/me/purchases/billing-history/main.tsx  |  4 +--
 .../billing-history/style-data-view.scss      | 22 ++----------
 3 files changed, 19 insertions(+), 41 deletions(-)

diff --git a/client/me/purchases/billing-history/billing-history-list-data-view.tsx b/client/me/purchases/billing-history/billing-history-list-data-view.tsx
index ee856657a03ae..882e392213c70 100644
--- a/client/me/purchases/billing-history/billing-history-list-data-view.tsx
+++ b/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 }
+		/>
 	);
 }
diff --git a/client/me/purchases/billing-history/main.tsx b/client/me/purchases/billing-history/main.tsx
index ee9c51cc741d6..5fc1d279c4431 100644
--- a/client/me/purchases/billing-history/main.tsx
+++ b/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
diff --git a/client/me/purchases/billing-history/style-data-view.scss b/client/me/purchases/billing-history/style-data-view.scss
index 3597f4724befe..7f2e3a68a84cd 100644
--- a/client/me/purchases/billing-history/style-data-view.scss
+++ b/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;
-    }
-}
\ No newline at end of file