fix(schema-hints): Reduce width of schema hints drawer (#87177)

The drawer was taking up too much room on the page when it was open and
was essentially hiding the search bar. It would be nice to see what is
being added to the search bar even when the drawer is open. I had to
make some additions to the `GlobalDrawer` and `SlideOverPanel`
components to pass in css (passing in css provides more flexibility with
media queries as opposed to passing in style props). Here's a before and
after:

| Before | After |
|--------|--------|
|
![image](https://github.com/user-attachments/assets/eb3d3dae-250b-4049-894e-dc4174404f4a)
|
![image](https://github.com/user-attachments/assets/5888dde8-ddfd-491c-96af-422cada3a118)
|

Author: nikkikapadia

static/app/components/globalDrawer/components.tsx

@@ -28,11 +28,12 @@ interface DrawerPanelProps {
   children: React.ReactNode;
   headerContent: React.ReactNode;
   onClose: DrawerContentContextType['onClose'];
+  drawerWidth?: DrawerOptions['drawerWidth'];
   transitionProps?: AnimationProps['transition'];
 }
 
 export const DrawerPanel = forwardRef(function _DrawerPanel(
-  {ariaLabel, children, transitionProps, onClose}: DrawerPanelProps,
+  {ariaLabel, children, transitionProps, onClose, drawerWidth}: DrawerPanelProps,
   ref: React.ForwardedRef<HTMLDivElement>
 ) {
   return (
@@ -43,6 +44,7 @@ export const DrawerPanel = forwardRef(function _DrawerPanel(
         collapsed={false}
         ref={ref}
         transitionProps={transitionProps}
+        panelWidth={drawerWidth}
       >
         {/*
           This provider allows data passed to openDrawer to be accessed by drawer components.

static/app/components/globalDrawer/index.tsx

@@ -32,6 +32,10 @@ export interface DrawerOptions {
    * If true (default), closes the drawer when anywhere else is clicked
    */
   closeOnOutsideClick?: boolean;
+  /**
+   * Custom width for the drawer
+   */
+  drawerWidth?: string;
   /**
    * Custom content for the header of the drawer
    */
@@ -181,6 +185,7 @@ export function GlobalDrawer({children}: any) {
               ref={panelRef}
               headerContent={currentDrawerConfig?.options?.headerContent ?? null}
               transitionProps={currentDrawerConfig?.options?.transitionProps}
+              drawerWidth={currentDrawerConfig?.options?.drawerWidth}
             >
               {renderedChild}
             </DrawerComponents.DrawerPanel>

static/app/components/slideOverPanel.tsx

@@ -30,6 +30,7 @@ type SlideOverPanelProps = {
   className?: string;
   'data-test-id'?: string;
   onOpen?: () => void;
+  panelWidth?: string;
   slidePosition?: 'right' | 'bottom' | 'left';
   transitionProps?: AnimationProps['transition'];
 };
@@ -46,6 +47,7 @@ function SlideOverPanel(
     onOpen,
     slidePosition,
     transitionProps = {},
+    panelWidth,
   }: SlideOverPanelProps,
   ref: ForwardedRef<HTMLDivElement>
 ) {
@@ -79,6 +81,7 @@ function SlideOverPanel(
       aria-label={ariaLabel ?? 'slide out drawer'}
       className={className}
       data-test-id={testId}
+      panelWidth={panelWidth}
     >
       {children}
     </_SlideOverPanel>
@@ -90,6 +93,7 @@ const _SlideOverPanel = styled(motion.div, {
     ['initial', 'animate', 'exit', 'transition'].includes(prop) ||
     (prop !== 'collapsed' && isPropValid(prop)),
 })<{
+  panelWidth?: string;
   slidePosition?: 'right' | 'bottom' | 'left';
 }>`
   position: fixed;
@@ -128,7 +132,7 @@ const _SlideOverPanel = styled(motion.div, {
           ? css`
               position: fixed;
 
-              width: ${PANEL_WIDTH};
+              width: ${p.panelWidth ?? PANEL_WIDTH};
               height: 100%;
 
               top: 0;
@@ -139,7 +143,7 @@ const _SlideOverPanel = styled(motion.div, {
           : css`
               position: relative;
 
-              width: ${LEFT_SIDE_PANEL_WIDTH};
+              width: ${p.panelWidth ?? LEFT_SIDE_PANEL_WIDTH};
               min-width: 450px;
               height: 100%;
 

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

@@ -57,6 +57,7 @@ function SchemaHintsList({
   const exploreQuery = useExploreQuery();
   const setExploreQuery = useSetExploreQuery();
   const location = useLocation();
+
   const {openDrawer, isDrawerOpen} = useDrawer();
 
   const functionTags = useMemo(() => {
@@ -164,6 +165,7 @@ function SchemaHintsList({
             ),
             {
               ariaLabel: t('Schema Hints Drawer'),
+              drawerWidth: '35vw',
               shouldCloseOnLocationChange: newLocation => {
                 return (
                   location.pathname !== newLocation.pathname ||