fix: prevents hasMany text going outside of input boundaries (#7454)

## Description

Fixes #6034

`Before`:
![Screenshot 2024-07-31 at 12 26
25 PM](https://github.com/user-attachments/assets/df2cfcda-d81e-42cf-a97d-9552a420b9e8)

`After`:
![Screenshot 2024-07-31 at 12 26
10 PM](https://github.com/user-attachments/assets/fa7c369f-efc3-4aff-95ad-3e2b2525d3c3)

- [x] I have read and understand the
[CONTRIBUTING.md](https://github.com/payloadcms/payload/blob/main/CONTRIBUTING.md)
document in this repository.

## Type of change

- [x] Bug fix (non-breaking change which fixes an issue)

## Checklist:

- [x] Existing test suite passes locally with my changes

packages/payload/src/admin/components/elements/ReactSelect/ValueContainer/index.scss

@@ -22,6 +22,7 @@
       padding-top: base(0.25);
       padding-bottom: base(0.25);
       padding-left: base(0.25);
+      padding-right: base(0.25);
 
       .rs__multi-value {
         margin: calc(#{base(0.125)} - #{$style-stroke-width-s * 2});

packages/payload/src/admin/components/forms/field-types/Text/index.scss

@@ -10,6 +10,12 @@
   }
 }
 
+.has-many {
+  .rs__input-container {
+    overflow: hidden;
+  }
+}
+
 html[data-theme='light'] {
   .field-type.text {
     &.error {