fix(bundle-report): adjust build history style

perfsee · Feb 15, 2023 · 9fe51f5 · 9fe51f5
1 parent 1e8b3df
commit 9fe51f5
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/packages/bundle-report/src/bundle-detail/build-history.tsx b/packages/bundle-report/src/bundle-detail/build-history.tsx
@@ -49,11 +49,19 @@ const CommitInfoContainer = styled.div(({ theme }) => ({
 
 const BuildHistoryItem = styled.div({
   overflow: 'hidden',
-  flexShrink: 0,
+  flexShrink: 1,
   flexGrow: '1',
   flexBasis: '100%',
 })
 
+const BuildHistoryContainer = styled(Stack)({
+  gap: '8px',
+  '@media(max-width: 960px)': {
+    flexWrap: 'wrap',
+    gap: '32px',
+  },
+})
+
 interface Props {
   artifact: ArtifactDiff
   onBaselineSelectorOpen?: () => void
@@ -62,7 +70,7 @@ export const BuildHistory: FC<Props> = ({ artifact, onBaselineSelectorOpen }) =>
   const { baseline, project } = artifact
   return (
     <BundleCard>
-      <Stack horizontal verticalAlign="center" tokens={{ childrenGap: 8 }}>
+      <BuildHistoryContainer horizontal verticalAlign="center">
         <BuildHistoryItem>
           <BuildRound>#{artifact.id}</BuildRound>
           <Tag type="warning">current</Tag>
@@ -95,7 +103,7 @@ export const BuildHistory: FC<Props> = ({ artifact, onBaselineSelectorOpen }) =>
             </BuildHistoryItem>
           )
         )}
-      </Stack>
+      </BuildHistoryContainer>
     </BundleCard>
   )
 }

diff --git a/packages/components/src/layout/container.tsx b/packages/components/src/layout/container.tsx
@@ -43,6 +43,7 @@ const BodyContainerInner = styled.div<{ wide?: boolean }>(({ theme, wide }) => (
   display: 'flex',
   flexDirection: 'column',
   padding: `20px ${theme.layout.mainPadding} 0`,
+  maxWidth: '100vw',
   ...(wide
     ? {
         width: '100%',