From 067f421b5cb02fab59243d6457c1ba7b6c62ef41 Mon Sep 17 00:00:00 2001
From: Rishith25 <kamishetty.rishith@gmail.com>
Date: Thu, 16 Jan 2025 09:30:50 +0530
Subject: [PATCH 1/6] overflow for switchers in sidebar

---
 src/components/ui/sidebar/facility-switcher.tsx     | 8 ++++++--
 src/components/ui/sidebar/organization-switcher.tsx | 7 ++++++-
 src/pages/Encounters/tabs/EncounterNotesTab.tsx     | 4 ++--
 3 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/src/components/ui/sidebar/facility-switcher.tsx b/src/components/ui/sidebar/facility-switcher.tsx
index 0769f2a825f..ab544c35685 100644
--- a/src/components/ui/sidebar/facility-switcher.tsx
+++ b/src/components/ui/sidebar/facility-switcher.tsx
@@ -51,7 +51,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 +72,11 @@ export function FacilitySwitcher({
                     setOpenMobile(false);
                   }
                 }}
-                className="gap-2 p-2"
+                className={`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" />
diff --git a/src/components/ui/sidebar/organization-switcher.tsx b/src/components/ui/sidebar/organization-switcher.tsx
index d5af48af504..cf314a39709 100644
--- a/src/components/ui/sidebar/organization-switcher.tsx
+++ b/src/components/ui/sidebar/organization-switcher.tsx
@@ -55,7 +55,7 @@ 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}
@@ -75,6 +75,11 @@ export function OrganizationSwitcher({
                 setOpenMobile(false);
               }
             }}
+            className={`gap-2 p-2 ${
+              org?.name === selectedOrganization?.name
+                ? "bg-primary-500 text-white"
+                : ""
+            }`}
           >
             {org.name}
           </DropdownMenuItem>
diff --git a/src/pages/Encounters/tabs/EncounterNotesTab.tsx b/src/pages/Encounters/tabs/EncounterNotesTab.tsx
index d8a93b592c5..0bad0549e58 100644
--- a/src/pages/Encounters/tabs/EncounterNotesTab.tsx
+++ b/src/pages/Encounters/tabs/EncounterNotesTab.tsx
@@ -153,11 +153,11 @@ const MessageItem = ({ message }: { message: Message }) => {
         <TooltipProvider>
           <Tooltip>
             <TooltipTrigger asChild>
-              <div className="flex-shrink-0">
+              <div className="flex-shrink-0 w-8 h-8 bg-secondary-300 rounded-full">
                 <Avatar
                   name={message.created_by.username}
                   imageUrl={message.created_by.profile_picture_url}
-                  className="w-8 h-8 rounded-full object-cover"
+                  className="object-cover"
                 />
               </div>
             </TooltipTrigger>

From ffe1c8a7c3004542ee91b66b8fc080bcf9f620e5 Mon Sep 17 00:00:00 2001
From: Rishith25 <kamishetty.rishith@gmail.com>
Date: Thu, 16 Jan 2025 09:40:42 +0530
Subject: [PATCH 2/6] translation corrected

---
 public/locale/en.json                               |  2 ++
 src/components/ui/sidebar/organization-switcher.tsx | 10 ++++++----
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/public/locale/en.json b/public/locale/en.json
index c827a055dd0..909b49b94fb 100644
--- a/public/locale/en.json
+++ b/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",
diff --git a/src/components/ui/sidebar/organization-switcher.tsx b/src/components/ui/sidebar/organization-switcher.tsx
index cf314a39709..2088a78767c 100644
--- a/src/components/ui/sidebar/organization-switcher.tsx
+++ b/src/components/ui/sidebar/organization-switcher.tsx
@@ -1,6 +1,7 @@
 import { CaretSortIcon, DashboardIcon } from "@radix-ui/react-icons";
 import { Globe } from "lucide-react";
 import { navigate } from "raviger";
+import { useTranslation } from "react-i18next";
 
 import {
   DropdownMenu,
@@ -29,6 +30,7 @@ export function OrganizationSwitcher({
   selectedOrganization,
 }: Props) {
   const { isMobile, setOpenMobile } = useSidebar();
+  const { t } = useTranslation();
 
   return (
     <DropdownMenu>
@@ -45,8 +47,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" />
@@ -62,9 +64,9 @@ export function OrganizationSwitcher({
       >
         <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

From d8fec9c0322e05891220292c455cc6b3d0bed3b0 Mon Sep 17 00:00:00 2001
From: Rishith25 <kamishetty.rishith@gmail.com>
Date: Thu, 16 Jan 2025 10:25:56 +0530
Subject: [PATCH 3/6] requested changes done

---
 src/components/Common/Avatar.tsx                    |  6 +++---
 src/components/Facility/CreateFacilityForm.tsx      |  2 --
 src/components/ui/sidebar/facility-switcher.tsx     | 11 ++++++-----
 src/components/ui/sidebar/organization-switcher.tsx | 11 ++++++-----
 src/pages/Encounters/tabs/EncounterNotesTab.tsx     |  4 ++--
 5 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/components/Common/Avatar.tsx b/src/components/Common/Avatar.tsx
index 05337526142..4fb4f9a8903 100644
--- a/src/components/Common/Avatar.tsx
+++ b/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,7 +66,7 @@ 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">
@@ -74,7 +74,7 @@ const Avatar = React.forwardRef<
             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}
diff --git a/src/components/Facility/CreateFacilityForm.tsx b/src/components/Facility/CreateFacilityForm.tsx
index 718da1d2318..3db298fa9c8 100644
--- a/src/components/Facility/CreateFacilityForm.tsx
+++ b/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 />
diff --git a/src/components/ui/sidebar/facility-switcher.tsx b/src/components/ui/sidebar/facility-switcher.tsx
index ab544c35685..237e1344fbe 100644
--- a/src/components/ui/sidebar/facility-switcher.tsx
+++ b/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,
@@ -72,11 +74,10 @@ export function FacilitySwitcher({
                     setOpenMobile(false);
                   }
                 }}
-                className={`gap-2 p-2 ${
-                  facility.name === selectedFacility?.name
-                    ? "bg-primary-500 text-white"
-                    : ""
-                }`}
+                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" />
diff --git a/src/components/ui/sidebar/organization-switcher.tsx b/src/components/ui/sidebar/organization-switcher.tsx
index 2088a78767c..17938085bd9 100644
--- a/src/components/ui/sidebar/organization-switcher.tsx
+++ b/src/components/ui/sidebar/organization-switcher.tsx
@@ -3,6 +3,8 @@ import { Globe } from "lucide-react";
 import { navigate } from "raviger";
 import { useTranslation } from "react-i18next";
 
+import { cn } from "@/lib/utils";
+
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -77,11 +79,10 @@ export function OrganizationSwitcher({
                 setOpenMobile(false);
               }
             }}
-            className={`gap-2 p-2 ${
-              org?.name === selectedOrganization?.name
-                ? "bg-primary-500 text-white"
-                : ""
-            }`}
+            className={cn("gap-2 p-2", {
+              "bg-primary-500 text-white":
+                org?.name === selectedOrganization?.name,
+            })}
           >
             {org.name}
           </DropdownMenuItem>
diff --git a/src/pages/Encounters/tabs/EncounterNotesTab.tsx b/src/pages/Encounters/tabs/EncounterNotesTab.tsx
index 0bad0549e58..d8a93b592c5 100644
--- a/src/pages/Encounters/tabs/EncounterNotesTab.tsx
+++ b/src/pages/Encounters/tabs/EncounterNotesTab.tsx
@@ -153,11 +153,11 @@ const MessageItem = ({ message }: { message: Message }) => {
         <TooltipProvider>
           <Tooltip>
             <TooltipTrigger asChild>
-              <div className="flex-shrink-0 w-8 h-8 bg-secondary-300 rounded-full">
+              <div className="flex-shrink-0">
                 <Avatar
                   name={message.created_by.username}
                   imageUrl={message.created_by.profile_picture_url}
-                  className="object-cover"
+                  className="w-8 h-8 rounded-full object-cover"
                 />
               </div>
             </TooltipTrigger>

From 8e522676df99053eed5aa661932a8c5c7185150c Mon Sep 17 00:00:00 2001
From: Rishith25 <kamishetty.rishith@gmail.com>
Date: Thu, 16 Jan 2025 10:45:53 +0530
Subject: [PATCH 4/6] added correct avatar changes

---
 src/components/Common/Avatar.tsx                    | 6 +++---
 src/components/ui/sidebar/facility-switcher.tsx     | 9 +++++----
 src/components/ui/sidebar/organization-switcher.tsx | 9 +++++----
 src/pages/Encounters/tabs/EncounterNotesTab.tsx     | 2 +-
 4 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/components/Common/Avatar.tsx b/src/components/Common/Avatar.tsx
index 4fb4f9a8903..8d3d659d6eb 100644
--- a/src/components/Common/Avatar.tsx
+++ b/src/components/Common/Avatar.tsx
@@ -57,7 +57,7 @@ const Avatar = React.forwardRef<
   return (
     <AvatarPrimitive.Root
       ref={ref}
-      className={cn(className, "flex items-center justify-center")}
+      className={cn("h-full w-full", className)}
       style={{
         background: bgColor,
       }}
@@ -66,7 +66,7 @@ const Avatar = React.forwardRef<
         <AvatarPrimitive.Image
           src={imageUrl}
           alt={name}
-          className="aspect-square object-cover"
+          className="aspect-square h-full w-full object-cover"
         />
       ) : (
         <AvatarPrimitive.Fallback className="flex h-full w-full select-none items-center justify-center text-center">
@@ -74,7 +74,7 @@ const Avatar = React.forwardRef<
             xmlns="http://www.w3.org/2000/svg"
             version="1.1"
             viewBox="0 0 100 100"
-            className="aspect-square object-cover"
+            className="aspect-square h-full w-full object-cover"
           >
             <text
               fill={textColor}
diff --git a/src/components/ui/sidebar/facility-switcher.tsx b/src/components/ui/sidebar/facility-switcher.tsx
index 237e1344fbe..b14c8c275ea 100644
--- a/src/components/ui/sidebar/facility-switcher.tsx
+++ b/src/components/ui/sidebar/facility-switcher.tsx
@@ -74,10 +74,11 @@ export function FacilitySwitcher({
                     setOpenMobile(false);
                   }
                 }}
-                className={cn("gap-2 p-2", {
-                  "bg-primary-500 text-white":
-                    facility.name === selectedFacility?.name,
-                })}
+                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" />
diff --git a/src/components/ui/sidebar/organization-switcher.tsx b/src/components/ui/sidebar/organization-switcher.tsx
index 17938085bd9..7db6018da7a 100644
--- a/src/components/ui/sidebar/organization-switcher.tsx
+++ b/src/components/ui/sidebar/organization-switcher.tsx
@@ -79,10 +79,11 @@ export function OrganizationSwitcher({
                 setOpenMobile(false);
               }
             }}
-            className={cn("gap-2 p-2", {
-              "bg-primary-500 text-white":
-                org?.name === selectedOrganization?.name,
-            })}
+            className={cn(
+              "gap-2 p-2",
+              org?.name === selectedOrganization?.name &&
+                "bg-primary-500 text-white",
+            )}
           >
             {org.name}
           </DropdownMenuItem>
diff --git a/src/pages/Encounters/tabs/EncounterNotesTab.tsx b/src/pages/Encounters/tabs/EncounterNotesTab.tsx
index d8a93b592c5..3067842040d 100644
--- a/src/pages/Encounters/tabs/EncounterNotesTab.tsx
+++ b/src/pages/Encounters/tabs/EncounterNotesTab.tsx
@@ -157,7 +157,7 @@ const MessageItem = ({ message }: { message: Message }) => {
                 <Avatar
                   name={message.created_by.username}
                   imageUrl={message.created_by.profile_picture_url}
-                  className="w-8 h-8 rounded-full object-cover"
+                  className="flex w-8 h-8 rounded-full object-cover"
                 />
               </div>
             </TooltipTrigger>

From f12e64b16b6c6a4cc805f7d3e91e7672d2b67cc8 Mon Sep 17 00:00:00 2001
From: Rishith25 <kamishetty.rishith@gmail.com>
Date: Thu, 16 Jan 2025 10:47:55 +0530
Subject: [PATCH 5/6] revert the changes in avatar file

---
 src/components/Common/Avatar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Common/Avatar.tsx b/src/components/Common/Avatar.tsx
index 8d3d659d6eb..05337526142 100644
--- a/src/components/Common/Avatar.tsx
+++ b/src/components/Common/Avatar.tsx
@@ -57,7 +57,7 @@ const Avatar = React.forwardRef<
   return (
     <AvatarPrimitive.Root
       ref={ref}
-      className={cn("h-full w-full", className)}
+      className={cn("w-full h-full", className)}
       style={{
         background: bgColor,
       }}

From dc9309aa362e844976df388dd39b9d2997f4343c Mon Sep 17 00:00:00 2001
From: Rishith25 <kamishetty.rishith@gmail.com>
Date: Thu, 16 Jan 2025 10:53:59 +0530
Subject: [PATCH 6/6] adjusted the changes

---
 src/pages/Encounters/tabs/EncounterNotesTab.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/Encounters/tabs/EncounterNotesTab.tsx b/src/pages/Encounters/tabs/EncounterNotesTab.tsx
index 3067842040d..d10fa051d24 100644
--- a/src/pages/Encounters/tabs/EncounterNotesTab.tsx
+++ b/src/pages/Encounters/tabs/EncounterNotesTab.tsx
@@ -153,11 +153,11 @@ 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}
-                  className="flex w-8 h-8 rounded-full object-cover"
+                  className="w-8 h-8 rounded-full object-cover"
                 />
               </div>
             </TooltipTrigger>