Fix Dialog styles

Author: kshmidt-digma

src/components/Agentic/IncidentTemplate/MCPServerDialog/index.tsx

@@ -154,8 +154,10 @@ export const MCPServerDialog = ({
     onClose();
   };
 
+  const title = serverData?.uid ? "Set MCP Server" : "Add MCP Server";
+
   return (
-    <Dialog title={"Add MCP Server"} onClose={handleDialogClose}>
+    <Dialog title={title} onClose={handleDialogClose}>
       {steps[currentStep]}
     </Dialog>
   );

src/components/Agentic/IncidentsContainer/CreateIncidentChatOverlay/index.tsx

@@ -14,7 +14,6 @@ import { setIsCreateIncidentChatOpen } from "../../../../redux/slices/incidentsS
 import { isString } from "../../../../typeGuards/isString";
 import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent";
 import { CancelConfirmation } from "../../../common/CancelConfirmation";
-import { Dialog } from "../../common/Dialog";
 import { trackingEvents } from "../../tracking";
 import * as s from "./styles";
 
@@ -197,7 +196,7 @@ export const CreateIncidentChatOverlay = () => {
   return (
     <>
       <s.StyledOverlay>
-        <Dialog
+        <s.StyledDialog
           onClose={handleCreateIncidentChatDialogClose}
           title={"Add new incident"}
         >
@@ -211,7 +210,7 @@ export const CreateIncidentChatOverlay = () => {
             onNavigateToIncident={handleIncidentNavigate}
             typeInitialMessages={true}
           />
-        </Dialog>
+        </s.StyledDialog>
       </s.StyledOverlay>
       {isCloseConfirmationDialogVisible && (
         <s.StyledOverlay>

src/components/Agentic/IncidentsContainer/CreateIncidentChatOverlay/styles.ts

@@ -1,11 +1,16 @@
 import styled from "styled-components";
 import { Overlay } from "../../../common/Overlay";
 import { AgentChat } from "../../common/AgentChat";
+import { Dialog } from "../../common/Dialog";
 
 export const StyledOverlay = styled(Overlay)`
   align-items: center;
 `;
 
+export const StyledDialog = styled(Dialog)`
+  height: 437px;
+`;
+
 export const StyledAgentChat = styled(AgentChat)`
   ${/* TODO: change to color from the theme */ ""}
   background: #000;

src/components/Agentic/common/Dialog/index.tsx

@@ -3,8 +3,13 @@ import { CrossIcon } from "../../../common/icons/12px/CrossIcon";
 import * as s from "./styles";
 import type { DialogProps } from "./types";
 
-export const Dialog = ({ title, onClose, children }: DialogProps) => (
-  <s.Container>
+export const Dialog = ({
+  title,
+  onClose,
+  children,
+  className
+}: DialogProps) => (
+  <s.Container className={className}>
     <s.Header>
       <s.Header>
         {isString(title) ? title : null}

src/components/Agentic/common/Dialog/styles.ts

@@ -4,7 +4,8 @@ export const Container = styled.div`
   display: flex;
   flex-direction: column;
   width: 635px;
-  min-height: 420px;
+  min-height: 437px;
+  box-sizing: border-box;
   max-height: fit-content;
   padding: 12px;
   gap: 16px;

src/components/Agentic/common/Dialog/types.ts

@@ -4,4 +4,5 @@ export interface DialogProps {
   title?: string;
   onClose: () => void;
   children: ReactNode;
+  className?: string;
 }