fix: use tooltip portals, remove cancel upload button tooltips until portal issues are fixed in ui

Author: robinpyon

src/components/CardUpload/index.tsx

@@ -1,6 +1,6 @@
 import {hues} from '@sanity/color'
 import {CloseIcon} from '@sanity/icons'
-import {Box, Button, Flex, Text, Tooltip} from '@sanity/ui'
+import {Box, Button, Flex, Text} from '@sanity/ui'
 import filesize from 'filesize'
 import React from 'react'
 import {useDispatch} from 'react-redux'
@@ -102,10 +102,10 @@ const CardUpload = (props: Props) => {
             </div>
           )}
 
-          {/* 
+          {/*
           Cancel upload button.
           Assets will only have a `complete` status _after_ it has been created on your dataset.
-          As such, we also hide the cancel button when `percentLoaded === 100`, as cancelling when the asset 
+          As such, we also hide the cancel button when `percentLoaded === 100`, as cancelling when the asset
           has been fully uploaded (even with a status of `progress`) won't stop the asset from being created.
         */}
           {!isComplete && percentLoaded !== 100 && (
@@ -121,27 +121,15 @@ const CardUpload = (props: Props) => {
                 width: '100%'
               }}
             >
-              <Tooltip
-                content={
-                  <Box padding={2}>
-                    <Text muted size={1}>
-                      Cancel
-                    </Text>
-                  </Box>
-                }
-                disabled={'ontouchstart' in window}
-                placement="top"
-              >
-                <Button
-                  fontSize={4}
-                  icon={CloseIcon}
-                  mode="bleed"
-                  onClick={handleCancelUpload}
-                  padding={2}
-                  style={{background: 'none', boxShadow: 'none'}}
-                  tone="critical"
-                />
-              </Tooltip>
+              <Button
+                fontSize={4}
+                icon={CloseIcon}
+                mode="bleed"
+                onClick={handleCancelUpload}
+                padding={2}
+                style={{background: 'none', boxShadow: 'none'}}
+                tone="critical"
+              />
             </Flex>
           )}
         </Box>

src/components/DebugControls/index.tsx

@@ -60,6 +60,7 @@ const DebugControls = () => {
           }
           fallbackPlacements={['right', 'left']}
           placement="bottom"
+          portal
         >
           <Switch
             checked={badConnection}

src/components/FormSubmitButton/index.tsx

@@ -40,6 +40,7 @@ const FormSubmitButton = (props: Props) => {
       }
       disabled={'ontouchstart' in window}
       placement="top"
+      portal
     >
       <Box>
         <Button

src/components/TableRowUpload/index.tsx

@@ -1,6 +1,6 @@
 import {hues} from '@sanity/color'
 import {CloseIcon} from '@sanity/icons'
-import {Box, Button, Flex, Grid, Stack, Text, Tooltip, useMediaIndex} from '@sanity/ui'
+import {Box, Button, Flex, Grid, Stack, Text, useMediaIndex} from '@sanity/ui'
 import filesize from 'filesize'
 import React from 'react'
 import {useDispatch} from 'react-redux'
@@ -100,10 +100,10 @@ const TableRowUpload = (props: Props) => {
             </div>
           )}
 
-          {/* 
+          {/*
             Cancel upload button.
             Assets will only have a `complete` status _after_ it has been created on your dataset.
-            As such, we also hide the cancel button when `percentLoaded === 100`, as cancelling when the asset 
+            As such, we also hide the cancel button when `percentLoaded === 100`, as cancelling when the asset
             has been fully uploaded (even with a status of `progress`) won't stop the asset from being created.
           */}
           {!isComplete && percentLoaded !== 100 && (
@@ -118,27 +118,15 @@ const TableRowUpload = (props: Props) => {
                 width: '100%'
               }}
             >
-              <Tooltip
-                content={
-                  <Box padding={2}>
-                    <Text muted size={1}>
-                      Cancel
-                    </Text>
-                  </Box>
-                }
-                disabled={'ontouchstart' in window}
-                placement="top"
-              >
-                <Button
-                  fontSize={3}
-                  icon={CloseIcon}
-                  mode="bleed"
-                  onClick={handleCancelUpload}
-                  padding={2}
-                  style={{background: 'none', boxShadow: 'none'}}
-                  tone="critical"
-                />
-              </Tooltip>
+              <Button
+                fontSize={3}
+                icon={CloseIcon}
+                mode="bleed"
+                onClick={handleCancelUpload}
+                padding={2}
+                style={{background: 'none', boxShadow: 'none'}}
+                tone="critical"
+              />
             </Flex>
           )}
         </Box>

src/components/Tag/index.tsx

@@ -44,6 +44,7 @@ type TagButtonProps = {
 
 const TagButton = (props: TagButtonProps) => {
   const {disabled, icon, onClick, tone, tooltip} = props
+
   return (
     <Tooltip
       content={
@@ -55,6 +56,7 @@ const TagButton = (props: TagButtonProps) => {
       }
       disabled={'ontouchstart' in window}
       placement="top"
+      portal
     >
       <Button
         disabled={disabled}