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

## Description

V2 PR [here](#7454)

`Before`:
![Screenshot 2024-07-31 at 12 40
50 PM](https://github.com/user-attachments/assets/ce61f4fc-e676-4273-aa4c-72610cb459b3)

`After`:
![Screenshot 2024-07-31 at 12 40
23 PM](https://github.com/user-attachments/assets/d92631eb-28fb-46ca-bc23-46c7916bba34)

- [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

Author: PatrikKozak

packages/db-sqlite/src/schema/createIndex.ts

@@ -1,4 +1,4 @@
-import type { AnySQLiteColumn} from 'drizzle-orm/sqlite-core';
+import type { AnySQLiteColumn } from 'drizzle-orm/sqlite-core'
 
 import { index, uniqueIndex } from 'drizzle-orm/sqlite-core'
 

packages/next/src/views/Login/LoginField/index.tsx

@@ -47,11 +47,11 @@ export const LoginField: React.FC<LoginFieldProps> = ({ type, required = true })
         validate={(value, options) => {
           const passesUsername = username(
             value,
-            options as ValidateOptions<any, { email?: string }, any, string>,
+            options,
           )
           const passesEmail = email(
             value,
-            options as ValidateOptions<any, { username?: string }, any, string>,
+            options,
           )
 
           if (!passesEmail && !passesUsername) {

packages/ui/src/elements/ReactSelect/ValueContainer/index.scss

@@ -21,7 +21,7 @@
     }
 
     &--is-multi {
-      width: calc(100% + base(0.5));
+      width: calc(100% + base(0.25));
 
       &.rs__value-container--has-value {
         padding: 0;

packages/ui/src/fields/Text/index.scss

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

test/hooks/collections/Hook/index.ts

@@ -12,7 +12,11 @@ const Hooks: CollectionConfig = {
   hooks: {
     beforeOperation: [
       ({ operation, req }) => {
-        if (typeof req.payload.db.beginTransaction === 'function' && !req.transactionID && ['create', 'delete', 'update'].includes(operation)) {
+        if (
+          typeof req.payload.db.beginTransaction === 'function' &&
+          !req.transactionID &&
+          ['create', 'delete', 'update'].includes(operation)
+        ) {
           throw new Error('transactionID is missing in beforeOperation hook')
         }
       },