Truncate long org names and user menu improvements (#333)

* fix: truncate text in user menu

* fix: truncate overflowing text in sidebar orgname dropdown

* feat: improved role and org arrangement in user menu

* fix: misc tweaks

---------

Co-authored-by: rohan-chaturvedi <rohan.chaturvedi@protonmail.com>

Author: nimish-ks

frontend/components/UserMenu.tsx

@@ -39,26 +39,25 @@ export default function UserMenu() {
           leaveFrom="transform opacity-100 scale-100"
           leaveTo="transform opacity-0 scale-95"
         >
-          <Menu.Items className="absolute z-10 -right-2 top-12 mt-2 w-56 origin-bottom-left divide-y divide-neutral-500/20 rounded-md bg-neutral-200 dark:bg-neutral-800 shadow-lg ring-1 ring-inset ring-neutral-500/40 focus:outline-none">
+          <Menu.Items className="absolute z-20 -right-2 top-12 mt-2 w-72 origin-bottom-left divide-y divide-neutral-500/20 rounded-md bg-neutral-200 dark:bg-neutral-800 shadow-lg ring-1 ring-inset ring-neutral-500/40 focus:outline-none">
             <Menu.Item>
-              <div className="py-4 flex items-start gap-2 p-2 ">
+              <div className="py-4 flex items-start gap-2 p-2">
                 <div className="py-1.5">
                   <Avatar imagePath={session?.user?.image!} size="md" />
                 </div>
-                <div className="flex flex-col gap-2">
-                  <div className="flex flex-col">
-                    <span className="text-xs font-medium text-zinc-900 dark:text-zinc-100 truncate w-40">
+                <div className="flex flex-col flex-grow min-w-0">
+                  <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+                    <span className="text-sm font-medium text-zinc-900 dark:text-zinc-100">
                       {session?.user?.name}
                     </span>
-                    <span className="text-neutral-500 text-2xs truncate w-40">
-                      {session?.user?.email}
-                    </span>
                   </div>
-
+                  <span className="text-neutral-500 text-2xs truncate">{session?.user?.email}</span>
                   {activeOrganisation && (
-                    <div className="flex items-center gap-2 text-2xs">
-                      <RoleLabel role={activeOrganisation?.role!} />
-                      <span>at {activeOrganisation?.name}</span>
+                    <div className="flex items-center gap-1 text-2xs pt-1">
+                      {activeOrganisation && <RoleLabel role={activeOrganisation?.role!} />} @{' '}
+                      <span className="text-zinc-900 dark:text-zinc-100  truncate">
+                        {activeOrganisation?.name}
+                      </span>
                     </div>
                   )}
                 </div>

frontend/components/layout/Sidebar.tsx

@@ -16,7 +16,7 @@ import {
 } from 'react-icons/fa'
 import { organisationContext } from '@/contexts/organisationContext'
 import { Fragment, useContext } from 'react'
-import { ApiOrganisationMemberRoleChoices, OrganisationType } from '@/apollo/graphql'
+import { OrganisationType } from '@/apollo/graphql'
 import { Menu, Transition } from '@headlessui/react'
 import { Button } from '../common/Button'
 import { PlanLabel } from '../settings/organisation/PlanLabel'
@@ -59,14 +59,14 @@ const Sidebar = () => {
 
   const OrgsMenu = () => {
     return (
-      <Menu as="div" className="relative inline-block text-left ">
+      <Menu as="div" className="relative inline-block text-left w-full">
         {({ open }) => (
           <>
             <Menu.Button
               as="div"
               className="p-2 text-neutral-500 cursor-pointer flex items-center justify-between w-full group bg-neutral-500/10 ring-1 ring-inset ring-neutral-400/10 rounded-lg"
             >
-              <div className="flex flex-col gap-0.5">
+              <div className="flex flex-col gap-0.5 min-w-0">
                 <div>
                   <PlanLabel plan={activeOrganisation?.plan!} />
                 </div>
@@ -76,7 +76,7 @@ const Sidebar = () => {
               </div>
               <FaChevronDown
                 className={clsx(
-                  'transition ease opacity-0 group-hover:opacity-100 text-zinc-800 dark:text-zinc-100',
+                  'transition ease opacity-0 group-hover:opacity-100 text-zinc-800 dark:text-zinc-100 flex-shrink-0 ml-2',
                   open ? 'rotate-180 opacity-100' : 'rotate-0'
                 )}
               />
@@ -101,19 +101,19 @@ const Sidebar = () => {
                               title={`Switch to ${org.name}`}
                               className={`${
                                 active
-                                  ? 'hover:text-zinc-900  dark:hover:text-zinc-100 hover:bg-neutral-100 dark:hover:bg-neutral-700'
+                                  ? 'hover:text-zinc-900 dark:hover:text-zinc-100 hover:bg-neutral-100 dark:hover:bg-neutral-700'
                                   : 'text-zinc-700 dark:text-zinc-300 dark:hover:text-emerald-500'
                               } group flex w-full gap-2 items-center justify-between px-2 py-2 border-b border-neutral-500/20`}
                             >
-                              <div className="flex flex-col gap-0.5 w-full">
+                              <div className="flex flex-col gap-0.5 min-w-0 flex-grow">
                                 <div>
                                   <PlanLabel plan={org?.plan!} />
                                 </div>
-                                <span className="truncate w-[80%] text-left font-medium text-base">
+                                <span className="truncate text-left font-medium text-base">
                                   {org.name}
                                 </span>
                               </div>
-                              <FaExchangeAlt />
+                              <FaExchangeAlt className="flex-shrink-0" />
                             </div>
                           </Link>
                         )}

frontend/components/users/RoleLabel.tsx

@@ -15,7 +15,7 @@ export const RoleLabel = (props: { role: string }) => {
   return (
     <span
       className={clsx(
-        'px-2 py-1 rounded-full ring-1 ring-inset uppercase text-2xs font-medium tracking-wide',
+        'px-2 py-0.5 rounded-full ring-1 ring-inset uppercase text-2xs font-medium tracking-wide',
         roleStyle()
       )}
     >