Fix access counts position when there is a metadata (#2946)

quiltdata · Jul 21, 2022 · 2bfca97 · 2bfca97
1 parent 45c12dc
commit 2bfca97
Showing 1 changed file with 23 additions and 16 deletions.
diff --git a/catalog/app/containers/Bucket/PackageRevisions/PackageRevisions.tsx b/catalog/app/containers/Bucket/PackageRevisions/PackageRevisions.tsx
@@ -168,6 +168,11 @@ const useRevisionLayoutStyles = M.makeStyles((t) => ({
       marginTop: t.spacing(1),
     },
   },
+  base: {
+    [t.breakpoints.up('sm')]: {
+      position: 'relative',
+    },
+  },
 }))
 
 interface RevisionLayoutProps {
@@ -189,12 +194,24 @@ function RevisionLayout({ link, msg, meta, hash, stats, counts }: RevisionLayout
   const sparklineH = xs ? 32 : 48
   return (
     <M.Paper className={classes.root}>
-      <M.Box pt={2} pl={2} pr={25}>
-        {link}
-      </M.Box>
-      <M.Box py={1} pl={2} pr={xs ? 2 : Math.ceil(sparklineW / t.spacing(1) + 1)}>
-        {msg}
-      </M.Box>
+      <div className={classes.base}>
+        <M.Box pt={2} pl={2} pr={25}>
+          {link}
+        </M.Box>
+        <M.Box py={1} pl={2} pr={xs ? 2 : Math.ceil(sparklineW / t.spacing(1) + 1)}>
+          {msg}
+        </M.Box>
+        <M.Box
+          position="absolute"
+          right={0}
+          bottom={0}
+          top={{ xs: 'auto', sm: 16 }}
+          height={{ xs: 64, sm: 'auto' }}
+          width={sparklineW}
+        >
+          {counts({ sparklineW, sparklineH })}
+        </M.Box>
+      </div>
       {!!meta && (
         <M.Hidden xsDown>
           <M.Divider />
@@ -225,16 +242,6 @@ function RevisionLayout({ link, msg, meta, hash, stats, counts }: RevisionLayout
       >
         {stats}
       </M.Box>
-      <M.Box
-        position="absolute"
-        right={0}
-        bottom={{ xs: 0, sm: 49 }}
-        top={{ xs: 'auto', sm: 16 }}
-        height={{ xs: 64, sm: 'auto' }}
-        width={sparklineW}
-      >
-        {counts({ sparklineW, sparklineH })}
-      </M.Box>
     </M.Paper>
   )
 }