feat(explore-suspect-attrs): Updating charts grid (#102417)

Before (makes pagination usage non-intuitive):
<img width="1420" height="809" alt="Screenshot 2025-10-30 at 2 35 22 PM"
src="https://github.com/user-attachments/assets/9b518de4-3c5e-4836-9c85-d9c2ab4146b9"
/>

After: 
<img width="1223" height="799" alt="Screenshot 2025-10-30 at 2 36 13 PM"
src="https://github.com/user-attachments/assets/603b2010-07cd-4c70-acc0-80b1ac6af752"
/>

Added a little box-shadow to make trigger discoverable:
<img width="1063" height="348" alt="Screenshot 2025-10-30 at 2 37 12 PM"
src="https://github.com/user-attachments/assets/ec3b7119-074d-425e-a2b7-149c5846e213"
/>

---------

Co-authored-by: Abdullah Khan <[email protected]>

Author: Abdkhan14

static/app/views/explore/components/suspectTags/chart.tsx

@@ -16,6 +16,7 @@ const MAX_BAR_WIDTH = 20;
 const HIGH_CARDINALITY_THRESHOLD = 20;
 const AXIS_LABEL_FONT_SIZE = 12;
 const TOOLTIP_MAX_VALUE_LENGTH = 300;
+const MAX_CHART_SERIES_LENGTH = 40;
 
 const SELECTED_SERIES_NAME = 'selected';
 const BASELINE_SERIES_NAME = 'baseline';
@@ -76,15 +77,19 @@ function cohortsToSeriesData(
 
   seriesData.sort((a, b) => b.sortValue - a.sortValue);
 
-  const selectedSeriesData = seriesData.map(({label, selectedValue}) => ({
-    label,
-    value: selectedValue,
-  }));
+  const selectedSeriesData = seriesData
+    .slice(0, MAX_CHART_SERIES_LENGTH)
+    .map(({label, selectedValue}) => ({
+      label,
+      value: selectedValue,
+    }));
 
-  const baselineSeriesData = seriesData.map(({label, baselineValue}) => ({
-    label,
-    value: baselineValue,
-  }));
+  const baselineSeriesData = seriesData
+    .slice(0, MAX_CHART_SERIES_LENGTH)
+    .map(({label, baselineValue}) => ({
+      label,
+      value: baselineValue,
+    }));
 
   return {
     [SELECTED_SERIES_NAME]: selectedSeriesData,

static/app/views/explore/components/suspectTags/content.tsx

@@ -27,6 +27,9 @@ import {Chart} from './chart';
 import {useChartSelection} from './chartSelectionContext';
 import {SortingToggle, type SortingMethod} from './sortingToggle';
 
+const CHARTS_COLUMN_COUNT = 3;
+const CHARTS_PER_PAGE = CHARTS_COLUMN_COUNT * 4;
+
 function FeedbackButton() {
   const openForm = useFeedbackForm();
 
@@ -150,7 +153,7 @@ function ContentImpl({
             <Fragment>
               <ChartsGrid>
                 {filteredRankedAttributes
-                  .slice(page * 10, (page + 1) * 10)
+                  .slice(page * CHARTS_PER_PAGE, (page + 1) * CHARTS_PER_PAGE)
                   .map(attribute => (
                     <Chart
                       key={attribute.attributeName}
@@ -177,7 +180,8 @@ function ContentImpl({
                     aria-label={t('Next')}
                     size="sm"
                     disabled={
-                      page === Math.ceil(filteredRankedAttributes.length / 10) - 1
+                      page ===
+                      Math.ceil(filteredRankedAttributes.length / CHARTS_PER_PAGE) - 1
                     }
                     onClick={() => {
                       setPage(page + 1);
@@ -253,7 +257,7 @@ const NoAttributesMessage = styled('div')`
 
 const ChartsGrid = styled('div')`
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-template-columns: repeat(${CHARTS_COLUMN_COUNT}, 1fr);
   gap: ${space(1)};
 `;
 

static/app/views/explore/components/suspectTags/floatingTrigger.tsx

@@ -94,9 +94,7 @@ const List = styled('ul')`
   margin: 0;
   padding: 0;
   margin-bottom: 0 !important;
-  box-shadow:
-    rgba(0, 0, 0, 0.05) 0px 6px 24px 0px,
-    rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
+  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
   background: ${p => p.theme.backgroundElevated};
   color: ${p => p.theme.textColor};
   border-radius: ${p => p.theme.borderRadius};