fix: use generic error component, tab padding fixes (#6563)

* fix: use generic error component, tab padding fixes

* fix: script error padding

* rename errorMessage to error banner, move to ui folder

* fix: replace errorAlert with errorBanner component

* show orange dot always

packages/bruno-app/src/ui/ErrorBanner/StyledWrapper.js

@@ -0,0 +1,44 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  max-height: 200px;
+  min-height: 70px;
+  overflow-y: auto;
+  background-color: ${(props) => props.theme.background.base};
+  border: solid 1px ${(props) => props.theme.border.border2};
+  border-left: 4px solid ${(props) => props.theme.colors.text.danger};
+  border-radius: ${(props) => props.theme.border.radius.base};
+  
+  .close-button {
+    opacity: 0.7;
+    transition: opacity 0.2s;
+    
+    &:hover {
+      opacity: 1;
+    }
+    
+    svg {
+      color: ${(props) => props.theme.text};
+    }
+  }
+  
+  .error-title {
+    font-weight: 500;
+    margin-bottom: 0.375rem;
+    color: ${(props) => props.theme.colors.text.danger};
+  }
+  
+  .error-message {
+    font-family: monospace;
+    font-size: ${(props) => props.theme.font.size.xs};
+    line-height: 1.25rem;
+    white-space: pre-wrap;
+    word-break: break-all;
+    color: ${(props) => props.theme.text};
+  }
+
+  .separator {
+    border-top: 1px solid ${(props) => props.theme.border.border1};
+  }
+`;
+export default StyledWrapper;

packages/bruno-app/src/ui/ErrorBanner/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { IconX } from '@tabler/icons';
+import StyledWrapper from './StyledWrapper';
+
+const ErrorBanner = ({ errors, onClose, className = '' }) => {
+  if (!errors || errors.length === 0) return null;
+
+  return (
+    <StyledWrapper className={className}>
+      <div className="flex items-start gap-3 px-4 py-3">
+        <div className="flex-1 min-w-0">
+          {errors.map((error, index) => (
+            <div key={index}>
+              {index > 0 && <div className="separator my-2"></div>}
+              <div className="error-title">
+                {error.title}
+              </div>
+              <div className="error-message">
+                {error.message}
+              </div>
+            </div>
+          ))}
+        </div>
+        {onClose && (
+          <div
+            className="close-button flex-shrink-0 cursor-pointer"
+            onClick={onClose}
+          >
+            <IconX size={16} strokeWidth={1.5} />
+          </div>
+        )}
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default ErrorBanner;