fix: url input field overflows when update profile & editing event (#14033)

* the url input field overflows

* overflow text input changes

* Update UsernameTextfield.tsx

* Eslint error fix

---------

Co-authored-by: Joe Au-Yeung <65426560+joeauyeung@users.noreply.github.com>

apps/web/components/ui/UsernameAvailability/UsernameTextfield.tsx

@@ -10,7 +10,7 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { TRPCClientErrorLike } from "@calcom/trpc/client";
 import { trpc } from "@calcom/trpc/react";
 import type { AppRouter } from "@calcom/trpc/server/routers/_app";
-import { Button, Dialog, DialogClose, DialogContent, TextField, DialogFooter } from "@calcom/ui";
+import { Button, Dialog, DialogClose, DialogContent, TextField, DialogFooter, Tooltip } from "@calcom/ui";
 import { Check, Edit2 } from "@calcom/ui/components/icon";
 
 interface ICustomUsernameProps {
@@ -135,8 +135,8 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.Component
             {...rest}
           />
           {currentUsername !== inputUsernameValue && (
-            <div className="absolute right-[2px] top-6 flex flex-row">
-              <span className={classNames("mx-2 py-3.5")}>
+            <div className="absolute right-[2px] top-6 flex h-7 flex-row">
+              <span className={classNames("bg-default mx-0 p-3")}>
                 {usernameIsAvailable ? <Check className="relative bottom-[6px] h-4 w-4" /> : <></>}
               </span>
             </div>
@@ -157,21 +157,26 @@ const UsernameTextfield = (props: ICustomUsernameProps & Partial<React.Component
         <DialogContent type="confirmation" Icon={Edit2} title={t("confirm_username_change_dialog_title")}>
           <div className="flex flex-row">
             <div className="mb-4 w-full pt-1">
-              <div className="bg-subtle flex w-full flex-wrap gap-6 rounded-sm px-2 py-3 text-sm">
+              <div className="bg-subtle flex w-full flex-wrap justify-between gap-6 rounded-sm  px-4 py-3 text-sm">
                 <div>
                   <p className="text-subtle">{t("current_username")}</p>
-                  <p className="text-emphasis mt-1 break-all" data-testid="current-username">
-                    {currentUsername}
-                  </p>
+                  <Tooltip content={currentUsername}>
+                    <p
+                      className="text-emphasis mt-1 max-w-md overflow-hidden text-ellipsis"
+                      data-testid="current-username">
+                      {currentUsername}
+                    </p>
+                  </Tooltip>
                 </div>
                 <div>
                   <p className="text-subtle" data-testid="new-username">
                     {t("new_username")}
                   </p>
-
-                  <p className="text-emphasis min-h-5 mt-1 max-h-12 overflow-y-auto break-all">
-                    {inputUsernameValue}
-                  </p>
+                  <Tooltip content={inputUsernameValue}>
+                    <p className="text-emphasis mt-1 max-w-md overflow-hidden text-ellipsis">
+                      {inputUsernameValue}
+                    </p>
+                  </Tooltip>
                 </div>
               </div>
             </div>

packages/ui/components/form/inputs/TextField.tsx

@@ -48,7 +48,16 @@ const Addon = ({ isFilled, children, className, error, onClickAddon }: AddonProp
         "min-h-9 flex flex-col justify-center text-sm leading-7",
         error ? "text-error" : "text-default"
       )}>
-      <span className="flex whitespace-nowrap">{children}</span>
+      <span
+        className="flex max-w-2xl overflow-y-auto whitespace-nowrap"
+        style={{
+          WebkitOverflowScrolling: "touch",
+          scrollbarWidth: "none",
+          overflow: "-ms-scroll-chaining",
+          msOverflowStyle: "-ms-autohiding-scrollbar",
+        }}>
+        {children}
+      </span>
     </div>
   </div>
 );