fix: tanstack getRight error, focus in user impersonation, missing space after input fields, border in my-profile email (#19350)

* fix: shadow after email and before the primary label

* fix: autofill input shadow in impersonation view

* fix: improve spacing and layout in EditUserForm

* fix: error due to getRight

---------

Co-authored-by: Peer Richelsen <peeroke@gmail.com>

apps/web/components/settings/CustomEmailTextField.tsx

@@ -4,7 +4,6 @@ import type { UseFormReturn } from "react-hook-form";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import {
   Badge,
-  TextField,
   Dropdown,
   DropdownItem,
   DropdownMenuContent,
@@ -48,11 +47,9 @@ const CustomEmailTextField = ({
         className={`border-default mt-2 flex w-full items-center rounded-[10px] border ${
           inputFocus ? "ring-brand-default border-neutral-300 ring-2" : ""
         }`}>
-        <TextField
+        <input
           {...formMethods.register(formMethodFieldName)}
-          label=""
-          containerClassName="flex flex-1 items-center"
-          className="mb-0 border-none outline-none focus:ring-0"
+          className="flex-1 bg-transparent px-3 py-1 text-sm outline-none"
           data-testid={dataTestId}
           onFocus={() => setInputFocus(true)}
           onBlur={() => setInputFocus(false)}

apps/web/modules/settings/admin/impersonation-view.tsx

@@ -38,7 +38,7 @@ const ImpersonationView = () => {
       }}>
       <div className="flex items-center space-x-2 rtl:space-x-reverse">
         <TextField
-          containerClassName="w-full"
+          containerClassName="w-full [&_input:-webkit-autofill]:!shadow-[0_0_0_1000px_white_inset]"
           name={t("user_impersonation_heading")}
           addOnLeading={<>{process.env.NEXT_PUBLIC_WEBSITE_URL}/</>}
           ref={usernameRef}

packages/features/data-table/components/DataTable.tsx

@@ -153,7 +153,7 @@ export function DataTable<TData, TValue>({
                         key={header.id}
                         style={{
                           ...(column.getIsPinned() === "left" && { left: `${column.getStart("left")}px` }),
-                          ...(column.getIsPinned() === "right" && { right: `${column.getAfter("right")}px` }),
+                          ...(column.getIsPinned() === "right" && { right: `${column.getStart("right")}px` }),
                           width: `var(--header-${kebabCase(header?.id)}-size)`,
                         }}
                         className={classNames(
@@ -271,7 +271,7 @@ function DataTableBody<TData>({
                     key={cell.id}
                     style={{
                       ...(column.getIsPinned() === "left" && { left: `${column.getStart("left")}px` }),
-                      ...(column.getIsPinned() === "right" && { right: `${column.getAfter("right")}px` }),
+                      ...(column.getIsPinned() === "right" && { right: `${column.getStart("right")}px` }),
                       width: `var(--col-${kebabCase(cell.column.id)}-size)`,
                     }}
                     className={classNames(

packages/features/users/components/UserTable/EditSheet/EditUserForm.tsx

@@ -195,10 +195,10 @@ export function EditForm({
             />
           </div>
           <Divider />
-          <TextField label={t("name")} {...form.register("name")} />
-          <TextField label={t("username")} {...form.register("username")} />
-          <TextAreaField label={t("about")} {...form.register("bio")} className="min-h-24" />
-          <div>
+          <TextField label={t("name")} {...form.register("name")} className="mb-6" />
+          <TextField label={t("username")} {...form.register("username")} className="mb-6" />
+          <TextAreaField label={t("about")} {...form.register("bio")} className="min-h-24 mb-6" />
+          <div className="mb-6">
             <Label>{t("role")}</Label>
             <ToggleGroup
               isFullWidth
@@ -210,7 +210,7 @@ export function EditForm({
               }}
             />
           </div>
-          <div className="mb-4">
+          <div className="mb-6">
             <Label>{t("timezone")}</Label>
             <TimezoneSelect value={watchTimezone ?? "America/Los_Angeles"} />
           </div>