fix: prevent the layout shift on interacting with filter, group by, ... in the query builder

2025-04-06 11:47:25 +04:30
3 changed files with 9 additions and 1 deletions
--- a/frontend/src/container/QueryBuilder/QueryBuilder.styles.scss
+++ b/frontend/src/container/QueryBuilder/QueryBuilder.styles.scss
@@ -3,6 +3,7 @@
 	border-top: 1px solid var(--bg-slate-400);
 	border-bottom: 1px solid var(--bg-slate-400);
 	background: var(--bg-ink-400);
+	width: 100%;

 	// height: 280px;
 	// overflow: hidden;
@@ -120,6 +121,9 @@
 			// height: 100%;

 			scroll-snap-type: y mandatory;
+			&-row {
+				width: 100%;
+			}

 			.query,
 			.formula {
--- a/frontend/src/container/QueryBuilder/components/Query/Query.styles.scss
+++ b/frontend/src/container/QueryBuilder/components/Query/Query.styles.scss
@@ -4,5 +4,6 @@
 }

 .qb-container {
+	width: 100%;
 	padding: 0 24px;
 }
--- a/frontend/src/container/QueryBuilder/components/Query/Query.tsx
+++ b/frontend/src/container/QueryBuilder/components/Query/Query.tsx
@@ -329,7 +329,10 @@ export const Query = memo(function Query({
 	const isVersionV4 = version && version === ENTITY_VERSION_V4;

 	return (
-		<Row gutter={[0, 12]} className={`query-builder-${version}`}>
+		<Row
+			gutter={[0, 12]}
+			className={`query-builder-queries-formula-container-row query-builder-${version}`}
+		>
 			<QBEntityOptions
 				isMetricsDataSource={isMetricsDataSource}
 				showFunctions={