Clean up styling based on review

- Get scrolling if it is too big for the component
mofojed · Jun 14, 2024 · d8abd8f · d8abd8f
1 parent 878645c
commit d8abd8f
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 32 deletions.
diff --git a/plugins/ui/src/js/src/styles.scss b/plugins/ui/src/js/src/styles.scss
@@ -31,36 +31,6 @@
   }
 }
 
-.ui-widget-error-view {
-  display: flex;
-  flex-direction: column;
-  gap: $spacer-1;
-  flex-grow: 1;
-  max-height: 100%;
-
-  .widget-error-view-content {
-    position: relative;
-    flex-shrink: 1;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-  }
-
-  .widget-error-view-footer {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    gap: $spacer-1;
-    flex-wrap: wrap;
-    flex-shrink: 0;
-  }
-
-  .error-view {
-    flex-grow: 1;
-  }
-}
-
 .dh-react-panel-overlay {
   background-color: bg-opacity(80);
   backdrop-filter: blur(5px);
@@ -77,7 +47,8 @@
   z-index: 1000;
 
   .ui-widget-error-view {
-    max-width: 100%;
+    width: 100%;
+    overflow: auto;
   }
 }
 

diff --git a/plugins/ui/src/js/src/widget/WidgetErrorView.tsx b/plugins/ui/src/js/src/widget/WidgetErrorView.tsx
@@ -33,7 +33,7 @@ function WidgetErrorView({
   const action = getErrorAction(error);
 
   return (
-    <IllustratedMessage>
+    <IllustratedMessage UNSAFE_className="ui-widget-error-view">
       <Icon size="XXL" marginBottom="size-100">
         <FontAwesomeIcon icon={vsWarning} />
       </Icon>