diff --git a/frontend/packages/core/src/Feedback/alert.tsx b/frontend/packages/core/src/Feedback/alert.tsx
index d8d663b5f9..5c3de1a9f7 100644
--- a/frontend/packages/core/src/Feedback/alert.tsx
+++ b/frontend/packages/core/src/Feedback/alert.tsx
@@ -22,11 +22,13 @@ const StyledAlert = styled(MuiAlert)(
     paddingBottom: "20px",
     color: "rgba(13, 16, 48, 0.6)",
     fontSize: "14px",
+    overflow: "auto",
     ".MuiAlert-icon": {
       marginRight: "16px",
       padding: "0",
     },
     ".MuiAlert-message": {
+      maxWidth: "calc(100% - 40px)",
       width: "100%",
       padding: "0",
       ".MuiAlertTitle-root": {
diff --git a/frontend/packages/core/src/Feedback/note.tsx b/frontend/packages/core/src/Feedback/note.tsx
index d4ea784a90..45a2dbecb2 100644
--- a/frontend/packages/core/src/Feedback/note.tsx
+++ b/frontend/packages/core/src/Feedback/note.tsx
@@ -2,10 +2,13 @@ import React from "react";
 import styled from "@emotion/styled";
 import { Grid, Paper } from "@material-ui/core";
 import type { Color } from "@material-ui/lab/Alert";
-import MuiAlert from "@material-ui/lab/Alert";
 
-const Alert = styled(MuiAlert)({
-  alignItems: "center",
+import { Alert } from "./alert"
+
+const NotePanelContainer = styled(Grid)({
+  "> *": {
+    padding: "4px 0",
+  }
 });
 
 export interface NoteProps {
@@ -34,14 +37,14 @@ const Note: React.FC<NoteProps> = ({ severity = "info", children }) => {
 };
 
 const NotePanel: React.FC<NotePanelProps> = ({ direction = "column", notes, children }) => (
-  <Grid container direction={direction} justify="center" alignContent="space-between" wrap="nowrap">
+  <NotePanelContainer container direction={direction} justify="center" alignContent="space-between" wrap="nowrap">
     {notes?.map((note: NoteConfig) => (
       <Note key={note.text} severity={note.severity}>
         {note.text}
       </Note>
     ))}
     {children}
-  </Grid>
+  </NotePanelContainer>
 );
 
 export { Note, NotePanel };