🩹(frontend) fix text overflow in message notification

Minor issue, layout overflow occurred when sharing url or
long text.

src/frontend/src/features/notifications/components/ToastMessageReceived.tsx

@@ -64,7 +64,7 @@ export function ToastMessageReceived({ state, ...props }: ToastProps) {
             />
             <span>{participant.name}</span>
           </div>
-          <Text margin={false} wrap={'pretty'} centered={false}>
+          <Text margin={false} centered={false} wrap={'pretty'} fullWidth>
             {message}
           </Text>
         </div>

src/frontend/src/primitives/Text.tsx

@@ -92,6 +92,11 @@ export const text = cva({
         marginBottom: 0.5,
       },
     },
+    fullWidth: {
+      true: {
+        width: '100%',
+      },
+    },
     last: {
       true: {
         marginBottom: '0!',