fix(Tag): overflow and width (#6316)

Author: lisalupi

.changeset/major-stars-crash.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+`Tag`: add a max width to ensure correct overflow

packages/ui/src/components/Popup/styles.css.ts

@@ -2,6 +2,7 @@ import { theme } from '@ultraviolet/themes'
 import { keyframes, styleVariants } from '@vanilla-extract/css'
 import { recipe } from '@vanilla-extract/recipes'
 
+import { tagStyle } from '../Tag/styles.css'
 import { tagListStyle } from '../TagList/styles.css'
 
 import { DEFAULT_ARROW_WIDTH } from './helpers'
@@ -118,6 +119,10 @@ const childrenContainer = recipe({
       [`${tagListStyle.ellipsisChild} > &`]: {
         minWidth: 0,
       },
+      [`&:has(${tagStyle.text})`]: {
+        minWidth: 0,
+        width: '100%',
+      },
     },
   },
   variants: {

packages/ui/src/components/Tag/styles.css.ts

@@ -23,6 +23,7 @@ const container = recipe({
     padding: `0 ${theme.space[1]}`,
     whiteSpace: 'nowrap',
     width: 'fit-content',
+    maxWidth: '100%',
   },
   variants: {
     copiable: {