feat(schema-hints): Adjust search bar width when drawer open (#90232)

Part of the search bar was hidden behind the drawer so you may not be
able to see what you're putting into the search bar. I've adjusted the
logic so that the search bar width conforms to be visible when the
drawer is open and resized (to a certain extent otherwise the search bar
becomes too small). This is what it looks like:

<img width="1433" alt="image"
src="https://github.com/user-attachments/assets/b61ea27c-96f9-41e7-a954-9b6b9c5765b1"
/>

Author: nikkikapadia

static/app/components/globalDrawer/index.tsx

@@ -98,12 +98,14 @@ interface DrawerContextType {
     renderer: DrawerConfig['renderer'],
     options: DrawerConfig['options']
   ) => void;
+  panelRef: React.RefObject<HTMLDivElement | null>;
 }
 
 const DrawerContext = createContext<DrawerContextType>({
   openDrawer: () => {},
   isDrawerOpen: false,
   closeDrawer: () => {},
+  panelRef: {current: null},
 });
 
 export function GlobalDrawer({children}: any) {
@@ -198,7 +200,7 @@ export function GlobalDrawer({children}: any) {
     : null;
 
   return (
-    <DrawerContext value={{closeDrawer, isDrawerOpen, openDrawer}}>
+    <DrawerContext value={{closeDrawer, isDrawerOpen, openDrawer, panelRef}}>
       <ErrorBoundary mini message={t('There was a problem rendering the drawer.')}>
         <AnimatePresence>
           {isDrawerOpen && (

static/app/views/explore/components/schemaHints/schemaHintsList.spec.tsx

@@ -27,6 +27,7 @@ jest.mock('sentry/components/searchQueryBuilder/context', () => ({
     query: '',
     getTagValues: () => Promise.resolve(['tagValue1', 'tagValue2']),
     dispatch: mockDispatch,
+    wrapperRef: {current: null},
   }),
   SearchQueryBuilderProvider: ({children}: {children: React.ReactNode}) => children,
 }));

static/app/views/explore/components/schemaHints/schemaHintsList.tsx

@@ -102,8 +102,8 @@ function SchemaHintsList({
   const schemaHintsContainerRef = useRef<HTMLDivElement>(null);
   const location = useLocation();
   const organization = useOrganization();
-  const {openDrawer, isDrawerOpen} = useDrawer();
-  const {dispatch, query} = useSearchQueryBuilder();
+  const {openDrawer, isDrawerOpen, panelRef} = useDrawer();
+  const {dispatch, query, wrapperRef: searchBarWrapperRef} = useSearchQueryBuilder();
 
   // Create a ref to hold the latest query for the drawer
   const queryRef = useRef(query);
@@ -237,6 +237,25 @@ function SchemaHintsList({
     return () => resizeObserver.disconnect();
   }, [filterTagsSorted, isDrawerOpen, isLoading, tagListState]);
 
+  // ensures the search bar is the correct width when the drawer is open
+  useEffect(() => {
+    const adjustSearchBarWidth = () => {
+      if (isDrawerOpen && searchBarWrapperRef.current && panelRef.current) {
+        searchBarWrapperRef.current.style.width = `calc(100% - ${panelRef.current.clientWidth}px)`;
+      }
+    };
+
+    adjustSearchBarWidth();
+
+    const resizeObserver = new ResizeObserver(adjustSearchBarWidth);
+
+    if (panelRef.current) {
+      resizeObserver.observe(panelRef.current);
+    }
+
+    return () => resizeObserver.disconnect();
+  }, [isDrawerOpen, panelRef, searchBarWrapperRef]);
+
   const onHintClick = useCallback(
     (hint: Tag) => {
       if (hint.key === seeFullListTag.key) {
@@ -273,13 +292,20 @@ function SchemaHintsList({
                   drawer_open: true,
                   organization,
                 });
+                if (searchBarWrapperRef.current) {
+                  searchBarWrapperRef.current.style.minWidth = '20%';
+                }
               },
 
               onClose: () => {
                 trackAnalytics('trace.explorer.schema_hints_drawer', {
                   drawer_open: false,
                   organization,
                 });
+                if (searchBarWrapperRef.current) {
+                  searchBarWrapperRef.current.style.width = '100%';
+                  searchBarWrapperRef.current.style.minWidth = '';
+                }
               },
             }
           );
@@ -315,6 +341,7 @@ function SchemaHintsList({
       dispatch,
       organization,
       isDrawerOpen,
+      searchBarWrapperRef,
       openDrawer,
       filterTagsSorted,
       location.pathname,