From 48a8010bbba4a884c53b8ff032eaf90698cc8f82 Mon Sep 17 00:00:00 2001
From: Michael Sun <55160142+MichaelSun48@users.noreply.github.com>
Date: Fri, 18 Oct 2024 14:57:04 -0700
Subject: [PATCH] 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">
---
 static/app/views/issueList/customViewsHeader.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/static/app/views/issueList/customViewsHeader.tsx b/static/app/views/issueList/customViewsHeader.tsx
index 2abec860bbc69b..826146139ffc4b 100644
--- a/static/app/views/issueList/customViewsHeader.tsx
+++ b/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)};