feat(compare queries): tightened padding, added tooltips, and fixed panel heights (#86227)

**Before:**
![Screenshot 2025-03-03 at 12 11
29 PM](https://github.com/user-attachments/assets/43021634-8e0a-474c-88cf-46c921abf458)

**After:**
![Screenshot 2025-03-03 at 12 11
36 PM](https://github.com/user-attachments/assets/49fde52a-eec9-4698-ab74-342135737555)

---------

Co-authored-by: Shruthi <[email protected]>

Author: doralchan

static/app/views/explore/multiQueryMode/components/miniTable.tsx

@@ -22,6 +22,7 @@ export const Table = React.forwardRef<HTMLTableElement, TableProps>(
 
 const _TableWrapper = styled(Body)`
   overflow-x: hidden;
+  margin: 0;
 `;
 
 const _Table = styled(Grid)<{height?: string | number; scrollable?: boolean}>`

static/app/views/explore/multiQueryMode/content.tsx

@@ -81,5 +81,5 @@ export function MultiQueryModeContent() {
 }
 
 const StyledPageFilterBar = styled(PageFilterBar)`
-  margin-bottom: ${space(2)};
+  margin-bottom: ${space(1)};
 `;

static/app/views/explore/multiQueryMode/queryConstructors/groupBy.tsx

@@ -2,6 +2,7 @@ import {useMemo} from 'react';
 import styled from '@emotion/styled';
 
 import {CompactSelect, type SelectOption} from 'sentry/components/compactSelect';
+import {Tooltip} from 'sentry/components/tooltip';
 import {t} from 'sentry/locale';
 import {useSpanTags} from 'sentry/views/explore/contexts/spanTagsContext';
 import {
@@ -46,7 +47,13 @@ export function GroupBySection({query, index}: Props) {
   return (
     <Section data-test-id={`section-group-by-${index}`}>
       <SectionHeader>
-        <SectionLabel underlined={false}>{t('Group By')}</SectionLabel>
+        <Tooltip
+          title={t(
+            'Aggregate data by a key attribute to calculate averages, percentiles, count and more.'
+          )}
+        >
+          <SectionLabel>{t('Group By')}</SectionLabel>
+        </Tooltip>
       </SectionHeader>
       <StyledCompactSelect
         multiple

static/app/views/explore/multiQueryMode/queryConstructors/search.tsx

@@ -1,4 +1,5 @@
 import {EAPSpanSearchQueryBuilder} from 'sentry/components/performance/spanSearchQueryBuilder';
+import {Tooltip} from 'sentry/components/tooltip';
 import {t} from 'sentry/locale';
 import usePageFilters from 'sentry/utils/usePageFilters';
 import {useSpanTags} from 'sentry/views/explore/contexts/spanTagsContext';
@@ -27,7 +28,9 @@ export function SearchBarSection({query, index}: Props) {
   return (
     <Section data-test-id={`section-filter-${index}`}>
       <SectionHeader>
-        <SectionLabel underlined={false}>{t('Filter')}</SectionLabel>
+        <Tooltip title={t('Key attributes you would like to narrow results down to')}>
+          <SectionLabel>{t('Filter')}</SectionLabel>
+        </Tooltip>
       </SectionHeader>
       <EAPSpanSearchQueryBuilder
         projects={selection.projects}

static/app/views/explore/multiQueryMode/queryConstructors/sortBy.tsx

@@ -51,7 +51,6 @@ export function SortBySection({query, index}: Props) {
     <Section data-test-id={`section-sort-by-${index}`}>
       <SectionHeader>
         <Tooltip
-          position="right"
           title={t('Results you see first and last in your samples or aggregates.')}
         >
           <SectionLabel>{t('Sort By')}</SectionLabel>

static/app/views/explore/multiQueryMode/queryConstructors/styles.tsx

@@ -1,11 +1,8 @@
 import styled from '@emotion/styled';
 
 import {space} from 'sentry/styles/space';
-import {defined} from 'sentry/utils';
 
-export const Section = styled('div')`
-  margin-bottom: ${space(2)};
-`;
+export const Section = styled('div')``;
 
 export const SectionHeader = styled('div')`
   display: flex;
@@ -15,14 +12,12 @@ export const SectionHeader = styled('div')`
   margin-bottom: ${space(0.5)};
 `;
 
-export const SectionLabel = styled('h6')<{disabled?: boolean; underlined?: boolean}>`
+export const SectionLabel = styled('h6')<{disabled?: boolean}>`
   color: ${p => (p.disabled ? p.theme.gray300 : p.theme.gray500)};
   height: ${p => p.theme.form.md.height};
   min-height: ${p => p.theme.form.md.minHeight};
   font-size: ${p => p.theme.form.md.fontSize};
   margin: 0;
-  ${p =>
-    !defined(p.underlined) || p.underlined
-      ? `text-decoration: underline dotted ${p.disabled ? p.theme.gray300 : p.theme.gray300}`
-      : ''};
+  text-decoration: underline dotted
+    ${p => (p.disabled ? p.theme.gray300 : p.theme.gray300)};
 `;

static/app/views/explore/multiQueryMode/queryConstructors/visualize.tsx

@@ -47,7 +47,6 @@ export function VisualizeSection({query, index}: Props) {
     <Section data-test-id={`section-visualize-${index}`}>
       <SectionHeader>
         <Tooltip
-          position="right"
           title={t(
             'Primary metric that appears in your chart. You can also overlay a series onto an existing chart or add an equation.'
           )}

static/app/views/explore/multiQueryMode/queryRow.tsx

@@ -110,29 +110,28 @@ export function QueryRow({query: queryParts, index, totalQueryRows}: Props) {
 
 const QueryConstructionSection = styled('div')`
   display: grid;
-  width: 100%;
+  gap: ${space(1)};
+  margin-bottom: ${space(1)};
 
   @media (min-width: ${p => p.theme.breakpoints.large}) {
     grid-template-columns: minmax(400px, 1fr) 1fr;
-    margin-bottom: 0;
-    gap: ${space(2)};
   }
 `;
 
 const DropDownGrid = styled('div')`
   display: grid;
   grid-template-columns: repeat(3, minmax(0, auto)) ${space(2)};
-  align-items: start;
-  gap: ${space(2)};
+  align-items: center;
+  gap: ${space(1)};
 `;
 
 const DeleteButton = styled(Button)`
-  margin-top: ${space(4)};
+  margin-top: ${space(2)};
 `;
 
 const QueryVisualizationSection = styled('div')`
   display: grid;
-  grid-template-columns: 2fr 1fr;
-  margin-bottom: ${space(1)};
-  gap: ${space(2)};
+  grid-template-columns: 2fr 1.2fr;
+  gap: ${space(1)};
+  margin-bottom: ${space(2)};
 `;

static/app/views/explore/multiQueryMode/queryVisualizations/table.tsx

@@ -317,9 +317,9 @@ function SpansTable({spansTableResult, query: queryParts, index}: SampleTablePro
 const TopResultsIndicator = styled('div')<{index: number}>`
   position: absolute;
   left: -1px;
-  width: 9px;
+  width: 8px;
   height: 16px;
-  border-radius: 0 3px 3px 0;
+  border-radius: 0 2px 2px 0;
 
   background-color: ${p => {
     return CHART_PALETTE[TOP_EVENTS_LIMIT - 1]![p.index];
@@ -331,14 +331,14 @@ const StyledLink = styled(Link)`
 `;
 
 const TableBodyCell = styled(GridBodyCell)`
-  min-height: 30px;
   font-size: ${p => p.theme.fontSizeSmall};
+  min-height: 12px;
 `;
 
 const TableHeadCell = styled(GridHeadCell)<{align?: Alignments}>`
   ${p => p.align && `justify-content: ${p.align};`}
-  height: 32px;
   font-size: ${p => p.theme.fontSizeSmall};
+  height: 33px;
 `;
 
 const TableHeadCellContent = styled('div')`

static/app/views/explore/toolbar/toolbarSaveAs.tsx

@@ -182,7 +182,7 @@ export function ToolbarSaveAs() {
               fields,
               sortBys,
             })}
-          >{`${t('Compare')}`}</LinkButton>
+          >{`${t('Compare Queries')}`}</LinkButton>
         )}
       </ButtonBar>
     </ToolbarSection>