Browse Source

ref(compactSelect): Remove first section's top padding (#50777)

**Before ——**
<img width="235" alt="Screenshot 2023-06-12 at 1 27 55 PM"
src="https://github.com/getsentry/sentry/assets/44172267/fbd2cb6a-15ac-44b6-a99f-c21929ffefbc">

**After ——**
<img width="235" alt="Screenshot 2023-06-12 at 1 27 32 PM"
src="https://github.com/getsentry/sentry/assets/44172267/8cd61b3a-5f06-42ad-b85d-9b6f81507c06">
Vu Luong 1 year ago
parent
commit
e982d8c63c
1 changed files with 9 additions and 0 deletions
  1. 9 0
      static/app/components/compactSelect/styles.tsx

+ 9 - 0
static/app/components/compactSelect/styles.tsx

@@ -80,6 +80,15 @@ export const SectionHeader = styled('div')`
   box-sizing: content-box;
   height: 1.5em;
   padding: ${space(0.25)} ${space(1.5)};
+
+  /* Remove top padding if this is the first section in a headerless menu (selected 
+  with li:nth-of-type(2) because the first list item is a hidden separator) */
+  [data-menu-has-header='false']
+    ul:first-of-type
+    li[role='presentation']:nth-of-type(2)
+    > & {
+    padding-top: 0;
+  }
 `;
 
 export const SectionTitle = styled('p')`