Browse Source

style(feedback): fix alignment of tracked issue buttons (#60717)

Fix the alignment of the external tracked issue buttons -- they should
always fall in a second row under the user name/email/proj slug section.

Before: 

<img width="795" alt="SCR-20231128-lwae"
src="https://github.com/getsentry/sentry/assets/56095982/66b05d41-ac41-4c0b-94cf-dac730bd4ebd">

After:

<img width="827" alt="SCR-20231128-lvkd"
src="https://github.com/getsentry/sentry/assets/56095982/61f693c8-2a2e-4aa1-bba6-48f256d01d6d">
<img width="1206" alt="SCR-20231128-lvdk"
src="https://github.com/getsentry/sentry/assets/56095982/e31f9fe5-f7ec-4ef3-b3c8-e847f9dfbd1d">
Michelle Zhang 1 year ago
parent
commit
8e315c58aa
1 changed files with 19 additions and 11 deletions
  1. 19 11
      static/app/components/feedback/feedbackItem/feedbackItem.tsx

+ 19 - 11
static/app/components/feedback/feedbackItem/feedbackItem.tsx

@@ -126,18 +126,18 @@ export default function FeedbackItem({feedbackItem, eventData, tags}: Props) {
               </Button>
             </ErrorBoundary>
           </Flex>
-          {eventData && (
-            <Flex align="flex-start" wrap="wrap" gap={space(2)}>
-              <ErrorBoundary mini>
-                <IssueTrackingSection
-                  group={feedbackItem as unknown as Group}
-                  project={feedbackItem.project}
-                  event={eventData}
-                />
-              </ErrorBoundary>
-            </Flex>
-          )}
         </Flex>
+        {eventData && (
+          <RowGapLinks>
+            <ErrorBoundary mini>
+              <IssueTrackingSection
+                group={feedbackItem as unknown as Group}
+                project={feedbackItem.project}
+                event={eventData}
+              />
+            </ErrorBoundary>
+          </RowGapLinks>
+        )}
       </HeaderPanelItem>
       <OverflowPanelItem>
         <Section
@@ -182,6 +182,7 @@ export default function FeedbackItem({feedbackItem, eventData, tags}: Props) {
 const HeaderPanelItem = styled(PanelItem)`
   display: grid;
   padding: ${space(1)} ${space(2)};
+  gap: ${space(2)};
 `;
 
 const OverflowPanelItem = styled(PanelItem)`
@@ -192,6 +193,13 @@ const OverflowPanelItem = styled(PanelItem)`
   gap: ${space(3)};
 `;
 
+const RowGapLinks = styled('div')`
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  column-gap: ${space(2)};
+`;
+
 const Blockquote = styled('blockquote')`
   margin: 0 ${space(4)};
   position: relative;