UI – remove problematic legacy .body-wrap, apply UI-standard .core-wrapper and .main-content to DUP (#16310)

## More global solution to #16277, cleanup to prevent similar bugs

- Swap out [localized
solution](https://github.com/fleetdm/fleet/pull/16287) for standard
`.main-content` containing desired padding
- Apply `.core-wrapper` class to parent, in line with all other UI pages
- Remove problematic legacy `.body-wrap`
  - spot check all places this class was being applied:
    - PlatformWrapper
    - LiveQuery –> SelectTargets (was causing excess padding here)
    - PackQueriesTable (caused excess padding here)
    - TeamManagementPage (excess padding was being locally negated)
    - EditQueryPage
    - LiveQueryPage
    - DeviceUserPage
  - Remove local styles meant to negate `.body-wrap`'s styles

- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>

frontend/components/AddHostsModal/PlatformWrapper/_styles.scss

@@ -16,10 +16,6 @@
     margin: 0;
   }
 
-  .body-wrap {
-    padding: 0;
-  }
-
   .input-field {
     &__textarea {
       min-height: 88px;

frontend/components/LiveQuery/SelectTargets.tsx

@@ -416,7 +416,7 @@ const SelectTargets = ({
 
   if (isLoadingLabels || (isPremiumTier && isLoadingTeams)) {
     return (
-      <div className={`${baseClass}__wrapper body-wrap`}>
+      <div className={`${baseClass}__wrapper`}>
         <h1>Select targets</h1>
         <div className={`${baseClass}__page-loading`}>
           <Spinner />
@@ -427,7 +427,7 @@ const SelectTargets = ({
 
   if (errorLabels || errorTeams) {
     return (
-      <div className={`${baseClass}__wrapper body-wrap`}>
+      <div className={`${baseClass}__wrapper`}>
         <h1>Select targets</h1>
         <PageError />
       </div>

frontend/components/queries/PackQueriesTable/PackQueriesTable.tsx

@@ -72,7 +72,7 @@ const PackQueriesTable = ({
   const tableData = generateDataSet(getQueries());
 
   return (
-    <div className={`${baseClass} body-wrap`}>
+    <div className={`${baseClass}`}>
       {scheduledQueries?.length ? (
         <TableContainer
           columnConfigs={tableHeaders}

frontend/pages/admin/TeamManagementPage/TeamManagementPage.tsx

@@ -252,7 +252,7 @@ const TeamManagementPage = (): JSX.Element => {
   const tableData = teams ? generateDataSet(teams) : [];
 
   return (
-    <div className={`${baseClass} body-wrap`}>
+    <div className={`${baseClass}`}>
       <p className={`${baseClass}__page-description`}>
         Create, customize, and remove teams from Fleet.
       </p>

frontend/pages/admin/TeamManagementPage/_styles.scss

@@ -1,5 +1,4 @@
 .team-management {
-  padding: 0;
   &__page-description {
     font-size: $x-small;
     color: $core-fleet-black;

frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx

@@ -359,11 +359,11 @@ const DeviceUserPage = ({
       findIndex(tabPaths, (x) => x.startsWith(pathname.split("?")[0]));
 
     return (
-      <div className="fleet-desktop-wrapper">
+      <div className="core-wrapper">
         {isLoadingHost ? (
           <Spinner />
         ) : (
-          <div className={`${baseClass} body-wrap`}>
+          <div className={`${baseClass} main-content`}>
             {host?.platform === "darwin" &&
               isMdmUnenrolled &&
               globalConfig?.mdm.enabled_and_configured && (

frontend/pages/hosts/details/DeviceUserPage/_styles.scss

@@ -4,11 +4,13 @@
   }
 }
 
+// styles specific to DeviceUserPage
+// for styles that should apply to both DeviceUserPage and HostDetailsPage (most of them),
+// update frontend/pages/hosts/details/_styles.scss/ `.host-details, .device-user {...}`
 .device-user {
   justify-content: flex-start;
   padding-bottom: 50px;
   min-width: 0;
-  padding: $pad-xlarge;
 
   .info-banner {
     &__cta {

frontend/pages/queries/edit/_styles.scss

@@ -1,8 +1,5 @@
 .edit-query-page {
   @include page;
-  .body-wrap {
-    min-width: 0;
-  }
 
   &__warning {
     padding: $pad-medium;

frontend/pages/queries/live/LiveQueryPage/_styles.scss

@@ -1,7 +1,4 @@
 .run-query-page {
-  .body-wrap {
-    min-width: 0;
-  }
   &__results {
     display: flex;
     flex-grow: 1;

frontend/styles/global/_global.scss

@@ -67,11 +67,6 @@ b {
   }
 }
 
-.body-wrap {
-  border-radius: 3px;
-  background-color: $core-white;
-}
-
 .has-sidebar {
   display: flex;
   flex-grow: 1;