diff --git a/frontend/src/container/QueryTable/BreakoutOptions.tsx b/frontend/src/container/QueryTable/BreakoutOptions.tsx
index 751339b0822a..601c124d55db 100644
--- a/frontend/src/container/QueryTable/BreakoutOptions.tsx
+++ b/frontend/src/container/QueryTable/BreakoutOptions.tsx
@@ -60,7 +60,13 @@ function BreakoutOptions({
 
 	return (
 		<div style={{ height: '200px' }}>
-			<OverlayScrollbar>
+			<OverlayScrollbar
+				options={{
+					overflow: {
+						x: 'hidden',
+					},
+				}}
+			>
 				{/* eslint-disable-next-line react/jsx-no-useless-fragment */}
 				<>
 					{isFetching ? (
diff --git a/frontend/src/periscope/components/ContextMenu/styles.scss b/frontend/src/periscope/components/ContextMenu/styles.scss
index 9c2e1857de35..48ed2fa87674 100644
--- a/frontend/src/periscope/components/ContextMenu/styles.scss
+++ b/frontend/src/periscope/components/ContextMenu/styles.scss
@@ -15,6 +15,8 @@
 	background: transparent;
 	width: 100%;
 	text-align: left;
+	white-space: normal;
+	word-break: break-all;
 
 	&:hover {
 		background-color: var(--bg-vanilla-200);
@@ -57,10 +59,15 @@
 
 	.text {
 		flex: 1;
-        font-size: 13px;
-        font-weight: var(--font-weight-normal);
-        line-height: 17px;
-        letter-spacing: 0.01em;
+		font-size: 13px;
+		font-weight: var(--font-weight-normal);
+		line-height: 17px;
+		letter-spacing: 0.01em;
+		white-space: normal;
+		word-break: break-all;
+		overflow-wrap: anywhere;
+		display: block;
+		max-width: 100%;
 	}
 }