createStandaloneToast - when used all texts gets resized

function CustomToastExample() {
  const toast = createStandaloneToast()
  return (
    <Button
      onClick={() =>
        toast({
          position: "top",
          title: "An error occurred.",
          description: "Unable to create user account.",
          status: "error",
          duration: 3000,
        })
      }
    >
      Show Toast
    </Button>
  )
}

When we use createStandaloneToast for displaying toasts - all the text fields in the screen gets resized one and causes a very bad visual effect. Attached a video of same happening in chakra site. Requesting to check this and fix , as its happening throughout my application. Thank you! Using chakra v1.6.2

https://user-images.githubusercontent.com/39894982/120057548-83c4b700-c061-11eb-8a5c-aa3ec255bca0.mov

[anubra266]

@with-heart we may close this now…I think

I see it has been stated in the docs

[ganeshkrishnasharma]

Thank you both , Much appreciated 🙏 @anubra266 @with-heart