Browse Source

fix(issue-views): Make tab bar take up entire row (#79383)

Fixes an issue where the tab bar did not take up the entire row in the
header's grid container. This led to the overflow menu triggering too
eagerly.

Before:

<img width="894" alt="image"
src="https://github.com/user-attachments/assets/363fc666-2de2-417f-a53a-d0011cfdcd41">


After:

<img width="909" alt="image"
src="https://github.com/user-attachments/assets/104a7137-d9aa-4af7-80fd-86e59a7b7d71">
Michael Sun 4 months ago
parent
commit
48a8010bbb
1 changed files with 6 additions and 2 deletions
  1. 6 2
      static/app/views/issueList/customViewsHeader.tsx

+ 6 - 2
static/app/views/issueList/customViewsHeader.tsx

@@ -127,9 +127,9 @@ function CustomViewsIssueListHeader({
       </Layout.HeaderActions>
       <StyledGlobalEventProcessingAlert projects={selectedProjects} />
       {groupSearchViews ? (
-        <Tabs>
+        <StyledTabs>
           <CustomViewsIssueListHeaderTabsContent {...props} views={groupSearchViews} />
-        </Tabs>
+        </StyledTabs>
       ) : (
         <div style={{height: 33}} />
       )}
@@ -475,6 +475,10 @@ function CustomViewsIssueListHeaderTabsContent({
 
 export default CustomViewsIssueListHeader;
 
+const StyledTabs = styled(Tabs)`
+  grid-column: 1 / -1;
+`;
+
 const StyledGlobalEventProcessingAlert = styled(GlobalEventProcessingAlert)`
   grid-column: 1/-1;
   margin-top: ${space(1)};