style: metrics custom function css overflow issues (#9660)

* style: metrics custom function css overflow issues

* feat: add support for recovery threshold (#9428)

* feat: created common component for overflowing input tooltip

* feat: updated function.tsx to have useMemo for debounce

* feat: removed unwanted useEffect and moved inline css to separate file

* feat: re-applied useEffect due to css issues

* feat: removed inline styling

* feat: updated mirror ref to be in common component along with css updates

* feat: reverted prom_rule.go

* feat: code cleanup - input ref/forwardref cleanup

* feat: code cleanup - updated test file

* feat: extracted mirror-ref outside of tooltip

* feat: removed unwanted css

* feat: code optmized

* feat: test file updated

* feat: snapshot update

---------

Co-authored-by: Ishan Uniyal <ishan@Ishans-MacBook-Pro.local>
Co-authored-by: Abhishek Kumar Singh <hritik6058@gmail.com>

frontend/src/components/OverflowInputToolTip/OverflowInputToolTip.scss

@@ -0,0 +1,16 @@
+.overflow-input {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+.overflow-input-mirror {
+	position: absolute;
+	visibility: hidden;
+	white-space: pre;
+	pointer-events: none;
+	font: inherit;
+	letter-spacing: inherit;
+	height: 0;
+	overflow: hidden;
+}

frontend/src/components/OverflowInputToolTip/OverflowInputToolTip.test.tsx

@@ -0,0 +1,119 @@
+import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
+
+import OverflowInputToolTip from './OverflowInputToolTip';
+
+const TOOLTIP_INNER_SELECTOR = '.ant-tooltip-inner';
+// Utility to mock overflow behaviour on inputs / elements.
+// Stubs HTMLElement.prototype.clientWidth, scrollWidth and offsetWidth used by component.
+function mockOverflow(clientWidth: number, scrollWidth: number): void {
+	Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
+		configurable: true,
+		value: clientWidth,
+	});
+	Object.defineProperty(HTMLElement.prototype, 'scrollWidth', {
+		configurable: true,
+		value: scrollWidth,
+	});
+	// mirror.offsetWidth is used to compute mirrorWidth = offsetWidth + 24.
+	// Use clientWidth so the mirror measurement aligns with the mocked client width in tests.
+	Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+		configurable: true,
+		value: clientWidth,
+	});
+}
+
+function queryTooltipInner(): HTMLElement | null {
+	// find element that has role="tooltip" (could be the inner itself)
+	const tooltip = document.querySelector<HTMLElement>('[role="tooltip"]');
+	if (!tooltip) return document.querySelector(TOOLTIP_INNER_SELECTOR);
+
+	// if the role element is already the inner, return it; otherwise return its descendant
+	if (tooltip.classList.contains('ant-tooltip-inner')) return tooltip;
+	return (
+		(tooltip.querySelector(TOOLTIP_INNER_SELECTOR) as HTMLElement) ??
+		document.querySelector(TOOLTIP_INNER_SELECTOR)
+	);
+}
+
+describe('OverflowInputToolTip', () => {
+	beforeEach(() => {
+		jest.restoreAllMocks();
+	});
+
+	test('shows tooltip when content overflows and input is clamped at maxAutoWidth', async () => {
+		mockOverflow(150, 250); // clientWidth >= maxAutoWidth (150), scrollWidth > clientWidth
+
+		render(<OverflowInputToolTip value="Very long overflowing text" />);
+
+		await userEvent.hover(screen.getByRole('textbox'));
+
+		await waitFor(() => {
+			expect(queryTooltipInner()).not.toBeNull();
+		});
+
+		const tooltipInner = queryTooltipInner();
+		if (!tooltipInner) throw new Error('Tooltip inner not found');
+		expect(
+			within(tooltipInner).getByText('Very long overflowing text'),
+		).toBeInTheDocument();
+	});
+
+	test('does NOT show tooltip when content does not overflow', async () => {
+		mockOverflow(150, 100); // content fits (scrollWidth <= clientWidth)
+
+		render(<OverflowInputToolTip value="Short text" />);
+
+		await userEvent.hover(screen.getByRole('textbox'));
+
+		await waitFor(() => {
+			expect(queryTooltipInner()).toBeNull();
+		});
+	});
+
+	test('does NOT show tooltip when content overflows but input is NOT at maxAutoWidth', async () => {
+		mockOverflow(100, 250); // clientWidth < maxAutoWidth (150), scrollWidth > clientWidth
+
+		render(<OverflowInputToolTip value="Long but input not clamped" />);
+
+		await userEvent.hover(screen.getByRole('textbox'));
+
+		await waitFor(() => {
+			expect(queryTooltipInner()).toBeNull();
+		});
+	});
+
+	test('uncontrolled input allows typing', async () => {
+		render(<OverflowInputToolTip defaultValue="Init" />);
+
+		const input = screen.getByRole('textbox') as HTMLInputElement;
+		await userEvent.type(input, 'ABC');
+
+		expect(input).toHaveValue('InitABC');
+	});
+
+	test('disabled input never shows tooltip even if overflowing', async () => {
+		mockOverflow(150, 300);
+
+		render(<OverflowInputToolTip value="Overflowing!" disabled />);
+
+		await userEvent.hover(screen.getByRole('textbox'));
+
+		await waitFor(() => {
+			expect(queryTooltipInner()).toBeNull();
+		});
+	});
+
+	test('renders mirror span and input correctly (structural assertions instead of snapshot)', () => {
+		const { container } = render(<OverflowInputToolTip value="Snapshot" />);
+		const mirror = container.querySelector('.overflow-input-mirror');
+		const input = container.querySelector('input') as HTMLInputElement | null;
+
+		expect(mirror).toBeTruthy();
+		expect(mirror?.textContent).toBe('Snapshot');
+		expect(input).toBeTruthy();
+		expect(input?.value).toBe('Snapshot');
+
+		// width should be set inline (component calculates width on mount)
+		expect(input?.getAttribute('style')).toContain('width:');
+	});
+});

frontend/src/components/OverflowInputToolTip/OverflowInputToolTip.tsx

@@ -0,0 +1,73 @@
+/* eslint-disable react/require-default-props */
+/* eslint-disable react/jsx-props-no-spreading */
+
+import './OverflowInputToolTip.scss';
+
+import { Input, InputProps, InputRef, Tooltip } from 'antd';
+import cx from 'classnames';
+import { useEffect, useRef, useState } from 'react';
+
+export interface OverflowTooltipInputProps extends InputProps {
+	tooltipPlacement?: 'top' | 'bottom' | 'left' | 'right';
+	minAutoWidth?: number;
+	maxAutoWidth?: number;
+}
+
+function OverflowInputToolTip({
+	value,
+	defaultValue,
+	onChange,
+	disabled = false,
+	tooltipPlacement = 'top',
+	className,
+	minAutoWidth = 70,
+	maxAutoWidth = 150,
+	...rest
+}: OverflowTooltipInputProps): JSX.Element {
+	const inputRef = useRef<InputRef>(null);
+	const mirrorRef = useRef<HTMLSpanElement | null>(null);
+	const [isOverflowing, setIsOverflowing] = useState<boolean>(false);
+
+	useEffect(() => {
+		const input = inputRef.current?.input;
+		const mirror = mirrorRef.current;
+		if (!input || !mirror) {
+			setIsOverflowing(false);
+			return;
+		}
+
+		mirror.textContent = String(value ?? '') || ' ';
+		const mirrorWidth = mirror.offsetWidth + 24;
+		const newWidth = Math.min(maxAutoWidth, Math.max(minAutoWidth, mirrorWidth));
+		input.style.width = `${newWidth}px`;
+
+		// consider clamped when mirrorWidth reaches maxAutoWidth (allow -5px tolerance)
+		const isClamped = mirrorWidth >= maxAutoWidth - 5;
+		const overflow = input.scrollWidth > input.clientWidth && isClamped;
+
+		setIsOverflowing(overflow);
+	}, [value, disabled, minAutoWidth, maxAutoWidth]);
+
+	const tooltipTitle = !disabled && isOverflowing ? String(value ?? '') : '';
+
+	return (
+		<>
+			<span ref={mirrorRef} aria-hidden className="overflow-input-mirror" />
+			<Tooltip title={tooltipTitle} placement={tooltipPlacement}>
+				<Input
+					{...rest}
+					value={value}
+					defaultValue={defaultValue}
+					onChange={onChange}
+					disabled={disabled}
+					ref={inputRef}
+					className={cx('overflow-input', className)}
+				/>
+			</Tooltip>
+		</>
+	);
+}
+
+OverflowInputToolTip.displayName = 'OverflowInputToolTip';
+
+export default OverflowInputToolTip;

frontend/src/components/OverflowInputToolTip/index.tsx

@@ -0,0 +1,3 @@
+import OverflowInputToolTip from './OverflowInputToolTip';
+
+export default OverflowInputToolTip;

frontend/src/container/QueryBuilder/components/QueryFunctions/Function.tsx

@@ -1,6 +1,8 @@
 /* eslint-disable react/jsx-props-no-spreading */
-import { Button, Flex, Input, Select } from 'antd';
+
+import { Button, Flex, Select } from 'antd';
 import cx from 'classnames';
+import OverflowInputToolTip from 'components/OverflowInputToolTip';
 import {
 	logsQueryFunctionOptions,
 	metricQueryFunctionOptions,
@@ -9,6 +11,7 @@ import {
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { debounce, isNil } from 'lodash-es';
 import { X } from 'lucide-react';
+import { useMemo, useState } from 'react';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { QueryFunction } from 'types/api/v5/queryRange';
 import { DataSource, QueryFunctionsTypes } from 'types/common/queryBuilder';
@@ -47,9 +50,13 @@ export default function Function({
 		functionValue = funcData.args?.[0]?.value;
 	}
 
-	const debouncedhandleUpdateFunctionArgs = debounce(
-		handleUpdateFunctionArgs,
-		500,
+	const [value, setValue] = useState<string>(
+		functionValue !== undefined ? String(functionValue) : '',
+	);
+
+	const debouncedhandleUpdateFunctionArgs = useMemo(
+		() => debounce(handleUpdateFunctionArgs, 500),
+		[handleUpdateFunctionArgs],
 	);
 
 	// update the logic when we start supporting functions for traces
@@ -89,13 +96,18 @@ export default function Function({
 			/>
 
 			{showInput && (
-				<Input
-					className="query-function-value"
+				<OverflowInputToolTip
 					autoFocus
-					defaultValue={functionValue}
+					value={value}
 					onChange={(event): void => {
+						const newVal = event.target.value;
+						setValue(newVal);
 						debouncedhandleUpdateFunctionArgs(funcData, index, event.target.value);
 					}}
+					tooltipPlacement="top"
+					minAutoWidth={70}
+					maxAutoWidth={150}
+					className="query-function-value"
 				/>
 			)}
 

frontend/src/container/QueryBuilder/components/QueryFunctions/QueryFunctions.styles.scss

@@ -99,7 +99,7 @@
 		}
 
 		.query-function-value {
-			width: 55px;
+			width: 70px;
 			border-left: 0;
 			background: var(--bg-ink-200);
 			border-radius: 0;