Просмотр исходного кода

bug(quicktrace): Update QuickTrace placeholder css so it does not overflow (#43995)

**Before:**

![216135445-8b5a2bd0-439e-4e17-8e46-aed35dc7d642](https://user-images.githubusercontent.com/187460/216186948-b95760e3-1459-4f1c-bc35-b17408a8747e.png)


**After:**
With the replay pill:
<img width="993" alt="SCR-20230201-kyu"
src="https://user-images.githubusercontent.com/187460/216186976-7d8e7024-7584-46a4-aa78-478d44bd3ca7.png">

Without the pill:
<img width="1008" alt="SCR-20230201-kyx"
src="https://user-images.githubusercontent.com/187460/216186978-3bb02de7-f4b9-4506-9d96-2292b430648e.png">
Ryan Albrecht 2 лет назад
Родитель
Сommit
52f16d70b4
1 измененных файлов с 7 добавлено и 1 удалено
  1. 7 1
      static/app/views/issueDetails/quickTrace/index.tsx

+ 7 - 1
static/app/views/issueDetails/quickTrace/index.tsx

@@ -1,4 +1,5 @@
 import {useContext} from 'react';
+import styled from '@emotion/styled';
 import {Location} from 'history';
 
 import Placeholder from 'sentry/components/placeholder';
@@ -26,7 +27,7 @@ function QuickTrace({event, organization, location, isPerformanceIssue}: Props)
   }
 
   if (quickTrace?.isLoading) {
-    return <Placeholder height="24px" />;
+    return <GrowingPlaceholder height="24px" />;
   }
 
   return (
@@ -40,4 +41,9 @@ function QuickTrace({event, organization, location, isPerformanceIssue}: Props)
   );
 }
 
+const GrowingPlaceholder = styled(Placeholder)`
+  flex-grow: 1;
+  width: auto;
+`;
+
 export default QuickTrace;