Workaround horizontal scrolling

src/RTCConnectionStats.tsx

@@ -6,7 +6,7 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { type FC } from "react";
-import { Text, Tooltip, TooltipProvider } from "@vector-im/compound-web";
+import { IconButton, Text } from "@vector-im/compound-web";
 import {
   MicOnSolidIcon,
   VideoCallSolidIcon,
@@ -21,12 +21,14 @@ interface Props {
 export const RTCConnectionStats: FC<Props> = ({ audio, video, ...rest }) => {
   return (
     <div>
-      <TooltipProvider>
       {audio && (
         <div>
-            <Tooltip label={JSON.stringify(audio, null, 2)}>
+          <IconButton
+            onClick={() => alert(JSON.stringify(audio, null, 2))}
+            size="sm"
+          >
             <MicOnSolidIcon />
-            </Tooltip>
+          </IconButton>
           {"jitter" in audio && typeof audio.jitter === "number" && (
             <Text as="span" size="xs" title="jitter">
               &nbsp;{(audio.jitter * 1000).toFixed(0)}ms
@@ -36,11 +38,12 @@ export const RTCConnectionStats: FC<Props> = ({ audio, video, ...rest }) => {
       )}
       {video && (
         <div>
-            {video && (
+          <IconButton
-              <Tooltip label={JSON.stringify(video, null, 2)}>
+            onClick={() => alert(JSON.stringify(video, null, 2))}
+            size="sm"
+          >
             <VideoCallSolidIcon />
-              </Tooltip>
+          </IconButton>
-            )}
           {video?.framesPerSecond && (
             <Text as="span" size="xs" title="frame rate">
               &nbsp;{video.framesPerSecond.toFixed(0)}fps
@@ -68,7 +71,6 @@ export const RTCConnectionStats: FC<Props> = ({ audio, video, ...rest }) => {
             )}
         </div>
       )}
-      </TooltipProvider>
     </div>
   );
 };