From 5e05fd4dac3eb525de801ea1d2fe9f75b21f2c41 Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Tue, 6 May 2025 09:20:03 -0400
Subject: [PATCH] FE: Error messages in Storybook (#28640)

---
 .../DownloadInstallers/DownloadInstallers.tsx |  1 +
 .../DataError/DataError.stories.tsx           |  2 +-
 frontend/components/DataError/DataError.tsx   | 26 ++++++++++--
 frontend/components/DataError/_styles.scss    | 40 ++++++++++++++-----
 .../DeviceUserError.stories.tsx               |  2 +-
 .../DeviceUserError/DeviceUserError.tsx       |  2 +-
 .../components/DeviceUserError/_styles.scss   |  8 +++-
 .../pages/DashboardPage/DashboardPage.tsx     |  9 +++--
 frontend/pages/DashboardPage/_styles.scss     |  6 ---
 .../cards/ActivityFeed/ActivityFeed.tsx       |  2 +-
 .../cards/ActivityFeed/_styles.scss           | 30 --------------
 .../pages/DashboardPage/cards/MDM/MDM.tsx     |  6 +--
 .../pages/DashboardPage/cards/Munki/Munki.tsx |  4 +-
 .../OperatingSystems/OperatingSystems.tsx     |  4 +-
 .../DashboardPage/cards/Software/Software.tsx |  6 +--
 .../MetricsHostCounts/MetricsHostCounts.tsx   |  7 ----
 .../PlatformHostCounts/PlatformHostCounts.tsx |  7 +---
 .../CurrentVersionSection.tsx                 |  2 +-
 .../SoftwareAppStoreVpp.tsx                   |  2 +-
 .../SoftwareCustomPackage.tsx                 |  2 +-
 .../SoftwareCustomPackage/_styles.scss        |  4 --
 .../FleetMaintainedAppDetailsPage.tsx         |  2 +-
 .../_styles.scss                              |  4 --
 .../SoftwareFleetMaintained.tsx               |  2 +-
 .../SoftwareFleetMaintained/_styles.scss      |  2 +-
 .../SoftwarePage/SoftwareOS/SoftwareOS.tsx    |  2 +-
 .../SoftwareTitles/SoftwareTitles.tsx         |  2 +-
 .../SoftwarePage/SoftwareTitles/_styles.scss  |  5 ---
 .../SoftwareVulnerabilities.tsx               |  2 +-
 .../ConditionalAccess/debug.test3742931232    |  0
 .../AppleBusinessManagerPage.tsx              |  6 +--
 .../MdmSettings/AppleMdmPage/AppleMdmPage.tsx |  2 +-
 .../cards/MdmSettings/VppPage/VppPage.tsx     |  6 +--
 .../TeamSettings/TeamSettings.tsx             |  2 +-
 .../UsersPage/UsersPage.tsx                   |  2 +-
 .../components/UsersTable/UsersTable.tsx      |  2 +-
 .../hosts/ManageHostsPage/ManageHostsPage.tsx |  4 +-
 .../details/DeviceUserPage/DeviceUserPage.tsx |  4 +-
 .../hosts/details/DeviceUserPage/_styles.scss | 12 ------
 .../PastActivityFeed/PastActivityFeed.tsx     |  2 +-
 .../Activity/PastActivityFeed/_styles.scss    |  4 --
 .../UpcomingActivityFeed.tsx                  |  2 +-
 .../UpcomingActivityFeed/_styles.scss         |  4 --
 .../cards/Certificates/Certificates.tsx       |  2 +-
 .../details/cards/Software/HostSoftware.tsx   |  2 +-
 .../Software/SelfService/SelfService.tsx      |  2 +-
 .../ManagePoliciesPage/ManagePoliciesPage.tsx |  4 +-
 .../ManageQueriesPage/ManageQueriesPage.tsx   |  2 +-
 .../QueryDetailsPage/QueryDetailsPage.tsx     |  2 -
 49 files changed, 109 insertions(+), 150 deletions(-)
 delete mode 100644 frontend/pages/SoftwarePage/SoftwareTitles/_styles.scss
 create mode 100644 frontend/pages/admin/IntegrationsPage/cards/ConditionalAccess/debug.test3742931232

diff --git a/frontend/components/AddHostsModal/DownloadInstallers/DownloadInstallers.tsx b/frontend/components/AddHostsModal/DownloadInstallers/DownloadInstallers.tsx
index d598af35e2..dffda013e2 100644
--- a/frontend/components/AddHostsModal/DownloadInstallers/DownloadInstallers.tsx
+++ b/frontend/components/AddHostsModal/DownloadInstallers/DownloadInstallers.tsx
@@ -183,6 +183,7 @@ const DownloadInstallers = ({
     />
   );
 
+  // TODO: We should be rendering a Flash message instead
   if (isDownloadError) {
     return (
       <div className={`${baseClass}__error`}>
diff --git a/frontend/components/DataError/DataError.stories.tsx b/frontend/components/DataError/DataError.stories.tsx
index 963ac32841..a1dfe1aa36 100644
--- a/frontend/components/DataError/DataError.stories.tsx
+++ b/frontend/components/DataError/DataError.stories.tsx
@@ -4,7 +4,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import DataError from "./DataError";
 
 const meta: Meta<typeof DataError> = {
-  title: "Components/DataError",
+  title: "Components/Error Messages/Data error",
   component: DataError,
 };
 
diff --git a/frontend/components/DataError/DataError.tsx b/frontend/components/DataError/DataError.tsx
index 7b2cfd6d55..56dfdd4408 100644
--- a/frontend/components/DataError/DataError.tsx
+++ b/frontend/components/DataError/DataError.tsx
@@ -4,6 +4,7 @@ import classnames from "classnames";
 import CustomLink from "components/CustomLink";
 import Icon from "components/Icon";
 import Graphic from "components/Graphic";
+import { Padding } from "styles/var/padding";
 
 const baseClass = "data-error";
 
@@ -13,7 +14,14 @@ interface IDataErrorProps {
   /** Excludes the link that asks user to create an issue. Defaults to `false` */
   excludeIssueLink?: boolean;
   children?: React.ReactNode;
-  card?: boolean;
+  /**
+   * Sets the vertical padding for the component.
+   * **Recommended values:**
+   * - For card-level components, use "pad-large" `24px`.
+   * - For page-level components, use "pad-xxxlarge"`80px`.
+   * These values help maintain consistent spacing across the application.
+   */
+  verticalPaddingSize?: Padding;
   className?: string;
   /** Flag to use the updated DataError design */
   useNew?: boolean;
@@ -25,15 +33,21 @@ const DataError = ({
   description = DEFAULT_DESCRIPTION,
   excludeIssueLink = false,
   children,
-  card,
+  verticalPaddingSize,
   className,
   useNew = false,
 }: IDataErrorProps): JSX.Element => {
   const classes = classnames(baseClass, className);
+
   if (useNew) {
     return (
       <div className={classes}>
-        <div className={`${baseClass}__${card ? "card" : "inner-new"}`}>
+        <div
+          className={`${baseClass}__inner-new ${
+            verticalPaddingSize &&
+            `${baseClass}__vertical-${verticalPaddingSize}`
+          }`}
+        >
           <Graphic name="data-error" />
           <div className={`${baseClass}__header`}>
             Something&apos;s gone wrong.
@@ -60,7 +74,11 @@ const DataError = ({
 
   return (
     <div className={classes}>
-      <div className={`${baseClass}__${card ? "card" : "inner"}`}>
+      <div
+        className={`${baseClass}__inner ${
+          verticalPaddingSize && `${baseClass}__vertical-${verticalPaddingSize}`
+        }`}
+      >
         <div className="info">
           <span className="info__header">
             <Icon name="error" />
diff --git a/frontend/components/DataError/_styles.scss b/frontend/components/DataError/_styles.scss
index 9ea6ed3a9d..703bc65e09 100644
--- a/frontend/components/DataError/_styles.scss
+++ b/frontend/components/DataError/_styles.scss
@@ -3,10 +3,28 @@
   flex-direction: column;
   align-items: center;
 
-  &__card {
-    display: flex;
-    flex-direction: row;
-    margin: $pad-large 0 0;
+  &__vertical-pad-small {
+    padding: $pad-small 0;
+  }
+
+  &__vertical-pad-medium {
+    padding: $pad-medium 0;
+  }
+
+  &__vertical-pad-large {
+    padding: $pad-large 0;
+  }
+
+  &__vertical-pad-xlarge {
+    padding: $pad-xlarge 0;
+  }
+
+  &__vertical-pad-xxlarge {
+    padding: $pad-xxlarge 0;
+  }
+
+  &__vertical-pad-xxxlarge {
+    padding: $pad-xxxlarge 0;
   }
 
   &__inner {
@@ -15,6 +33,10 @@
   }
 
   .info {
+    display: flex;
+    flex-direction: column;
+    gap: $pad-small;
+
     &__header {
       display: flex;
       color: $core-fleet-black;
@@ -22,6 +44,7 @@
       font-size: $x-small;
       text-align: left;
       gap: $pad-small;
+      margin-bottom: $pad-small;
     }
     &__data {
       display: block;
@@ -29,10 +52,9 @@
       font-weight: normal;
       font-size: $x-small;
       text-align: left;
-      margin-top: 10px;
     }
   }
-  
+
   //  // // // // // // // // // // //
   // new version
   &__inner-new {
@@ -46,7 +68,7 @@
     color: $core-fleet-black;
     font-size: $x-small;
   }
-    &__header {
-      font-weight: $bold;
-    }
+  &__header {
+    font-weight: $bold;
+  }
 }
diff --git a/frontend/components/DeviceUserError/DeviceUserError.stories.tsx b/frontend/components/DeviceUserError/DeviceUserError.stories.tsx
index 9414af780e..82c39b2140 100644
--- a/frontend/components/DeviceUserError/DeviceUserError.stories.tsx
+++ b/frontend/components/DeviceUserError/DeviceUserError.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import DeviceUserError from "./DeviceUserError";
 
 const meta: Meta<typeof DeviceUserError> = {
-  title: "Components/DeviceUserError",
+  title: "Components/Error messages/Device user error",
   component: DeviceUserError,
 };
 
diff --git a/frontend/components/DeviceUserError/DeviceUserError.tsx b/frontend/components/DeviceUserError/DeviceUserError.tsx
index a3c9d0fe09..7df7cc38ea 100644
--- a/frontend/components/DeviceUserError/DeviceUserError.tsx
+++ b/frontend/components/DeviceUserError/DeviceUserError.tsx
@@ -6,7 +6,7 @@ const baseClass = "device-user-error";
 
 const DeviceUserError = (): JSX.Element => {
   return (
-    <div className={`${baseClass}`}>
+    <div className={baseClass}>
       <div className={`${baseClass}__inner`}>
         <div className="info">
           <span className="info__header">
diff --git a/frontend/components/DeviceUserError/_styles.scss b/frontend/components/DeviceUserError/_styles.scss
index 2cd30a1901..c0378eadc1 100644
--- a/frontend/components/DeviceUserError/_styles.scss
+++ b/frontend/components/DeviceUserError/_styles.scss
@@ -10,8 +10,14 @@
   }
 
   .info {
+    display: flex;
+    flex-direction: column;
+    gap: $pad-large;
+    max-width: 333px;
+
     &__header {
       display: block;
+      gap: $pad-large;
       color: $core-fleet-black;
       font-weight: $bold;
       font-size: $x-small;
@@ -30,7 +36,7 @@
       font-weight: normal;
       font-size: $x-small;
       text-align: center;
-      margin-top: 10px;
+      line-height: 21px; // Matches design
     }
   }
 }
diff --git a/frontend/pages/DashboardPage/DashboardPage.tsx b/frontend/pages/DashboardPage/DashboardPage.tsx
index 73b69b62af..7273ffbdd4 100644
--- a/frontend/pages/DashboardPage/DashboardPage.tsx
+++ b/frontend/pages/DashboardPage/DashboardPage.tsx
@@ -60,6 +60,7 @@ import { CustomOptionType } from "components/forms/fields/DropdownWrapper/Dropdo
 import MainContent from "components/MainContent";
 import LastUpdatedText from "components/LastUpdatedText";
 import Card from "components/Card";
+import DataError from "components/DataError";
 
 import {
   LOW_DISK_SPACE_GB,
@@ -556,7 +557,11 @@ const DashboardPage = ({ router, location }: IDashboardProps): JSX.Element => {
     ]
   );
 
-  const HostCountCards = (
+  const HostCountCards = errorHosts ? (
+    <Card borderRadiusSize="large">
+      <DataError verticalPaddingSize="pad-large" />
+    </Card>
+  ) : (
     <>
       <PlatformHostCounts
         androidDevEnabled={!!config?.android_enabled}
@@ -570,7 +575,6 @@ const DashboardPage = ({ router, location }: IDashboardProps): JSX.Element => {
         androidCount={androidCount}
         builtInLabels={labels}
         selectedPlatform={selectedPlatform}
-        errorHosts={!!errorHosts}
         totalHostCount={
           !isHostSummaryFetching && !errorHosts
             ? hostSummaryData?.totals_hosts_count
@@ -580,7 +584,6 @@ const DashboardPage = ({ router, location }: IDashboardProps): JSX.Element => {
       <MetricsHostCounts
         currentTeamId={teamIdForApi}
         selectedPlatform={selectedPlatform}
-        errorHosts={!!errorHosts}
         totalHostCount={
           !isHostSummaryFetching && !errorHosts
             ? hostSummaryData?.totals_hosts_count
diff --git a/frontend/pages/DashboardPage/_styles.scss b/frontend/pages/DashboardPage/_styles.scss
index 37f8d82f1a..fb2e851fcc 100644
--- a/frontend/pages/DashboardPage/_styles.scss
+++ b/frontend/pages/DashboardPage/_styles.scss
@@ -3,12 +3,6 @@
   overflow: initial; // auto causes double scroll bar  but still needed for other pages .main-content div
   padding-bottom: 60px; // replaces white padding on off-white page
 
-  .data-error {
-    &__inner {
-      margin: $pad-xxxlarge 0;
-    }
-  }
-
   &__wrapper {
     background-color: $ui-off-white;
   }
diff --git a/frontend/pages/DashboardPage/cards/ActivityFeed/ActivityFeed.tsx b/frontend/pages/DashboardPage/cards/ActivityFeed/ActivityFeed.tsx
index 9ace5a3e8e..fa726da8ae 100644
--- a/frontend/pages/DashboardPage/cards/ActivityFeed/ActivityFeed.tsx
+++ b/frontend/pages/DashboardPage/cards/ActivityFeed/ActivityFeed.tsx
@@ -151,7 +151,7 @@ const ActivityFeed = ({
   };
 
   const renderError = () => {
-    return <DataError card />;
+    return <DataError verticalPaddingSize="pad-large" />;
   };
 
   const renderNoActivities = () => {
diff --git a/frontend/pages/DashboardPage/cards/ActivityFeed/_styles.scss b/frontend/pages/DashboardPage/cards/ActivityFeed/_styles.scss
index fba5d1e5fb..9316620e4d 100644
--- a/frontend/pages/DashboardPage/cards/ActivityFeed/_styles.scss
+++ b/frontend/pages/DashboardPage/cards/ActivityFeed/_styles.scss
@@ -55,36 +55,6 @@
     }
   }
 
-  &__error {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin: $pad-xlarge 0;
-
-    &__inner {
-      display: flex;
-      flex-direction: row;
-    }
-
-    .info {
-      &__header {
-        display: block;
-        color: $core-fleet-black;
-        font-weight: $bold;
-        font-size: $x-small;
-        text-align: left;
-      }
-      &__data {
-        display: block;
-        color: $core-fleet-black;
-        font-weight: normal;
-        font-size: $x-small;
-        text-align: left;
-        margin-top: 10px;
-      }
-    }
-  }
-
   .spinner {
     z-index: 11;
     opacity: 1;
diff --git a/frontend/pages/DashboardPage/cards/MDM/MDM.tsx b/frontend/pages/DashboardPage/cards/MDM/MDM.tsx
index b1d85663b6..b7a8196c58 100644
--- a/frontend/pages/DashboardPage/cards/MDM/MDM.tsx
+++ b/frontend/pages/DashboardPage/cards/MDM/MDM.tsx
@@ -8,7 +8,7 @@ import TabNav from "components/TabNav";
 import TabText from "components/TabText";
 import TableContainer from "components/TableContainer";
 import Spinner from "components/Spinner";
-import TableDataError from "components/DataError";
+import DataError from "components/DataError";
 import EmptyTable from "components/EmptyTable";
 import CustomLink from "components/CustomLink";
 
@@ -152,7 +152,7 @@ const Mdm = ({
             </TabList>
             <TabPanel>
               {error ? (
-                <TableDataError card />
+                <DataError verticalPaddingSize="pad-large" />
               ) : (
                 <TableContainer<IRowProps>
                   className={`${baseClass}__mdm-solutions-table`}
@@ -175,7 +175,7 @@ const Mdm = ({
             </TabPanel>
             <TabPanel>
               {error ? (
-                <TableDataError card />
+                <DataError verticalPaddingSize="pad-large" />
               ) : (
                 <TableContainer
                   className={`${baseClass}__mdm-status-table`}
diff --git a/frontend/pages/DashboardPage/cards/Munki/Munki.tsx b/frontend/pages/DashboardPage/cards/Munki/Munki.tsx
index 7ac7cf6a8a..bfa57a1b56 100644
--- a/frontend/pages/DashboardPage/cards/Munki/Munki.tsx
+++ b/frontend/pages/DashboardPage/cards/Munki/Munki.tsx
@@ -71,7 +71,7 @@ const Munki = ({
             </TabList>
             <TabPanel>
               {errorMacAdmins ? (
-                <TableDataError card />
+                <TableDataError verticalPaddingSize="pad-large" />
               ) : (
                 <TableContainer
                   columnConfigs={tableHeaders}
@@ -98,7 +98,7 @@ const Munki = ({
             </TabPanel>
             <TabPanel>
               {errorMacAdmins ? (
-                <TableDataError card />
+                <TableDataError verticalPaddingSize="pad-large" />
               ) : (
                 <TableContainer
                   columnConfigs={munkiVersionsTableHeaders}
diff --git a/frontend/pages/DashboardPage/cards/OperatingSystems/OperatingSystems.tsx b/frontend/pages/DashboardPage/cards/OperatingSystems/OperatingSystems.tsx
index 20284a4f96..b8c469d366 100644
--- a/frontend/pages/DashboardPage/cards/OperatingSystems/OperatingSystems.tsx
+++ b/frontend/pages/DashboardPage/cards/OperatingSystems/OperatingSystems.tsx
@@ -14,7 +14,7 @@ import {
 import { PlatformValueOptions } from "utilities/constants";
 
 import Spinner from "components/Spinner";
-import TableDataError from "components/DataError";
+import DataError from "components/DataError";
 import LastUpdatedText from "components/LastUpdatedText";
 import CustomLink from "components/CustomLink";
 import { AxiosError } from "axios";
@@ -142,7 +142,7 @@ const OperatingSystems = ({
       )}
       <div style={opacity}>
         {error?.status && error?.status >= 500 ? (
-          <TableDataError card />
+          <DataError verticalPaddingSize="pad-large" />
         ) : (
           <OSTable
             currentTeamId={currentTeamId}
diff --git a/frontend/pages/DashboardPage/cards/Software/Software.tsx b/frontend/pages/DashboardPage/cards/Software/Software.tsx
index 60c0d08510..06db312f5a 100644
--- a/frontend/pages/DashboardPage/cards/Software/Software.tsx
+++ b/frontend/pages/DashboardPage/cards/Software/Software.tsx
@@ -11,7 +11,7 @@ import { ITableQueryData } from "components/TableContainer/TableContainer";
 import TabNav from "components/TabNav";
 import TabText from "components/TabText";
 import TableContainer from "components/TableContainer";
-import TableDataError from "components/DataError";
+import DataError from "components/DataError";
 import Spinner from "components/Spinner";
 import EmptySoftwareTable from "pages/SoftwarePage/components/tables/EmptySoftwareTable";
 
@@ -90,7 +90,7 @@ const Software = ({
             </TabList>
             <TabPanel>
               {!isSoftwareFetching && errorSoftware ? (
-                <TableDataError />
+                <DataError verticalPaddingSize="pad-large" />
               ) : (
                 <TableContainer
                   columnConfigs={tableHeaders}
@@ -113,7 +113,7 @@ const Software = ({
             </TabPanel>
             <TabPanel>
               {!isSoftwareFetching && errorSoftware ? (
-                <TableDataError />
+                <DataError verticalPaddingSize="pad-large" />
               ) : (
                 <TableContainer
                   columnConfigs={tableHeaders}
diff --git a/frontend/pages/DashboardPage/sections/MetricsHostCounts/MetricsHostCounts.tsx b/frontend/pages/DashboardPage/sections/MetricsHostCounts/MetricsHostCounts.tsx
index 90d77e3562..3b3fd67acf 100644
--- a/frontend/pages/DashboardPage/sections/MetricsHostCounts/MetricsHostCounts.tsx
+++ b/frontend/pages/DashboardPage/sections/MetricsHostCounts/MetricsHostCounts.tsx
@@ -3,7 +3,6 @@ import React from "react";
 import { LOW_DISK_SPACE_GB } from "pages/DashboardPage/helpers";
 
 import { PlatformValueOptions } from "utilities/constants";
-import DataError from "components/DataError";
 import LowDiskSpaceHosts from "../../cards/LowDiskSpaceHosts";
 import MissingHosts from "../../cards/MissingHosts";
 import TotalHosts from "../../cards/TotalHosts";
@@ -12,7 +11,6 @@ const baseClass = "metrics-host-counts";
 
 interface IPlatformHostCountsProps {
   currentTeamId: number | undefined;
-  errorHosts: boolean;
   selectedPlatform?: PlatformValueOptions;
   totalHostCount?: number;
   isPremiumTier?: boolean;
@@ -23,7 +21,6 @@ interface IPlatformHostCountsProps {
 
 const MetricsHostCounts = ({
   currentTeamId,
-  errorHosts,
   selectedPlatform,
   totalHostCount,
   isPremiumTier,
@@ -31,10 +28,6 @@ const MetricsHostCounts = ({
   lowDiskSpaceCount,
   selectedPlatformLabelId,
 }: IPlatformHostCountsProps): JSX.Element => {
-  if (errorHosts) {
-    return <DataError card />;
-  }
-
   const TotalHostsCard = (
     <TotalHosts
       totalCount={totalHostCount}
diff --git a/frontend/pages/DashboardPage/sections/PlatformHostCounts/PlatformHostCounts.tsx b/frontend/pages/DashboardPage/sections/PlatformHostCounts/PlatformHostCounts.tsx
index 9ccc53b938..203ca80fd8 100644
--- a/frontend/pages/DashboardPage/sections/PlatformHostCounts/PlatformHostCounts.tsx
+++ b/frontend/pages/DashboardPage/sections/PlatformHostCounts/PlatformHostCounts.tsx
@@ -7,6 +7,7 @@ import { PLATFORM_NAME_TO_LABEL_NAME } from "pages/DashboardPage/helpers";
 import { IHostSummary } from "interfaces/host_summary";
 import { PlatformValueOptions } from "utilities/constants";
 import DataError from "components/DataError";
+import Card from "components/Card";
 
 import HostCountCard from "../../cards/HostCountCard";
 
@@ -23,7 +24,6 @@ interface IPlatformHostCountsProps {
   ipadosCount: number;
   androidCount: number;
   builtInLabels?: IHostSummary["builtin_labels"];
-  errorHosts: boolean;
   selectedPlatform?: PlatformValueOptions;
   totalHostCount?: number;
 }
@@ -39,7 +39,6 @@ const PlatformHostCounts = ({
   ipadosCount,
   androidCount,
   builtInLabels,
-  errorHosts,
   selectedPlatform,
   totalHostCount,
 }: IPlatformHostCountsProps): JSX.Element => {
@@ -252,10 +251,6 @@ const PlatformHostCounts = ({
     }
   };
 
-  if (errorHosts) {
-    return <DataError card />;
-  }
-
   return <div className={baseClass}>{renderCounts(currentTeamId)}</div>;
 };
 
diff --git a/frontend/pages/ManageControlsPage/OSUpdates/components/CurrentVersionSection/CurrentVersionSection.tsx b/frontend/pages/ManageControlsPage/OSUpdates/components/CurrentVersionSection/CurrentVersionSection.tsx
index 956048b963..49bae677d0 100644
--- a/frontend/pages/ManageControlsPage/OSUpdates/components/CurrentVersionSection/CurrentVersionSection.tsx
+++ b/frontend/pages/ManageControlsPage/OSUpdates/components/CurrentVersionSection/CurrentVersionSection.tsx
@@ -104,7 +104,7 @@ const CurrentVersionSection = ({
     if (isError) {
       return (
         <DataError
-          className={`${baseClass}__error`}
+          verticalPaddingSize="pad-xxxlarge"
           description="Refresh the page to try again."
           excludeIssueLink
         />
diff --git a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareAppStoreVpp/SoftwareAppStoreVpp.tsx b/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareAppStoreVpp/SoftwareAppStoreVpp.tsx
index f852cd501f..13d32fc551 100644
--- a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareAppStoreVpp/SoftwareAppStoreVpp.tsx
+++ b/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareAppStoreVpp/SoftwareAppStoreVpp.tsx
@@ -196,7 +196,7 @@ const SoftwareAppStoreVpp = ({
     }
 
     if (errorVppInfo || errorVppApps || isErrorLabels) {
-      return <DataError className={`${baseClass}__error`} />;
+      return <DataError verticalPaddingSize="pad-xxxlarge" />;
     }
 
     if (noVppTokenUploaded) {
diff --git a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareCustomPackage/SoftwareCustomPackage.tsx b/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareCustomPackage/SoftwareCustomPackage.tsx
index 679bbe9c93..3057c99fb0 100644
--- a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareCustomPackage/SoftwareCustomPackage.tsx
+++ b/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareCustomPackage/SoftwareCustomPackage.tsx
@@ -161,7 +161,7 @@ const SoftwareCustomPackage = ({
     }
 
     if (isErrorLabels) {
-      return <DataError className={`${baseClass}__data-error`} />;
+      return <DataError verticalPaddingSize="pad-xxxlarge" />;
     }
 
     return (
diff --git a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareCustomPackage/_styles.scss b/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareCustomPackage/_styles.scss
index 0518b00ab8..79d59f0146 100644
--- a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareCustomPackage/_styles.scss
+++ b/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareCustomPackage/_styles.scss
@@ -2,8 +2,4 @@
   &__premium-message {
     margin-top: $pad-xxxlarge;
   }
-
-  &__data-error {
-    margin-top: $pad-xxxlarge;
-  }
 }
diff --git a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/FleetMaintainedAppDetailsPage.tsx b/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/FleetMaintainedAppDetailsPage.tsx
index 095fa769fd..45a6ffd5e5 100644
--- a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/FleetMaintainedAppDetailsPage.tsx
+++ b/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/FleetMaintainedAppDetailsPage.tsx
@@ -252,7 +252,7 @@ const FleetMaintainedAppDetailsPage = ({
     }
 
     if (isErrorFleetApp || isErrorLabels) {
-      return <DataError className={`${baseClass}__data-error`} />;
+      return <DataError verticalPaddingSize="pad-xxxlarge" />;
     }
 
     if (fleetApp) {
diff --git a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/_styles.scss b/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/_styles.scss
index 606a83e11f..56b01d1b1f 100644
--- a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/_styles.scss
+++ b/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/FleetMaintainedAppDetailsPage/_styles.scss
@@ -1,8 +1,4 @@
 .fleet-maintained-app-details-page {
-  &__data-error {
-    margin-top: $pad-xxlarge;
-  }
-
   &__back-to-add-software {
     margin-bottom: $pad-medium;
   }
diff --git a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/SoftwareFleetMaintained.tsx b/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/SoftwareFleetMaintained.tsx
index c0b3b0c8d8..114c1df3bb 100644
--- a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/SoftwareFleetMaintained.tsx
+++ b/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/SoftwareFleetMaintained.tsx
@@ -100,7 +100,7 @@ const SoftwareFleetMaintained = ({
   }
 
   if (isError) {
-    return <DataError className={`${baseClass}__table-error`} />;
+    return <DataError verticalPaddingSize="pad-xxxlarge" />;
   }
 
   return (
diff --git a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/_styles.scss b/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/_styles.scss
index d0b492c842..257bcf928f 100644
--- a/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/_styles.scss
+++ b/frontend/pages/SoftwarePage/SoftwareAddPage/SoftwareFleetMaintained/_styles.scss
@@ -1,5 +1,5 @@
 .software-fleet-maintained {
-  &__premium-message, &__table-error {
+  &__premium-message {
     margin-top: $pad-xxxlarge;
   }
 }
diff --git a/frontend/pages/SoftwarePage/SoftwareOS/SoftwareOS.tsx b/frontend/pages/SoftwarePage/SoftwareOS/SoftwareOS.tsx
index 3679577840..3878cd6efb 100644
--- a/frontend/pages/SoftwarePage/SoftwareOS/SoftwareOS.tsx
+++ b/frontend/pages/SoftwarePage/SoftwareOS/SoftwareOS.tsx
@@ -71,7 +71,7 @@ const SoftwareOS = ({
   }
 
   if (isError) {
-    return <TableDataError className={`${baseClass}__table-error`} />;
+    return <TableDataError verticalPaddingSize="pad-xxxlarge" />;
   }
 
   return (
diff --git a/frontend/pages/SoftwarePage/SoftwareTitles/SoftwareTitles.tsx b/frontend/pages/SoftwarePage/SoftwareTitles/SoftwareTitles.tsx
index dceab84c20..80c76985eb 100644
--- a/frontend/pages/SoftwarePage/SoftwareTitles/SoftwareTitles.tsx
+++ b/frontend/pages/SoftwarePage/SoftwareTitles/SoftwareTitles.tsx
@@ -174,7 +174,7 @@ const SoftwareTitles = ({
   }
 
   if (isTitlesError || isVersionsError || isTitlesAFIError) {
-    return <TableDataError className={`${baseClass}__table-error`} />;
+    return <TableDataError verticalPaddingSize="pad-xxxlarge" />;
   }
 
   return (
diff --git a/frontend/pages/SoftwarePage/SoftwareTitles/_styles.scss b/frontend/pages/SoftwarePage/SoftwareTitles/_styles.scss
deleted file mode 100644
index 6df9667e4d..0000000000
--- a/frontend/pages/SoftwarePage/SoftwareTitles/_styles.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.software-titles {
-  &__table-error {
-    margin-top: $pad-xxxlarge;
-  }
-}
diff --git a/frontend/pages/SoftwarePage/SoftwareVulnerabilities/SoftwareVulnerabilities.tsx b/frontend/pages/SoftwarePage/SoftwareVulnerabilities/SoftwareVulnerabilities.tsx
index fd6a2164ca..b4974e3672 100644
--- a/frontend/pages/SoftwarePage/SoftwareVulnerabilities/SoftwareVulnerabilities.tsx
+++ b/frontend/pages/SoftwarePage/SoftwareVulnerabilities/SoftwareVulnerabilities.tsx
@@ -244,7 +244,7 @@ const SoftwareVulnerabilities = ({
   }
 
   if (isError) {
-    return <TableDataError className={`${baseClass}__table-error`} />;
+    return <TableDataError verticalPaddingSize="pad-xxxlarge" />;
   }
 
   return (
diff --git a/frontend/pages/admin/IntegrationsPage/cards/ConditionalAccess/debug.test3742931232 b/frontend/pages/admin/IntegrationsPage/cards/ConditionalAccess/debug.test3742931232
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleBusinessManagerPage/AppleBusinessManagerPage.tsx b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleBusinessManagerPage/AppleBusinessManagerPage.tsx
index 2881b8b405..1386f4c185 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleBusinessManagerPage/AppleBusinessManagerPage.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleBusinessManagerPage/AppleBusinessManagerPage.tsx
@@ -159,11 +159,7 @@ const AppleBusinessManagerPage = ({ router }: { router: InjectedRouter }) => {
 
     // TODO: error UI
     if (showDataError) {
-      return (
-        <div>
-          <DataError />
-        </div>
-      );
+      return <DataError verticalPaddingSize="pad-xxxlarge" />;
     }
 
     if (abmTokens?.length === 0) {
diff --git a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleMdmPage/AppleMdmPage.tsx b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleMdmPage/AppleMdmPage.tsx
index 99c9e78616..e7699ec522 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleMdmPage/AppleMdmPage.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/AppleMdmPage/AppleMdmPage.tsx
@@ -100,7 +100,7 @@ const AppleMdmPage = ({ router }: { router: InjectedRouter }) => {
         />
         <h1>Apple Push Certificate Portal</h1>
         {showSpinner && <Spinner />}
-        {showError && <DataError />}
+        {showError && <DataError verticalPaddingSize="pad-xxxlarge" />}
         {showContent &&
           (!appleAPNInfo ? (
             <ApplePushCertSetup
diff --git a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/VppPage.tsx b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/VppPage.tsx
index 619b5b060d..637c49bd91 100644
--- a/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/VppPage.tsx
+++ b/frontend/pages/admin/IntegrationsPage/cards/MdmSettings/VppPage/VppPage.tsx
@@ -154,11 +154,7 @@ const VppPage = ({ router }: IVppPageProps) => {
 
     // TODO: error UI
     if (showDataError) {
-      return (
-        <div>
-          <DataError />
-        </div>
-      );
+      return <DataError verticalPaddingSize="pad-xxxlarge" />;
     }
 
     if (vppTokens?.length === 0) {
diff --git a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamSettings/TeamSettings.tsx b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamSettings/TeamSettings.tsx
index ce33765916..82d7b013ca 100644
--- a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamSettings/TeamSettings.tsx
+++ b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/TeamSettings/TeamSettings.tsx
@@ -283,7 +283,7 @@ const TeamSettings = ({ location, router }: ITeamSubnavProps) => {
 
   const renderForm = () => {
     if (errorLoadGlobalConfig || errorLoadTeamConfig) {
-      return <DataError />;
+      return <DataError verticalPaddingSize="pad-xxxlarge" />;
     }
     if (isLoadingTeamConfig || isLoadingAppConfig) {
       return <Spinner />;
diff --git a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/UsersPage/UsersPage.tsx b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/UsersPage/UsersPage.tsx
index f13265c05c..cb8b8d5727 100644
--- a/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/UsersPage/UsersPage.tsx
+++ b/frontend/pages/admin/TeamManagementPage/TeamDetailsWrapper/UsersPage/UsersPage.tsx
@@ -397,7 +397,7 @@ const UsersPage = ({ location, router }: ITeamSubnavProps): JSX.Element => {
       {loadingUsersError ||
       loadingTeamsError ||
       (!currentTeamDetails && !isLoadingTeams && !isLoadingUsers) ? (
-        <TableDataError />
+        <TableDataError verticalPaddingSize="pad-xxxlarge" />
       ) : (
         <TableContainer
           resultsTitle="users"
diff --git a/frontend/pages/admin/UserManagementPage/components/UsersTable/UsersTable.tsx b/frontend/pages/admin/UserManagementPage/components/UsersTable/UsersTable.tsx
index 181f07ac9d..869b7ff5f2 100644
--- a/frontend/pages/admin/UserManagementPage/components/UsersTable/UsersTable.tsx
+++ b/frontend/pages/admin/UserManagementPage/components/UsersTable/UsersTable.tsx
@@ -554,7 +554,7 @@ const UsersTable = ({ router }: IUsersTableProps): JSX.Element => {
   return (
     <>
       {tableDataError ? (
-        <TableDataError />
+        <TableDataError verticalPaddingSize="pad-xxxlarge" />
       ) : (
         <TableContainer
           columnConfigs={tableHeaders}
diff --git a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
index 23497fcd4d..a159e7dd64 100644
--- a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
+++ b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tsx
@@ -80,7 +80,7 @@ import TableContainer from "components/TableContainer";
 import InfoBanner from "components/InfoBanner/InfoBanner";
 import { ITableQueryData } from "components/TableContainer/TableContainer";
 import TableCount from "components/TableContainer/TableCount";
-import TableDataError from "components/DataError";
+import DataError from "components/DataError";
 import { IActionButtonProps } from "components/TableContainer/DataTable/ActionButton/ActionButton";
 import TeamsDropdown from "components/TeamsDropdown";
 import Spinner from "components/Spinner";
@@ -1485,7 +1485,7 @@ const ManageHostsPage = ({
     }
 
     if (hasErrors) {
-      return <TableDataError />;
+      return <DataError verticalPaddingSize="pad-xxxlarge" />;
     }
     if (maybeEmptyHosts) {
       const emptyState = () => {
diff --git a/frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx b/frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx
index 307e6823e6..04c7268ae9 100644
--- a/frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx
+++ b/frontend/pages/hosts/details/DeviceUserPage/DeviceUserPage.tsx
@@ -229,7 +229,7 @@ const DeviceUserPage = ({
   const {
     data: dupResponse,
     isLoading: isLoadingHost,
-    error: loadingDeviceUserError,
+    error: isDeviceUserError,
     refetch: refetchHostDetails,
   } = useQuery<IDeviceUserResponse, Error>(
     ["host", deviceAuthToken],
@@ -709,7 +709,7 @@ const DeviceUserPage = ({
           </ul>
         </div>
       </nav>
-      {loadingDeviceUserError ? <DeviceUserError /> : renderDeviceUserPage()}
+      {isDeviceUserError ? <DeviceUserError /> : renderDeviceUserPage()}
     </div>
   );
 };
diff --git a/frontend/pages/hosts/details/DeviceUserPage/_styles.scss b/frontend/pages/hosts/details/DeviceUserPage/_styles.scss
index 714d1cd08a..f9d56e1b41 100644
--- a/frontend/pages/hosts/details/DeviceUserPage/_styles.scss
+++ b/frontend/pages/hosts/details/DeviceUserPage/_styles.scss
@@ -48,18 +48,6 @@
     }
   }
 
-  &__error {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin: $pad-xlarge 0;
-
-    &__inner {
-      display: flex;
-      flex-direction: row;
-    }
-  }
-
   &__wrapper {
     border: solid 1px $ui-fleet-black-10;
     border-radius: 6px;
diff --git a/frontend/pages/hosts/details/cards/Activity/PastActivityFeed/PastActivityFeed.tsx b/frontend/pages/hosts/details/cards/Activity/PastActivityFeed/PastActivityFeed.tsx
index 523520740c..1a88e4c12b 100644
--- a/frontend/pages/hosts/details/cards/Activity/PastActivityFeed/PastActivityFeed.tsx
+++ b/frontend/pages/hosts/details/cards/Activity/PastActivityFeed/PastActivityFeed.tsx
@@ -29,7 +29,7 @@ const PastActivityFeed = ({
   onPreviousPage,
 }: IPastActivityFeedProps) => {
   if (isError) {
-    return <DataError className={`${baseClass}__error`} />;
+    return <DataError verticalPaddingSize="pad-large" />;
   }
 
   if (!activities) {
diff --git a/frontend/pages/hosts/details/cards/Activity/PastActivityFeed/_styles.scss b/frontend/pages/hosts/details/cards/Activity/PastActivityFeed/_styles.scss
index a317978bc5..64e0943194 100644
--- a/frontend/pages/hosts/details/cards/Activity/PastActivityFeed/_styles.scss
+++ b/frontend/pages/hosts/details/cards/Activity/PastActivityFeed/_styles.scss
@@ -36,8 +36,4 @@
       background-color: $ui-vibrant-blue-10;
     }
   }
-
-  &__error {
-    margin: $pad-xlarge 0;
-  }
 }
diff --git a/frontend/pages/hosts/details/cards/Activity/UpcomingActivityFeed/UpcomingActivityFeed.tsx b/frontend/pages/hosts/details/cards/Activity/UpcomingActivityFeed/UpcomingActivityFeed.tsx
index a53b6d144f..f9ecb7ca74 100644
--- a/frontend/pages/hosts/details/cards/Activity/UpcomingActivityFeed/UpcomingActivityFeed.tsx
+++ b/frontend/pages/hosts/details/cards/Activity/UpcomingActivityFeed/UpcomingActivityFeed.tsx
@@ -32,7 +32,7 @@ const UpcomingActivityFeed = ({
   onPreviousPage,
 }: IUpcomingActivityFeedProps) => {
   if (isError) {
-    return <DataError />;
+    return <DataError verticalPaddingSize="pad-large" />;
   }
 
   if (!activities) {
diff --git a/frontend/pages/hosts/details/cards/Activity/UpcomingActivityFeed/_styles.scss b/frontend/pages/hosts/details/cards/Activity/UpcomingActivityFeed/_styles.scss
index 5aea33e13b..be1153c83e 100644
--- a/frontend/pages/hosts/details/cards/Activity/UpcomingActivityFeed/_styles.scss
+++ b/frontend/pages/hosts/details/cards/Activity/UpcomingActivityFeed/_styles.scss
@@ -36,8 +36,4 @@
       background-color: $ui-vibrant-blue-10;
     }
   }
-
-  &__error {
-    margin: $pad-xlarge 0;
-  }
 }
diff --git a/frontend/pages/hosts/details/cards/Certificates/Certificates.tsx b/frontend/pages/hosts/details/cards/Certificates/Certificates.tsx
index 65127f387c..49c4610c5b 100644
--- a/frontend/pages/hosts/details/cards/Certificates/Certificates.tsx
+++ b/frontend/pages/hosts/details/cards/Certificates/Certificates.tsx
@@ -47,7 +47,7 @@ const CertificatesCard = ({
   onSortChange,
 }: ICertificatesProps) => {
   const renderContent = () => {
-    if (isError) return <DataError />;
+    if (isError) return <DataError verticalPaddingSize="pad-large" />;
 
     return (
       <CertificatesTable
diff --git a/frontend/pages/hosts/details/cards/Software/HostSoftware.tsx b/frontend/pages/hosts/details/cards/Software/HostSoftware.tsx
index bd2e1617e3..6737159bf7 100644
--- a/frontend/pages/hosts/details/cards/Software/HostSoftware.tsx
+++ b/frontend/pages/hosts/details/cards/Software/HostSoftware.tsx
@@ -381,7 +381,7 @@ const HostSoftware = ({
     }
     return (
       <>
-        {isError && <DataError />}
+        {isError && <DataError verticalPaddingSize="pad-xxxlarge" />}
         {!isError && (
           <HostSoftwareTable
             isLoading={
diff --git a/frontend/pages/hosts/details/cards/Software/SelfService/SelfService.tsx b/frontend/pages/hosts/details/cards/Software/SelfService/SelfService.tsx
index 4c4d4374fe..4619ff0a7e 100644
--- a/frontend/pages/hosts/details/cards/Software/SelfService/SelfService.tsx
+++ b/frontend/pages/hosts/details/cards/Software/SelfService/SelfService.tsx
@@ -312,7 +312,7 @@ const SoftwareSelfService = ({
     }
 
     if (isError) {
-      return <DataError />;
+      return <DataError verticalPaddingSize="pad-xxxlarge" />;
     }
 
     if (isEmpty || !selfServiceData) {
diff --git a/frontend/pages/policies/ManagePoliciesPage/ManagePoliciesPage.tsx b/frontend/pages/policies/ManagePoliciesPage/ManagePoliciesPage.tsx
index e03a265688..92f9364cd7 100644
--- a/frontend/pages/policies/ManagePoliciesPage/ManagePoliciesPage.tsx
+++ b/frontend/pages/policies/ManagePoliciesPage/ManagePoliciesPage.tsx
@@ -968,7 +968,7 @@ const ManagePolicyPage = ({
       // Global policies
 
       if (globalPoliciesError) {
-        return <TableDataError />;
+        return <TableDataError verticalPaddingSize="pad-xxxlarge" />;
       }
       return (
         <PoliciesTable
@@ -998,7 +998,7 @@ const ManagePolicyPage = ({
 
     // Team policies
     if (teamPoliciesError) {
-      return <TableDataError />;
+      return <TableDataError verticalPaddingSize="pad-xxxlarge" />;
     }
     return (
       <div>
diff --git a/frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx b/frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx
index 5c6cbcc503..da8d61fd66 100644
--- a/frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx
+++ b/frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.tsx
@@ -281,7 +281,7 @@ const ManageQueriesPage = ({
 
   const renderQueriesTable = () => {
     if (queriesError) {
-      return <TableDataError />;
+      return <TableDataError verticalPaddingSize="pad-xxxlarge" />;
     }
     return (
       <QueriesTable
diff --git a/frontend/pages/queries/details/QueryDetailsPage/QueryDetailsPage.tsx b/frontend/pages/queries/details/QueryDetailsPage/QueryDetailsPage.tsx
index 65dfb6fed5..79b90fc72a 100644
--- a/frontend/pages/queries/details/QueryDetailsPage/QueryDetailsPage.tsx
+++ b/frontend/pages/queries/details/QueryDetailsPage/QueryDetailsPage.tsx
@@ -401,12 +401,10 @@ const QueryDetailsPage = ({
       disabledCachingGlobally || lastEditedQueryDiscardData || !loggingSnapshot;
     const emptyCache = (queryReport?.results?.length ?? 0) === 0;
 
-    // Loading state
     if (isLoading) {
       return <Spinner />;
     }
 
-    // Error state
     if (isApiError) {
       return <DataError />;
     }