diff --git a/js_modules/dagster-ui/packages/ui-components/src/components/NonIdealState.tsx b/js_modules/dagster-ui/packages/ui-components/src/components/NonIdealState.tsx
index 7b83606ed5fe8..037f355b399ce 100644
--- a/js_modules/dagster-ui/packages/ui-components/src/components/NonIdealState.tsx
+++ b/js_modules/dagster-ui/packages/ui-components/src/components/NonIdealState.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import styled from 'styled-components';
 
 import {Box} from './Box';
 import {Colors} from './Color';
@@ -27,11 +28,10 @@ export const NonIdealState = ({
   const singleContentElement = [title, description, action].filter(Boolean).length === 1;
 
   return (
-    <Box
+    <NonIdealStateWrapper
       flex={{gap: 20, alignItems: singleContentElement ? 'center' : 'flex-start'}}
       background={Colors.backgroundLight()}
       padding={24}
-      className="non-ideal-state-parent-box"
       style={{
         margin: 'auto',
         borderRadius: 8,
@@ -59,6 +59,8 @@ export const NonIdealState = ({
         {description && <div style={{color: Colors.textDefault()}}>{description}</div>}
         {action}
       </Box>
-    </Box>
+    </NonIdealStateWrapper>
   );
 };
+
+export const NonIdealStateWrapper = styled(Box)``;
diff --git a/js_modules/dagster-ui/packages/ui-core/src/ticks/SensorDryRunDialog.tsx b/js_modules/dagster-ui/packages/ui-core/src/ticks/SensorDryRunDialog.tsx
index 7b2d3033b9644..1cd0bda5aad43 100644
--- a/js_modules/dagster-ui/packages/ui-core/src/ticks/SensorDryRunDialog.tsx
+++ b/js_modules/dagster-ui/packages/ui-core/src/ticks/SensorDryRunDialog.tsx
@@ -9,6 +9,7 @@ import {
   Group,
   Icon,
   NonIdealState,
+  NonIdealStateWrapper,
   Spinner,
   Subheading,
   Tag,
@@ -529,7 +530,7 @@ const ComputedCursorGrid = styled.div`
 `;
 
 const SkipReasonNonIdealStateWrapper = styled.div`
-  .non-ideal-state-parent-box {
+  ${NonIdealStateWrapper} {
     margin: auto !important;
     width: unset !important;
     max-width: unset !important;