fix: better error message display in data explorer (#4721)

Author: ChitlangeSahas

src/shared/components/EmptyGraphError.scss

@@ -1,6 +1,8 @@
 .empty-graph-error {
   width: 100%;
   height: 100%;
+  display: flex;
+  justify-content: space-between;
   border-radius: $cf-radius;
   background-color: $cf-grey-5;
   color: $c-dreamsicle;
@@ -25,5 +27,6 @@
 }
 
 .empty-graph-error--scroll {
+  width: 90% !important;
   margin-top: $cf-space-s;
 }

src/shared/components/EmptyGraphError.tsx

@@ -31,6 +31,12 @@ const EmptyGraphError: FunctionComponent<Props> = ({message, testID}) => {
   return (
     <div className="cell--view-empty" data-testid={testID}>
       <div className="empty-graph-error" data-testid="empty-graph-error">
+        <DapperScrollbars className="empty-graph-error--scroll" autoHide={true}>
+          <pre>
+            <Icon glyph={IconFont.AlertTriangle} />
+            <code className="cell--error-message"> {message}</code>
+          </pre>
+        </DapperScrollbars>
         <CopyToClipboard text={message}>
           <Button
             size={ComponentSize.ExtraSmall}
@@ -41,12 +47,6 @@ const EmptyGraphError: FunctionComponent<Props> = ({message, testID}) => {
             className="empty-graph-error--copy"
           />
         </CopyToClipboard>
-        <DapperScrollbars className="empty-graph-error--scroll" autoHide={true}>
-          <pre>
-            <Icon glyph={IconFont.AlertTriangle} />
-            <code className="cell--error-message"> {message}</code>
-          </pre>
-        </DapperScrollbars>
       </div>
     </div>
   )