Browse Source

ref(perf): Increase padding in `WidgetInteractiveTitle` (#49438)

Increase padding to make the trigger button look less cramped. This
doesn't affect the title's vertical alignment with other elements in the
widget.

**Before ——**
<img width="357" alt="Screenshot 2023-05-18 at 2 34 52 PM"
src="https://github.com/getsentry/sentry/assets/44172267/bbb15a80-f350-4ef3-a67f-9fcd546def4b">

**After ——**
<img width="357" alt="image"
src="https://github.com/getsentry/sentry/assets/44172267/8e78cbcb-97f0-474f-8558-326a8561a7f7">
Vu Luong 1 year ago
parent
commit
652bb400e6

+ 3 - 1
static/app/views/performance/landing/widgets/components/widgetContainer.tsx

@@ -245,6 +245,7 @@ export function WidgetInteractiveTitle({
       value={chartSetting}
       onChange={handleChange}
       triggerProps={{borderless: true, size: 'zero'}}
+      offset={4}
     />
   );
 }
@@ -253,10 +254,11 @@ const StyledCompactSelect = styled(CompactSelect)`
   /* Reset font-weight set by HeaderTitleLegend, buttons are already bold and
    * setting this higher up causes it to trickle into the menues */
   font-weight: normal;
-  margin: 0 -${space(0.5)};
+  margin: -${space(0.5)} -${space(1)} -${space(0.25)};
   min-width: 0;
 
   button {
+    padding: ${space(0.5)} ${space(1)};
     font-size: ${p => p.theme.fontSizeLarge};
   }
 `;