From ba8a49929a11322950ee86026f2b53d55de229fd Mon Sep 17 00:00:00 2001
From: Tushar Vats <tushar@signoz.io>
Date: Tue, 16 Sep 2025 18:42:15 +0530
Subject: [PATCH] Converted format options menu to popover (#9094)

This pull request refactors the LogsFormatOptionsMenu component to use the Ant Design Popover for displaying format options, replacing the previous custom dropdown implementation. It also updates the related styles and removes now-unnecessary state and logic from parent components. The changes improve code maintainability, UI consistency, and simplify event handling.
---
 .../LogsFormatOptionsMenu.styles.scss         | 1152 +++++++++--------
 .../LogsFormatOptionsMenu.tsx                 |   36 +-
 .../LiveLogs/LiveLogsContainer/index.tsx      |    1 -
 .../LogsActionsContainer.tsx                  |   41 +-
 4 files changed, 616 insertions(+), 614 deletions(-)

diff --git a/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss b/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss
index 72ceaef26af2..49cf59e84158 100644
--- a/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss
+++ b/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.styles.scss
@@ -1,648 +1,654 @@
-.nested-menu-container {
-	z-index: 2;
-	position: absolute;
-	right: -2px;
-	margin: 6px 0;
-	width: 240px;
+.format-options-popover {
+	.ant-popover-inner {
+		border-radius: 4px;
+		border: 1px solid var(--bg-slate-400);
+		background: linear-gradient(
+			139deg,
+			var(--bg-ink-400) 0%,
+			var(--bg-ink-500) 98.68%
+		);
+		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(20px);
+		padding: 0;
+		margin: 6px 0;
 
-	border-radius: 4px;
+		.nested-menu-container {
+			z-index: 2;
+			position: relative;
+			right: -2px;
+			width: 240px;
 
-	border: 1px solid var(--bg-slate-400, #1d212d);
-	background: linear-gradient(
-		139deg,
-		rgba(18, 19, 23, 0.8) 0%,
-		rgba(18, 19, 23, 0.9) 98.68%
-	);
-
-	box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-	backdrop-filter: blur(20px);
-
-	.font-size-dropdown {
-		display: flex;
-		flex-direction: column;
-
-		.back-btn {
-			display: flex;
-			align-items: center;
-			gap: 4px;
-			padding: 12px;
-			border: none !important;
-			box-shadow: none !important;
-
-			.icon {
-				flex-shrink: 0;
-			}
-
-			.text {
-				color: var(--bg-slate-50);
-				font-family: Inter;
-				font-size: 11px;
-				font-style: normal;
-				font-weight: 500;
-				line-height: 20px; /* 142.857% */
-				letter-spacing: 0.14px;
-				text-transform: uppercase;
-			}
-		}
-
-		.back-btn:hover {
-			background-color: unset !important;
-		}
-
-		.content {
-			display: flex;
-			flex-direction: column;
-			.option-btn {
+			.font-size-dropdown {
 				display: flex;
-				align-items: center;
-				padding: 12px;
-				border: none !important;
-				box-shadow: none !important;
-				justify-content: space-between;
-
-				.icon {
-					flex-shrink: 0;
-				}
-				.text {
-					color: var(--bg-vanilla-400);
-					font-family: Inter;
-					font-size: 13px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: normal; /* 142.857% */
-					letter-spacing: 0.14px;
-					text-transform: capitalize;
-				}
-
-				.text:hover {
-					color: var(--bg-vanilla-300);
-				}
-			}
-
-			.option-btn:hover {
-				background-color: unset !important;
-			}
-		}
-	}
-
-	.font-size-container {
-		padding: 12px;
-		display: flex;
-		flex-direction: column;
-		gap: 12px;
-
-		.title {
-			color: var(--bg-slate-50);
-			font-family: Inter;
-			font-size: 11px;
-			font-style: normal;
-			font-weight: 500;
-			line-height: 18px; /* 163.636% */
-			letter-spacing: 0.88px;
-			text-transform: uppercase;
-		}
-
-		.value {
-			display: flex;
-			height: 20px;
-			padding: 4px 0px;
-			justify-content: space-between;
-			align-items: center;
-			border: none !important;
-			.font-value {
-				color: var(--bg-vanilla-400);
-				font-family: Inter;
-				font-size: 13px;
-				font-style: normal;
-				font-weight: 400;
-				line-height: normal;
-				letter-spacing: 0.14px;
-				text-transform: capitalize;
-			}
-			.icon {
-			}
-		}
-
-		.value:hover {
-			background-color: unset !important;
-		}
-	}
-
-	.menu-container {
-		padding: 12px;
-
-		.title {
-			font-family: Inter;
-			font-size: 11px;
-			font-weight: 500;
-			line-height: 18px;
-			letter-spacing: 0.08em;
-			text-align: left;
-			color: var(--bg-slate-50);
-		}
-
-		.menu-items {
-			display: flex;
-			gap: 8px;
-			flex-direction: column;
-			margin-top: 12px;
-		}
-
-		.item {
-			font-family: Inter;
-			font-size: 13px;
-			font-weight: 400;
-			line-height: 17px;
-			letter-spacing: 0.01em;
-			text-align: left;
-
-			.item-label {
-				display: flex;
-				color: var(--bg-vanilla-400, #c0c1c3);
-				justify-content: space-between;
-				align-items: center;
-			}
-
-			cursor: pointer;
-		}
-	}
-
-	.horizontal-line {
-		height: 1px;
-		background: #1d212d;
-	}
-
-	.max-lines-per-row {
-		padding: 12px;
-
-		.title {
-			color: var(--bg-slate-50);
-			font-family: Inter;
-			font-size: 11px;
-			font-style: normal;
-			font-weight: 500;
-			line-height: 18px; /* 163.636% */
-			letter-spacing: 0.88px;
-			text-transform: uppercase;
-
-			margin-bottom: 12px;
-
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-
-			.lucide {
-				color: var(--bg-vanilla-400, #c0c1c3);
-				cursor: pointer;
-			}
-		}
-
-		.max-lines-per-row-input {
-			display: flex;
-
-			.ant-input-number-handler-wrap {
-				display: none;
-			}
-
-			.ant-input-number {
-				min-width: 36px;
-				width: auto;
-				border-right: none;
-				border-left: none;
-				border-top: 1px solid var(--bg-slate-400);
-				border-bottom: 1px solid var(--bg-slate-400);
-				text-align: center;
-				height: 26px;
-				border-radius: 0;
-
-				&:active,
-				&:focus {
-					border: none;
-					box-shadow: none;
-				}
-			}
-
-			.ant-input-number-focused {
-				box-shadow: none !important;
-			}
-
-			.ant-input-number-input-wrap {
-				input {
-					text-align: center;
-					font-size: 13px;
-
-					&:active,
-					&:focus {
-						border: none;
-					}
-				}
-
-				&:active,
-				&:focus {
-					border: none;
-				}
-			}
-
-			.periscope-btn {
-				box-shadow: none;
-				padding: 6px 12px;
-				height: 26px;
-
-				border-radius: 0px 1px 1px 0px;
-				background: var(--bg-ink-300, #16181d);
-			}
-		}
-	}
-
-	.add-new-column-container {
-		display: flex;
-		flex-direction: column;
-
-		.add-new-column-header {
-			display: flex;
-			flex-direction: column;
-			padding: 8px;
-			gap: 8px;
-
-			.back-icon {
-				cursor: pointer;
-			}
-
-			.title {
-				display: flex;
-				gap: 4px;
-				align-items: center;
-				color: var(--bg-slate-50);
-				text-transform: uppercase;
-				font-size: 11px;
-				font-weight: 500;
-				line-height: 18px;
-				letter-spacing: 0.88px;
-			}
-		}
-
-		.add-new-column-content {
-			display: flex;
-			flex-direction: column;
-
-			padding-bottom: 16px;
-
-			min-height: 240px;
-			max-height: 400px;
-
-			.loading-container {
-				padding: 8px;
-			}
-
-			.column-format-new-options {
-				overflow-y: auto;
-				overflow-x: hidden;
-
-				.column-name {
-					padding: 4px 8px;
-					border-radius: 1px;
-					color: var(--bg-vanilla-400, #c0c1c3);
-					font-family: Inter;
-					font-size: 13px;
-					font-style: normal;
-					font-weight: 400;
-					line-height: 20px; /* 142.857% */
-					letter-spacing: -0.07px;
-
-					&.selected {
-						background-color: var(--bg-ink-200);
-						cursor: pointer;
-					}
-				}
-
-				&::-webkit-scrollbar {
-					height: 1rem;
-					width: 0.2rem;
-				}
-			}
-		}
-	}
-
-	.selected-item-content-container {
-		.add-new-column-header {
-			padding: 8px;
-		}
-
-		.title {
-			color: var(--bg-slate-50);
-			font-family: Inter;
-			font-size: 11px;
-			font-style: normal;
-			font-weight: 500;
-			line-height: 18px; /* 163.636% */
-			letter-spacing: 0.88px;
-			text-transform: uppercase;
-
-			margin-bottom: 12px;
-
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-
-			.lucide {
-				color: var(--bg-vanilla-400, #c0c1c3);
-				cursor: pointer;
-			}
-		}
-
-		.horizontal-line {
-			height: 1px;
-			background: #1d212d;
-		}
-
-		.loading-container {
-			margin: 12px 0;
-		}
-
-		.item-content {
-			padding: 12px;
-
-			.column-format,
-			.column-format-new-options {
-				display: flex;
-				gap: 12px;
 				flex-direction: column;
-				margin-top: 12px;
 
-				.column-name {
-					color: var(--bg-vanilla-400, #c0c1c3);
+				.back-btn {
+					display: flex;
+					align-items: center;
+					gap: 4px;
+					padding: 12px;
+					border: none !important;
+					box-shadow: none !important;
+
+					.icon {
+						flex-shrink: 0;
+					}
+
+					.text {
+						color: var(--bg-slate-50);
+						font-family: Inter;
+						font-size: 11px;
+						font-style: normal;
+						font-weight: 500;
+						line-height: 20px; /* 142.857% */
+						letter-spacing: 0.14px;
+						text-transform: uppercase;
+					}
+				}
+
+				.back-btn:hover {
+					background-color: unset !important;
+				}
+
+				.content {
+					display: flex;
+					flex-direction: column;
+					.option-btn {
+						display: flex;
+						align-items: center;
+						padding: 12px;
+						border: none !important;
+						box-shadow: none !important;
+						justify-content: space-between;
+
+						.icon {
+							flex-shrink: 0;
+						}
+						.text {
+							color: var(--bg-vanilla-400);
+							font-family: Inter;
+							font-size: 13px;
+							font-style: normal;
+							font-weight: 400;
+							line-height: normal; /* 142.857% */
+							letter-spacing: 0.14px;
+							text-transform: capitalize;
+						}
+
+						.text:hover {
+							color: var(--bg-vanilla-300);
+						}
+					}
+
+					.option-btn:hover {
+						background-color: unset !important;
+					}
+				}
+			}
+
+			.font-size-container {
+				padding: 12px;
+				display: flex;
+				flex-direction: column;
+				gap: 12px;
+
+				.title {
+					color: var(--bg-slate-50);
+					font-family: Inter;
+					font-size: 11px;
+					font-style: normal;
+					font-weight: 500;
+					line-height: 18px; /* 163.636% */
+					letter-spacing: 0.88px;
+					text-transform: uppercase;
+				}
+
+				.value {
+					display: flex;
+					height: 20px;
+					padding: 4px 0px;
+					justify-content: space-between;
+					align-items: center;
+					border: none !important;
+					.font-value {
+						color: var(--bg-vanilla-400);
+						font-family: Inter;
+						font-size: 13px;
+						font-style: normal;
+						font-weight: 400;
+						line-height: normal;
+						letter-spacing: 0.14px;
+						text-transform: capitalize;
+					}
+					.icon {
+					}
+				}
+
+				.value:hover {
+					background-color: unset !important;
+				}
+			}
+
+			.menu-container {
+				padding: 12px;
+
+				.title {
+					font-family: Inter;
+					font-size: 11px;
+					font-weight: 500;
+					line-height: 18px;
+					letter-spacing: 0.08em;
+					text-align: left;
+					color: var(--bg-slate-50);
+				}
+
+				.menu-items {
+					display: flex;
+					gap: 8px;
+					flex-direction: column;
+					margin-top: 12px;
+				}
+
+				.item {
 					font-family: Inter;
 					font-size: 13px;
-					font-style: normal;
 					font-weight: 400;
-					line-height: 20px; /* 142.857% */
-					letter-spacing: -0.07px;
+					line-height: 17px;
+					letter-spacing: 0.01em;
+					text-align: left;
+
+					.item-label {
+						display: flex;
+						color: var(--bg-vanilla-400, #c0c1c3);
+						justify-content: space-between;
+						align-items: center;
+					}
+
+					cursor: pointer;
+				}
+			}
+
+			.horizontal-line {
+				height: 1px;
+				background: #1d212d;
+			}
+
+			.max-lines-per-row {
+				padding: 12px;
+
+				.title {
+					color: var(--bg-slate-50);
+					font-family: Inter;
+					font-size: 11px;
+					font-style: normal;
+					font-weight: 500;
+					line-height: 18px; /* 163.636% */
+					letter-spacing: 0.88px;
+					text-transform: uppercase;
+
+					margin-bottom: 12px;
 
 					display: flex;
 					justify-content: space-between;
 					align-items: center;
+
+					.lucide {
+						color: var(--bg-vanilla-400, #c0c1c3);
+						cursor: pointer;
+					}
+				}
+
+				.max-lines-per-row-input {
+					display: flex;
+
+					.ant-input-number-handler-wrap {
+						display: none;
+					}
+
+					.ant-input-number {
+						min-width: 36px;
+						width: auto;
+						border-right: none;
+						border-left: none;
+						border-top: 1px solid var(--bg-slate-400);
+						border-bottom: 1px solid var(--bg-slate-400);
+						text-align: center;
+						height: 26px;
+						border-radius: 0;
+
+						&:active,
+						&:focus {
+							border: none;
+							box-shadow: none;
+						}
+					}
+
+					.ant-input-number-focused {
+						box-shadow: none !important;
+					}
+
+					.ant-input-number-input-wrap {
+						input {
+							text-align: center;
+							font-size: 13px;
+
+							&:active,
+							&:focus {
+								border: none;
+							}
+						}
+
+						&:active,
+						&:focus {
+							border: none;
+						}
+					}
+
+					.periscope-btn {
+						box-shadow: none;
+						padding: 6px 12px;
+						height: 26px;
+
+						border-radius: 0px 1px 1px 0px;
+						background: var(--bg-ink-300, #16181d);
+					}
+				}
+			}
+
+			.add-new-column-container {
+				display: flex;
+				flex-direction: column;
+
+				.add-new-column-header {
+					display: flex;
+					flex-direction: column;
+					padding: 8px;
 					gap: 8px;
 
-					cursor: pointer;
-
-					&.default-column {
-						color: var(--bg-vanilla-400, #c0c1c3);
-						cursor: not-allowed;
+					.back-icon {
+						cursor: pointer;
 					}
 
-					&.no-columns-selected {
-						color: var(--bg-slate-100);
-						font-size: 12px;
-						cursor: not-allowed;
+					.title {
+						display: flex;
+						gap: 4px;
+						align-items: center;
+						color: var(--bg-slate-50);
+						text-transform: uppercase;
+						font-size: 11px;
+						font-weight: 500;
+						line-height: 18px;
+						letter-spacing: 0.88px;
+					}
+				}
+
+				.add-new-column-content {
+					display: flex;
+					flex-direction: column;
+
+					padding-bottom: 16px;
+
+					min-height: 240px;
+					max-height: 400px;
+
+					.loading-container {
+						padding: 8px;
 					}
 
-					&.add-new-column-btn {
+					.column-format-new-options {
+						overflow-y: auto;
+						overflow-x: hidden;
+
+						.column-name {
+							padding: 4px 8px;
+							border-radius: 1px;
+							color: var(--bg-vanilla-400, #c0c1c3);
+							font-family: Inter;
+							font-size: 13px;
+							font-style: normal;
+							font-weight: 400;
+							line-height: 20px; /* 142.857% */
+							letter-spacing: -0.07px;
+
+							&.selected {
+								background-color: var(--bg-ink-200);
+								cursor: pointer;
+							}
+						}
+
+						&::-webkit-scrollbar {
+							height: 1rem;
+							width: 0.2rem;
+						}
+					}
+				}
+			}
+
+			.selected-item-content-container {
+				.add-new-column-header {
+					padding: 8px;
+				}
+
+				.title {
+					color: var(--bg-slate-50);
+					font-family: Inter;
+					font-size: 11px;
+					font-style: normal;
+					font-weight: 500;
+					line-height: 18px; /* 163.636% */
+					letter-spacing: 0.88px;
+					text-transform: uppercase;
+
+					margin-bottom: 12px;
+
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+
+					.lucide {
 						color: var(--bg-vanilla-400, #c0c1c3);
 						cursor: pointer;
 					}
+				}
 
-					.name {
-						flex: 1;
-						overflow: hidden;
-						white-space: nowrap;
-						overflow: hidden;
-						text-overflow: ellipsis;
+				.horizontal-line {
+					height: 1px;
+					background: #1d212d;
+				}
 
-						cursor: pointer;
+				.loading-container {
+					margin: 12px 0;
+				}
+
+				.item-content {
+					padding: 12px;
+
+					.column-format,
+					.column-format-new-options {
+						display: flex;
+						gap: 12px;
+						flex-direction: column;
+						margin-top: 12px;
+
+						.column-name {
+							color: var(--bg-vanilla-400, #c0c1c3);
+							font-family: Inter;
+							font-size: 13px;
+							font-style: normal;
+							font-weight: 400;
+							line-height: 20px; /* 142.857% */
+							letter-spacing: -0.07px;
+
+							display: flex;
+							justify-content: space-between;
+							align-items: center;
+							gap: 8px;
+
+							cursor: pointer;
+
+							&.default-column {
+								color: var(--bg-vanilla-400, #c0c1c3);
+								cursor: not-allowed;
+							}
+
+							&.no-columns-selected {
+								color: var(--bg-slate-100);
+								font-size: 12px;
+								cursor: not-allowed;
+							}
+
+							&.add-new-column-btn {
+								color: var(--bg-vanilla-400, #c0c1c3);
+								cursor: pointer;
+							}
+
+							.name {
+								flex: 1;
+								overflow: hidden;
+								white-space: nowrap;
+								overflow: hidden;
+								text-overflow: ellipsis;
+
+								cursor: pointer;
+							}
+
+							.delete-btn {
+								display: none;
+								flex: 0 0 16px;
+								cursor: pointer;
+							}
+
+							&:hover {
+								.delete-btn {
+									display: block;
+								}
+							}
+						}
+
+						overflow-x: hidden;
+
+						&::-webkit-scrollbar {
+							height: 1rem;
+							width: 0.2rem;
+						}
 					}
 
-					.delete-btn {
-						display: none;
-						flex: 0 0 16px;
-						cursor: pointer;
+					.column-format {
+						max-height: 150px;
+						overflow: auto;
+						overflow-x: hidden;
 					}
 
-					&:hover {
-						.delete-btn {
-							display: block;
+					.column-format-new-options {
+						max-height: 150px;
+						overflow-y: auto;
+						overflow-x: hidden;
+					}
+
+					.column-divider {
+						margin: 12px 0;
+						border-top: 2px solid var(--bg-slate-400);
+					}
+				}
+			}
+
+			&.active {
+				.nested-menu-container {
+					backdrop-filter: blur(18px);
+
+					.item {
+						.item-label {
+							color: var(--bg-vanilla-400);
 						}
 					}
 				}
 
-				overflow-x: hidden;
+				.selected-item-content-container {
+					width: 110%;
+					margin-left: -5%;
 
-				&::-webkit-scrollbar {
-					height: 1rem;
-					width: 0.2rem;
+					border-radius: 4px;
+					border: 1px solid var(--bg-slate-400);
+					background: linear-gradient(
+						139deg,
+						rgba(18, 19, 23, 0.8) 0%,
+						rgba(18, 19, 23, 0.9) 98.68%
+					);
+
+					box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+					backdrop-filter: blur(20px);
+
+					.column-format {
+						margin-top: 0px;
+					}
 				}
 			}
-
-			.column-format {
-				max-height: 150px;
-				overflow: auto;
-				overflow-x: hidden;
-			}
-
-			.column-format-new-options {
-				max-height: 150px;
-				overflow-y: auto;
-				overflow-x: hidden;
-			}
-
-			.column-divider {
-				margin: 12px 0;
-				border-top: 2px solid var(--bg-slate-400);
-			}
-		}
-	}
-
-	&.active {
-		.nested-menu-container {
-			backdrop-filter: blur(18px);
-
-			.item {
-				.item-label {
-					color: var(--bg-vanilla-400);
-				}
-			}
-		}
-
-		.selected-item-content-container {
-			width: 110%;
-			margin-left: -5%;
-
-			border-radius: 4px;
-			border: 1px solid var(--bg-slate-400);
-			background: linear-gradient(
-				139deg,
-				rgba(18, 19, 23, 0.8) 0%,
-				rgba(18, 19, 23, 0.9) 98.68%
-			);
-
-			box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
-			backdrop-filter: blur(20px);
-
-			.column-format {
-				margin-top: 0px;
-			}
 		}
 	}
 }
 
 .lightMode {
-	.nested-menu-container {
-		border: 1px solid var(--bg-vanilla-300);
-		background: linear-gradient(
-			139deg,
-			rgba(255, 255, 255, 0.8) 0%,
-			rgba(255, 255, 255, 0.9) 98.68%
-		);
+	.format-options-popover {
+		.ant-popover-inner {
+			border: 1px solid var(--bg-vanilla-300);
+			background: linear-gradient(
+				139deg,
+				rgba(255, 255, 255, 0.8) 0%,
+				rgba(255, 255, 255, 0.9) 98.68%
+			);
+			box-shadow: 4px 10px 16px 2px rgba(255, 255, 255, 0.2);
 
-		box-shadow: 4px 10px 16px 2px rgba(255, 255, 255, 0.2);
-
-		.font-size-dropdown {
-			.back-btn {
-				.text {
-					color: var(--bg-ink-400);
-				}
-			}
-
-			.content {
-				.option-btn {
-					.text {
-						color: var(--bg-ink-400);
+			.nested-menu-container {
+				.font-size-dropdown {
+					.back-btn {
+						.text {
+							color: var(--bg-ink-400);
+						}
 					}
 
-					.text:hover {
-						color: var(--bg-ink-300);
-					}
-				}
-			}
-		}
+					.content {
+						.option-btn {
+							.text {
+								color: var(--bg-ink-400);
+							}
 
-		.add-new-column-container {
-			.add-new-column-header {
-				.title {
-					color: var(--bg-ink-100);
-				}
-			}
-
-			.add-new-column-content {
-				.column-format-new-options {
-					.column-name {
-						color: var(--bg-ink-400);
-
-						&.selected {
-							background-color: var(--bg-vanilla-400);
+							.text:hover {
+								color: var(--bg-ink-300);
+							}
 						}
 					}
 				}
 
-				.loading-container {
-					color: var(--bg-ink-400);
+				.add-new-column-container {
+					.add-new-column-header {
+						.title {
+							color: var(--bg-ink-100);
+						}
+					}
+
+					.add-new-column-content {
+						.column-format-new-options {
+							.column-name {
+								color: var(--bg-ink-400);
+
+								&.selected {
+									background-color: var(--bg-vanilla-400);
+								}
+							}
+						}
+
+						.loading-container {
+							color: var(--bg-ink-400);
+						}
+					}
 				}
-			}
-		}
 
-		.font-size-container {
-			.title {
-				color: var(--bg-ink-100);
-			}
+				.font-size-container {
+					.title {
+						color: var(--bg-ink-100);
+					}
 
-			.value {
-				.font-value {
-					color: var(--bg-ink-400);
+					.value {
+						.font-value {
+							color: var(--bg-ink-400);
+						}
+					}
 				}
-			}
-		}
 
-		.horizontal-line {
-			background: var(--bg-vanilla-300);
-		}
-
-		.item-content {
-			.column-divider {
-				border-top: 2px solid var(--bg-vanilla-300);
-			}
-		}
-
-		.max-lines-per-row {
-			.title {
-				color: var(--bg-ink-200);
-
-				.lucide {
-					color: var(--bg-ink-300);
-				}
-			}
-
-			.max-lines-per-row-input {
-				border: 1px solid var(--bg-vanilla-300);
-
-				.periscope-btn {
+				.horizontal-line {
 					background: var(--bg-vanilla-300);
 				}
-			}
-		}
 
-		.menu-container {
-			.title {
-				color: var(--bg-ink-200);
-			}
-
-			.item {
-				.item-label {
-					color: var(--bg-ink-400);
+				.item-content {
+					.column-divider {
+						border-top: 2px solid var(--bg-vanilla-300);
+					}
 				}
-			}
-		}
 
-		.selected-item-content-container {
-			.title {
-				color: var(--bg-ink-200);
+				.max-lines-per-row {
+					.title {
+						color: var(--bg-ink-200);
 
-				.lucide {
-					color: var(--bg-ink-300);
+						.lucide {
+							color: var(--bg-ink-300);
+						}
+					}
+
+					.max-lines-per-row-input {
+						border: 1px solid var(--bg-vanilla-300);
+
+						.periscope-btn {
+							background: var(--bg-vanilla-300);
+						}
+					}
 				}
-			}
 
-			.horizontal-line {
-				background: var(--bg-vanilla-300);
-			}
+				.menu-container {
+					.title {
+						color: var(--bg-ink-200);
+					}
 
-			.item-content {
-				.max-lines-per-row-input {
-					border: 1px solid var(--bg-vanilla-300);
+					.item {
+						.item-label {
+							color: var(--bg-ink-400);
+						}
+					}
+				}
 
-					.periscope-btn {
+				.selected-item-content-container {
+					.title {
+						color: var(--bg-ink-200);
+
+						.lucide {
+							color: var(--bg-ink-300);
+						}
+					}
+
+					.horizontal-line {
 						background: var(--bg-vanilla-300);
 					}
-				}
 
-				.column-format,
-				.column-format-new-options {
-					.column-name {
-						color: var(--bg-ink-300);
+					.item-content {
+						.max-lines-per-row-input {
+							border: 1px solid var(--bg-vanilla-300);
+
+							.periscope-btn {
+								background: var(--bg-vanilla-300);
+							}
+						}
+
+						.column-format,
+						.column-format-new-options {
+							.column-name {
+								color: var(--bg-ink-300);
+							}
+						}
 					}
 				}
-			}
-		}
 
-		&.active {
-			.nested-menu-container {
-				backdrop-filter: blur(18px);
+				&.active {
+					.nested-menu-container {
+						backdrop-filter: blur(18px);
 
-				.item {
-					.item-label {
-						color: var(--bg-ink-300);
+						.item {
+							.item-label {
+								color: var(--bg-ink-300);
+							}
+						}
+					}
+
+					.selected-item-content-container {
+						border: 1px solid var(--bg-vanilla-300);
+						background: linear-gradient(
+							139deg,
+							rgba(255, 255, 255, 0.8) 0%,
+							rgba(255, 255, 255, 0.9) 98.68%
+						);
+
+						box-shadow: 4px 10px 16px 2px rgba(255, 255, 255, 0.2);
 					}
 				}
 			}
-
-			.selected-item-content-container {
-				border: 1px solid var(--bg-vanilla-300);
-				background: linear-gradient(
-					139deg,
-					rgba(255, 255, 255, 0.8) 0%,
-					rgba(255, 255, 255, 0.9) 98.68%
-				);
-
-				box-shadow: 4px 10px 16px 2px rgba(255, 255, 255, 0.2);
-			}
 		}
 	}
 }
diff --git a/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx b/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx
index 3dfe0869504f..24f590b70575 100644
--- a/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx
+++ b/frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx
@@ -3,24 +3,30 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import './LogsFormatOptionsMenu.styles.scss';
 
-import { Button, Input, InputNumber, Tooltip, Typography } from 'antd';
+import { Button, Input, InputNumber, Popover, Tooltip, Typography } from 'antd';
 import { DefaultOptionType } from 'antd/es/select';
 import cx from 'classnames';
 import { LogViewMode } from 'container/LogsTable';
 import { FontSize, OptionsMenuConfig } from 'container/OptionsMenu/types';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
-import { Check, ChevronLeft, ChevronRight, Minus, Plus, X } from 'lucide-react';
+import {
+	Check,
+	ChevronLeft,
+	ChevronRight,
+	Minus,
+	Plus,
+	Sliders,
+	X,
+} from 'lucide-react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 interface LogsFormatOptionsMenuProps {
-	title: string;
 	items: any;
 	selectedOptionFormat: any;
 	config: OptionsMenuConfig;
 }
 
 export default function LogsFormatOptionsMenu({
-	title,
 	items,
 	selectedOptionFormat,
 	config,
@@ -43,6 +49,7 @@ export default function LogsFormatOptionsMenu({
 	const [selectedValue, setSelectedValue] = useState<string | null>(null);
 	const listRef = useRef<HTMLDivElement>(null);
 	const initialMouseEnterRef = useRef<boolean>(false);
+	const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
 
 	const onChange = useCallback(
 		(key: LogViewMode) => {
@@ -202,7 +209,7 @@ export default function LogsFormatOptionsMenu({
 		};
 	}, [selectedValue]);
 
-	return (
+	const popoverContent = (
 		<div
 			className={cx(
 				'nested-menu-container',
@@ -344,7 +351,7 @@ export default function LogsFormatOptionsMenu({
 					</div>
 					<div className="horizontal-line" />
 					<div className="menu-container">
-						<div className="title"> {title} </div>
+						<div className="title">FORMAT</div>
 
 						<div className="menu-items">
 							{items.map(
@@ -440,4 +447,21 @@ export default function LogsFormatOptionsMenu({
 			)}
 		</div>
 	);
+	return (
+		<Popover
+			content={popoverContent}
+			trigger="click"
+			placement="bottomRight"
+			arrow={false}
+			open={isPopoverOpen}
+			onOpenChange={setIsPopoverOpen}
+			rootClassName="format-options-popover"
+		>
+			<Button
+				className="periscope-btn ghost"
+				icon={<Sliders size={14} />}
+				data-testid="periscope-btn"
+			/>
+		</Popover>
+	);
 }
diff --git a/frontend/src/container/LiveLogs/LiveLogsContainer/index.tsx b/frontend/src/container/LiveLogs/LiveLogsContainer/index.tsx
index 144c5b5b502c..d189edfcb728 100644
--- a/frontend/src/container/LiveLogs/LiveLogsContainer/index.tsx
+++ b/frontend/src/container/LiveLogs/LiveLogsContainer/index.tsx
@@ -240,7 +240,6 @@ function LiveLogsContainer(): JSX.Element {
 
 						{showFormatMenuItems && (
 							<LogsFormatOptionsMenu
-								title="FORMAT"
 								items={formatItems}
 								selectedOptionFormat={options.format}
 								config={config}
diff --git a/frontend/src/container/LogsExplorerViews/LogsActionsContainer.tsx b/frontend/src/container/LogsExplorerViews/LogsActionsContainer.tsx
index c366046307a2..c7ca5dc1b9e3 100644
--- a/frontend/src/container/LogsExplorerViews/LogsActionsContainer.tsx
+++ b/frontend/src/container/LogsExplorerViews/LogsActionsContainer.tsx
@@ -1,4 +1,4 @@
-import { Button, Switch, Typography } from 'antd';
+import { Switch, Typography } from 'antd';
 import { WsDataEvent } from 'api/common/getQueryStats';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import LogsFormatOptionsMenu from 'components/LogsFormatOptionsMenu/LogsFormatOptionsMenu';
@@ -7,9 +7,7 @@ import { LOCALSTORAGE } from 'constants/localStorage';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import Download from 'container/DownloadV2/DownloadV2';
 import { useOptionsMenu } from 'container/OptionsMenu';
-import useClickOutside from 'hooks/useClickOutside';
-import { ArrowUp10, Minus, Sliders } from 'lucide-react';
-import { useRef, useState } from 'react';
+import { ArrowUp10, Minus } from 'lucide-react';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
 
 import QueryStatus from './QueryStatus';
@@ -41,9 +39,6 @@ function LogsActionsContainer({
 	isSuccess: boolean;
 	queryStats: WsDataEvent | undefined;
 }): JSX.Element {
-	const [showFormatMenuItems, setShowFormatMenuItems] = useState(false);
-	const menuRef = useRef<HTMLDivElement>(null);
-
 	const { options, config } = useOptionsMenu({
 		storageKey: LOCALSTORAGE.LOGS_LIST_OPTIONS,
 		dataSource: DataSource.LOGS,
@@ -71,18 +66,6 @@ function LogsActionsContainer({
 		},
 	];
 
-	const handleToggleShowFormatOptions = (): void =>
-		setShowFormatMenuItems(!showFormatMenuItems);
-
-	useClickOutside({
-		ref: menuRef,
-		onClickOutside: () => {
-			if (showFormatMenuItems) {
-				setShowFormatMenuItems(false);
-			}
-		},
-	});
-
 	return (
 		<div className="logs-actions-container">
 			<div className="tab-options">
@@ -119,22 +102,12 @@ function LogsActionsContainer({
 								isLoading={isFetching}
 								fileName="log_data"
 							/>
-							<div className="format-options-container" ref={menuRef}>
-								<Button
-									className="periscope-btn ghost"
-									onClick={handleToggleShowFormatOptions}
-									icon={<Sliders size={14} />}
-									data-testid="periscope-btn"
+							<div className="format-options-container">
+								<LogsFormatOptionsMenu
+									items={formatItems}
+									selectedOptionFormat={options.format}
+									config={config}
 								/>
-
-								{showFormatMenuItems && (
-									<LogsFormatOptionsMenu
-										title="FORMAT"
-										items={formatItems}
-										selectedOptionFormat={options.format}
-										config={config}
-									/>
-								)}
 							</div>
 						</>
 					)}