select z index fix and input box default length fix (#570)

* select z index fix and input box default length fix

* z-index for shadcn-ui updated to default

* fix: sidebar expand button overlap

---------

Co-authored-by: BlankParticle <[email protected]>

Author: yash-kh

apps/web/src/app/[orgShortCode]/_components/sidebar-content.tsx

@@ -59,7 +59,7 @@ export default function SidebarContent() {
   return (
     <div
       className={cn(
-        'bg-slate-3 border-slate-5 z-40 flex h-full w-full min-w-56 resize-x flex-col items-start gap-4 rounded-2xl border p-2'
+        'bg-slate-3 border-slate-5 z-[1] flex h-full w-full min-w-56 resize-x flex-col items-start gap-4 rounded-2xl border p-2'
       )}>
       <OrgMenu />
       <div
@@ -177,7 +177,7 @@ function OrgMenu() {
             <CaretUpDown className={'h-4 w-4'} />
           </div>
         </DropdownMenuTrigger>
-        <DropdownMenuContent className="bg-slate-1 border-slate-5 z-[101] flex w-[214px] flex-col gap-0 p-0">
+        <DropdownMenuContent className="bg-slate-1 border-slate-5 flex w-[214px] flex-col gap-0 p-0">
           <DropdownMenuLabel className={'px-0 py-0'}>
             <div className="flex flex-col items-start justify-start gap-2 p-3">
               <span className={'text-slate-11 text-xs font-medium uppercase'}>
@@ -338,7 +338,7 @@ function OrgMenu() {
                 </div>
               </DropdownMenuSubTrigger>
               <DropdownMenuPortal>
-                <DropdownMenuSubContent className="z-[102]">
+                <DropdownMenuSubContent>
                   <DropdownMenuItem>
                     <div
                       className={

apps/web/src/app/[orgShortCode]/_components/sidebar.tsx

@@ -34,7 +34,7 @@ export default function Sidebar() {
       )}>
       <div
         className={cn(
-          'absolute z-[100] m-0 flex h-full flex-row items-start justify-center gap-0 p-2 transition-all duration-1000 ease-in-out',
+          'absolute m-0 flex h-full flex-row items-start justify-center gap-0 p-2 transition-all duration-1000 ease-in-out',
           !isSidebarAutoCollapsed && sidebarDocked
             ? 'left-0 w-60 pr-0'
             : 'w-[252px] pr-3',
@@ -59,7 +59,7 @@ export default function Sidebar() {
         {!isSidebarAutoCollapsed && (
           <div
             className={cn(
-              'bg-slate-3 focus-within:bg-slate-5 border-slate-5 absolute top-[34px] z-[90] flex h-6 w-4 max-w-4 cursor-pointer items-center justify-end overflow-visible rounded-br-[7px] rounded-tr-[7px] border border-l-0 transition-all duration-1000 ease-in-out',
+              'bg-slate-3 focus-within:bg-slate-5 border-slate-5 absolute top-[34px] z-[1] flex h-6 w-4 max-w-4 cursor-pointer items-center justify-end overflow-visible rounded-br-[7px] rounded-tr-[7px] border border-l-0 transition-all duration-1000 ease-in-out',
               sidebarExpanded ? 'visible opacity-100' : 'invisible opacity-0',
               sidebarDocked ? '-right-[15px]' : '-right-[3px]'
             )}>
@@ -82,7 +82,7 @@ export default function Sidebar() {
         {isSidebarAutoCollapsed && (
           <div
             className={cn(
-              'bg-slate-3 focus-within:bg-slate-5 border-slate-5 absolute -right-[19px] top-[26px] z-[90] flex h-10 w-8 max-w-8 cursor-pointer items-center justify-end overflow-visible rounded-br-[7px] rounded-tr-[7px] border border-l-0 transition-all duration-1000 ease-in-out',
+              'bg-slate-3 focus-within:bg-slate-5 border-slate-5 absolute -right-[19px] top-[26px] flex h-10 w-8 max-w-8 cursor-pointer items-center justify-end overflow-visible rounded-br-[7px] rounded-tr-[7px] border border-l-0 transition-all duration-1000 ease-in-out',
               sidebarExpanded ? 'visible opacity-100' : 'invisible opacity-0'
             )}>
             <div

apps/web/src/app/[orgShortCode]/settings/org/users/teams/_components/new-team-modal.tsx

@@ -163,6 +163,7 @@ export function NewTeamModal() {
                         value={field.state.value ?? ''}
                         onChange={(e) => field.handleChange(e.target.value)}
                         onBlur={field.handleBlur}
+                        className="w-72"
                       />
                       {field.state.meta.errorMap.onBlur && (
                         <span className="text-red-10">

apps/web/src/components/avatar-plus.tsx

@@ -43,7 +43,7 @@ export default function AvatarPlus({ size, users }: AvatarPlusProps) {
         </HoverCardTrigger>
         <HoverCardPortal>
           <HoverCardContent
-            className="absolute z-50"
+            className="absolute"
             side="right">
             <div className="flex gap-2">
               {rest.map((user) => (

apps/web/src/components/shadcn-ui/dialog.tsx

@@ -19,7 +19,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[500] bg-black/80',
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
       className
     )}
     {...props}
@@ -36,7 +36,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-[501] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
+        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
         className
       )}
       {...props}>

apps/web/src/components/shadcn-ui/tooltip.tsx

@@ -18,7 +18,7 @@ const TooltipContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        'bg-base-12 text-base-1 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[1000] overflow-hidden rounded-md px-3 py-1.5 text-xs',
+        'bg-base-12 text-base-1 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 overflow-hidden rounded-md px-3 py-1.5 text-xs',
         className
       )}
       {...props}