fix: responsiveness issues

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -13,6 +13,7 @@ function InputWithLabel({
 	onClose,
 	labelAfter,
 	onChange,
+	className,
 }: {
 	label: string;
 	initialValue?: string | number;
@@ -21,6 +22,7 @@ function InputWithLabel({
 	onClose?: () => void;
 	labelAfter?: boolean;
 	onChange: (value: string) => void;
+	className?: string;
 }): JSX.Element {
 	const [inputValue, setInputValue] = useState<string>(
 		initialValue ? initialValue.toString() : '',
@@ -33,7 +35,7 @@ function InputWithLabel({
 
 	return (
 		<div
-			className={cx('input-with-label', {
+			className={cx('input-with-label', className, {
 				labelAfter,
 			})}
 		>
@@ -63,6 +65,7 @@ InputWithLabel.defaultProps = {
 	onClose: undefined,
 	labelAfter: false,
 	initialValue: undefined,
+	className: undefined,
 };
 
 export default InputWithLabel;

frontend/src/components/QueryBuilderV2/QueryBuilderV2.styles.scss

@@ -392,11 +392,19 @@
 		align-items: flex-start;
 		gap: 8px;
 
+		flex-wrap: wrap;
+
+		.query-search-container {
+			flex: 1;
+		}
+
 		.traces-search-filter-container {
 			display: flex;
 			flex-direction: row;
 			align-items: center;
 			gap: 8px;
+
+			width: 180px;
 		}
 
 		.ant-select {

frontend/src/components/QueryBuilderV2/QueryV2/MerticsAggregateSection/MetricsAggregateSection.styles.scss

@@ -47,6 +47,7 @@
 	.metrics-aggregation-section-content {
 		display: flex;
 		flex-direction: row;
+		flex-wrap: wrap;
 		gap: 8px;
 
 		.metrics-aggregation-section-content-item {
@@ -78,10 +79,6 @@
 				}
 			}
 		}
-
-		.space-aggregation-select {
-			min-width: 480px !important;
-		}
 	}
 }
 

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss

@@ -5,6 +5,7 @@
 
 	.add-ons-tabs {
 		display: flex;
+		flex-wrap: wrap;
 
 		.add-on-tab-title {
 			display: flex;
@@ -21,7 +22,7 @@
 		.tab {
 			border: 1px solid var(--bg-slate-400);
 			border-left: none;
-			min-width: 114px;
+			min-width: 120px;
 			height: 36px;
 			line-height: 36px;
 
@@ -111,7 +112,7 @@
 					font-size: 12px !important;
 					font-weight: 500 !important;
 					margin-top: -2px !important;
-					min-width: 400px !important;
+					width: 100% !important;
 					position: absolute !important;
 					top: 38px !important;
 					left: 0px !important;
@@ -164,6 +165,7 @@
 							overflow: hidden;
 
 							font-family: 'Space Mono', monospace !important;
+							color: var(--bg-vanilla-100) !important;
 
 							.cm-completionIcon {
 								display: none !important;
@@ -252,7 +254,7 @@
 
 .selected-add-ons-content {
 	display: grid;
-	grid-template-columns: repeat(2, 1fr);
+	grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
 	gap: 8px;
 	padding-bottom: 8px;
 	position: relative;
@@ -264,6 +266,7 @@
 
 		max-width: 100%;
 		min-width: 100%;
+		min-width: 420px;
 
 		box-sizing: border-box;
 		position: relative;

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.styles.scss

@@ -7,6 +7,12 @@
 		flex-direction: row;
 		gap: 8px;
 		align-items: flex-start;
+		flex-wrap: wrap;
+
+		.query-aggregation-select-container {
+			flex: 1;
+			min-width: 400px;
+		}
 
 		.query-aggregation-options-input {
 			width: 100%;
@@ -29,7 +35,15 @@
 			flex-direction: row;
 			align-items: center;
 			gap: 8px;
-			width: 400px;
+			max-width: 360px;
+
+			.query-aggregation-interval-input-container {
+				.query-aggregation-interval-input {
+					input {
+						max-width: 120px;
+					}
+				}
+			}
 		}
 
 		.query-aggregation-select-container {

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregation.tsx

@@ -44,6 +44,7 @@ function QueryAggregationOptions({
 						<div className="query-aggregation-interval-input-container">
 							<InputWithLabel
 								initialValue="60"
+								className="query-aggregation-interval-input"
 								label="Seconds"
 								placeholder="60"
 								type="number"

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.styles.scss

@@ -12,7 +12,7 @@
 
 		.query-where-clause-editor {
 			flex: 1;
-			min-width: 0;
+			min-width: 400px;
 		}
 
 		.query-status-container {

frontend/src/components/QueryBuilderV2/QueryV2/QueryV2.tsx

@@ -153,7 +153,9 @@ export const QueryV2 = memo(function QueryV2({
 						)}
 
 						<div className="qb-search-filter-container">
-							<QuerySearch />
+							<div className="query-search-container">
+								<QuerySearch />
+							</div>
 
 							{showSpanScopeSelector && (
 								<div className="traces-search-filter-container">

frontend/src/container/TopNav/DateTimeSelectionV2/DateTimeSelectionV2.styles.scss

@@ -31,6 +31,10 @@
 		}
 	}
 
+	.refresh-text-container {
+		display: none;
+	}
+
 	.refresh-actions {
 		display: flex;
 		flex-direction: row;
@@ -309,3 +313,11 @@
 		border-color: var(--bg-vanilla-300);
 	}
 }
+
+@media (min-width: 1400px) {
+	.date-time-selector {
+		.refresh-text-container {
+			display: block;
+		}
+	}
+}

frontend/src/container/TopNav/DateTimeSelectionV2/index.tsx

@@ -782,18 +782,22 @@ function DateTimeSelection({
 					</Button>
 				</FormItem>
 			)}
+
 			{showOldExplorerCTA && (
 				<div style={{ marginRight: 12 }}>
 					<NewExplorerCTA />
 				</div>
 			)}
+
 			{!hasSelectedTimeError && !refreshButtonHidden && showRefreshText && (
-				<RefreshText
-					{...{
-						onLastRefreshHandler,
-					}}
-					refreshButtonHidden={refreshButtonHidden}
-				/>
+				<div className="refresh-text-container">
+					<RefreshText
+						{...{
+							onLastRefreshHandler,
+						}}
+						refreshButtonHidden={refreshButtonHidden}
+					/>
+				</div>
 			)}
 			<Form
 				form={formSelector}