Fix: Overflow for switchers in sidebar, Avatar size in notes tab, Textbox expansion in Add Facility

public/locale/en.json

@@ -1325,6 +1325,7 @@
   "move_to_onvif_preset": "Move to an ONVIF Preset",
   "moving_camera": "Moving Camera",
   "my_doctors": "My Doctors",
+  "my_organizations": "My Organizations",
   "my_profile": "My Profile",
   "my_schedules": "My Schedules",
   "name": "Name",
@@ -1852,6 +1853,7 @@
   "select_location_first": "Select Location First",
   "select_method": "Select method",
   "select_new_role": "Select New Role",
+  "select_organization": "Select Organization",
   "select_patient": "Select Patient",
   "select_policy": "Select an Insurance Policy",
   "select_policy_to_add_items": "Select a Policy to Add Items",

src/components/Common/Avatar.tsx

@@ -57,7 +57,7 @@ const Avatar = React.forwardRef<
   return (
     <AvatarPrimitive.Root
       ref={ref}
-      className={cn("w-full h-full", className)}
+      className={cn(className, "flex items-center justify-center")}
       style={{
         background: bgColor,
       }}
@@ -66,15 +66,15 @@ const Avatar = React.forwardRef<
         <AvatarPrimitive.Image
           src={imageUrl}
           alt={name}
-          className="aspect-square h-full w-full object-cover"
+          className="aspect-square object-cover"
         />
       ) : (
         <AvatarPrimitive.Fallback className="flex h-full w-full select-none items-center justify-center text-center">
           <svg
             xmlns="http://www.w3.org/2000/svg"
             version="1.1"
             viewBox="0 0 100 100"
-            className="aspect-square h-full w-full object-cover"
+            className="aspect-square object-cover"
           >
             <text
               fill={textColor}

src/components/Facility/CreateFacilityForm.tsx

@@ -218,7 +218,6 @@ export default function CreateFacilityForm({
                     {...field}
                     data-cy="facility-description"
                     placeholder="Describe your facility (Markdown supported)"
-                    className="h-24"
                   />
                 </FormControl>
                 <FormMessage />
@@ -305,7 +304,6 @@ export default function CreateFacilityForm({
                     {...field}
                     data-cy="facility-address"
                     placeholder="Enter complete address"
-                    className="h-20"
                   />
                 </FormControl>
                 <FormMessage />

src/components/ui/sidebar/facility-switcher.tsx

@@ -3,6 +3,8 @@ import { Hospital } from "lucide-react";
 import { navigate } from "raviger";
 import { useTranslation } from "react-i18next";
 
+import { cn } from "@/lib/utils";
+
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -51,7 +53,7 @@ export function FacilitySwitcher({
             </SidebarMenuButton>
           </DropdownMenuTrigger>
           <DropdownMenuContent
-            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+            className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg max-h-screen overflow-y-auto"
             align="start"
             side={isMobile ? "bottom" : "right"}
             sideOffset={4}
@@ -72,7 +74,10 @@ export function FacilitySwitcher({
                     setOpenMobile(false);
                   }
                 }}
-                className="gap-2 p-2"
+                className={cn("gap-2 p-2", {
+                  "bg-primary-500 text-white":
+                    facility.name === selectedFacility?.name,
+                })}
               >
                 <div className="flex size-6 items-center justify-center rounded-sm border">
                   <Hospital className="size-4 shrink-0" />

src/components/ui/sidebar/organization-switcher.tsx

@@ -1,6 +1,9 @@
 import { CaretSortIcon, DashboardIcon } from "@radix-ui/react-icons";
 import { Globe } from "lucide-react";
 import { navigate } from "raviger";
+import { useTranslation } from "react-i18next";
+
+import { cn } from "@/lib/utils";
 
 import {
   DropdownMenu,
@@ -29,6 +32,7 @@ export function OrganizationSwitcher({
   selectedOrganization,
 }: Props) {
   const { isMobile, setOpenMobile } = useSidebar();
+  const { t } = useTranslation();
 
   return (
     <DropdownMenu>
@@ -45,8 +49,8 @@ export function OrganizationSwitcher({
               <div className="grid flex-1 text-left text-sm leading-tight">
                 <span className="truncate font-semibold">
                   {selectedOrganization
-                    ? "My Organizations"
-                    : "Select Organization"}
+                    ? t("my_organizations")
+                    : t("select_organization")}
                 </span>
               </div>
               <CaretSortIcon className="ml-auto" />
@@ -55,16 +59,16 @@ export function OrganizationSwitcher({
         </SidebarMenu>
       </DropdownMenuTrigger>
       <DropdownMenuContent
-        className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+        className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg max-h-screen overflow-y-auto"
         align="start"
         side={isMobile ? "bottom" : "right"}
         sideOffset={4}
       >
         <DropdownMenuItem onClick={() => navigate("/")}>
           <DashboardIcon className="size-4" />
-          View Dashboard
+          {t("view_dashboard")}
         </DropdownMenuItem>
-        <DropdownMenuLabel>Organizations</DropdownMenuLabel>
+        <DropdownMenuLabel>{t("organizations")}</DropdownMenuLabel>
         <DropdownMenuSeparator />
         {organizations.map((org) => (
           <DropdownMenuItem
@@ -75,6 +79,10 @@ export function OrganizationSwitcher({
                 setOpenMobile(false);
               }
             }}
+            className={cn("gap-2 p-2", {
+              "bg-primary-500 text-white":
+                org?.name === selectedOrganization?.name,
+            })}
           >
             {org.name}
           </DropdownMenuItem>