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

style(replays): fix network tab css (#58497)

Fixes some small CSS styling for the network tab on the details page
- long network URLs are cut off if the screen size small; fixed by
allowing overflow scroll (closes
https://github.com/getsentry/sentry/issues/53962)
- copy button was overlapping with long response bodies

Before (URL cut off):
<img width="495" alt="url before"
src="https://github.com/getsentry/sentry/assets/56095982/5735387d-3920-4e6a-9ae9-7e1915b95882">

After (scrollable):


https://github.com/getsentry/sentry/assets/56095982/467e7187-9d3f-4b67-ad67-ddf9833ef003

Before (copy button overlap):


https://github.com/getsentry/sentry/assets/56095982/939ec72a-d2fa-4455-8fa4-63c56420f03f

After:


https://github.com/getsentry/sentry/assets/56095982/20239b99-0286-447b-8af1-81a6d7eedc5b
Michelle Zhang 1 год назад
Родитель
Сommit
ec6a832162

+ 5 - 1
static/app/components/objectInspector.tsx

@@ -60,7 +60,7 @@ function ObjectInspector({data, onCopy, showCopyButton, theme, ...props}: Props)
           size="xs"
           text={JSON.stringify(data, null, '\t')}
         />
-        {inspector}
+        <InspectorWrapper>{inspector}</InspectorWrapper>
       </Wrapper>
     );
   }
@@ -68,6 +68,10 @@ function ObjectInspector({data, onCopy, showCopyButton, theme, ...props}: Props)
   return inspector;
 }
 
+const InspectorWrapper = styled('div')`
+  margin-right: ${space(4)};
+`;
+
 const Wrapper = styled('div')`
   position: relative;
 

+ 5 - 1
static/app/views/replays/detail/network/details/components.tsx

@@ -58,7 +58,7 @@ export function keyValueTableOrNotFound(data: KeyValueTuple[], notFoundText: str
           key={key}
           keyName={key}
           type={type}
-          value={<span>{value}</span>}
+          value={<ValueContainer>{value}</ValueContainer>}
         />
       ))}
     </StyledKeyValueTable>
@@ -69,6 +69,10 @@ export function keyValueTableOrNotFound(data: KeyValueTuple[], notFoundText: str
   );
 }
 
+const ValueContainer = styled('span')`
+  overflow: scroll;
+`;
+
 const SectionTitle = styled('dt')``;
 
 const SectionTitleExtra = styled('span')`