fix: data tooltip sizing

src/styles/_global.scss

@@ -128,14 +128,23 @@ button {
   &:hover::after,
   &:focus-visible::after {
     position: absolute;
-    transform: translateX(10px);
 
     content: attr(data-tooltip);
     color: white;
     background: black;
+    border-radius: 0.5em;
+    margin: 0 0.75em;
     padding: 0.5em;
+
     max-width: 300px;
+
     z-index: 100;
+
+    @media screen and (max-width: $breakpointSm) {
+      left: 50%;
+      transform: translate(-50%, 3ex);
+      text-align: center;
+    }
   }
 }