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/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,11 @@ export function FacilitySwitcher({
                     setOpenMobile(false);
                   }
                 }}
-                className="gap-2 p-2"
+                className={cn(
+                  "gap-2 p-2",
+                  facility.name === selectedFacility?.name &&
+                    "bg-primary-500 text-white",
+                )}
               >
                 <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,11 @@ export function OrganizationSwitcher({
                 setOpenMobile(false);
               }
             }}
+            className={cn(
+              "gap-2 p-2",
+              org?.name === selectedOrganization?.name &&
+                "bg-primary-500 text-white",
+            )}
           >
             {org.name}
           </DropdownMenuItem>

src/pages/Encounters/tabs/EncounterNotesTab.tsx

@@ -153,7 +153,7 @@ const MessageItem = ({ message }: { message: Message }) => {
         <TooltipProvider>
           <Tooltip>
             <TooltipTrigger asChild>
-              <div className="flex-shrink-0">
+              <div className="flex">
                 <Avatar
                   name={message.created_by.username}
                   imageUrl={message.created_by.profile_picture_url}