fix: select language width determined and passed to mantine component (#732)

Look at the WHERE box, in particular the interaction between the `SQL | Lucene` block. It used to overlap with the input text, now it does not

https://github.com/user-attachments/assets/010a3f40-fd71-4414-b7ef-15786d7046a8


Fixes: HDX-1508

.changeset/clever-paws-rush.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+fix: input does not overlap with language select button anymore

packages/app/src/AutocompleteInput.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import Fuse from 'fuse.js';
 import { OverlayTrigger } from 'react-bootstrap';
 import { TextInput } from '@mantine/core';
@@ -83,6 +83,7 @@ export default function AutocompleteInput({
     onChange(newValue);
     inputRef.current?.focus();
   };
+  const ref = useRef<HTMLDivElement>(null);
 
   return (
     <OverlayTrigger
@@ -234,9 +235,9 @@ export default function AutocompleteInput({
             }
           }
         }}
-        rightSectionWidth="auto"
+        rightSectionWidth={ref.current?.clientWidth ?? 'auto'}
         rightSection={
-          <>
+          <div ref={ref}>
             {language != null && onLanguageChange != null && (
               <InputLanguageSwitch
                 showHotkey={showHotkey && isSearchInputFocused}
@@ -244,7 +245,7 @@ export default function AutocompleteInput({
                 onLanguageChange={onLanguageChange}
               />
             )}
-          </>
+          </div>
         }
       />
     </OverlayTrigger>

packages/app/src/components/InputLanguageSwitch.tsx

@@ -10,7 +10,7 @@ export default function InputLanguageSwitch({
   showHotkey?: boolean;
 }) {
   return (
-    <Flex wrap="nowrap" gap="xxxs" pe="sm">
+    <Flex wrap="nowrap" gap="xxxs" px="sm">
       {showHotkey && (
         <Text c="gray.3" size="xxs" bg="gray.8" px={4} py={0} mr={4} lh={1.4}>
           /