From 785737390e8d21a0f1ca07a4582570e8748fa096 Mon Sep 17 00:00:00 2001
From: Anvesh Nalimela <151531961+AnveshNalimela@users.noreply.github.com>
Date: Thu, 16 Jan 2025 17:04:47 +0530
Subject: [PATCH] Fix the Facilties tab overflow in Organization Layout (#9778)

---
 .../FacilityOrganizationView.tsx              | 26 ++++++++++---------
 src/pages/Organization/OrganizationView.tsx   |  6 ++---
 .../components/OrganizationLayout.tsx         |  2 +-
 3 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/pages/FacilityOrganization/FacilityOrganizationView.tsx b/src/pages/FacilityOrganization/FacilityOrganizationView.tsx
index 5def2fc8afa..2859d6ec99e 100644
--- a/src/pages/FacilityOrganization/FacilityOrganizationView.tsx
+++ b/src/pages/FacilityOrganization/FacilityOrganizationView.tsx
@@ -54,10 +54,10 @@ export default function FacilityOrganizationView({ id, facilityId }: Props) {
   return (
     <FacilityOrganizationLayout id={id} facilityId={facilityId}>
       <div className="space-y-6">
-        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+        <div className="flex flex-col lg:flex-row justify-between item-start lg:items-center  gap-4">
           <h2 className="text-lg font-semibold">{t("organizations")}</h2>
-          <div className="flex items-center gap-4 w-full sm:w-auto">
-            <div className="w-full sm:w-72">
+          <div className="flex flex-col items-center md:flex-row sm:items-center gap-4 w-full lg:justify-end">
+            <div className="w-full lg:w-1/3">
               <Input
                 placeholder="Search by name..."
                 value={searchQuery}
@@ -68,10 +68,12 @@ export default function FacilityOrganizationView({ id, facilityId }: Props) {
                 className="w-full"
               />
             </div>
-            <CreateFacilityOrganizationSheet
-              facilityId={facilityId}
-              parentId={id}
-            />
+            <div className="w-auto">
+              <CreateFacilityOrganizationSheet
+                facilityId={facilityId}
+                parentId={id}
+              />
+            </div>
           </div>
         </div>
 
@@ -99,8 +101,8 @@ export default function FacilityOrganizationView({ id, facilityId }: Props) {
                   <Card key={org.id}>
                     <CardContent className="p-6">
                       <div className="space-y-4">
-                        <div className="flex items-center justify-between">
-                          <div className="space-y-1">
+                        <div className="flex items-center justify-between flex-wrap">
+                          <div className="space-y-1 mb-2">
                             <h3 className="text-lg font-semibold">
                               {org.name}
                             </h3>
@@ -113,7 +115,7 @@ export default function FacilityOrganizationView({ id, facilityId }: Props) {
                             <Link
                               href={`/facility/${facilityId}/organization/${org.id}`}
                             >
-                              View Details
+                              {t("view_details")}
                               <CareIcon
                                 icon="l-arrow-right"
                                 className="h-4 w-4"
@@ -134,8 +136,8 @@ export default function FacilityOrganizationView({ id, facilityId }: Props) {
                 <Card className="col-span-full">
                   <CardContent className="p-6 text-center text-gray-500">
                     {searchQuery
-                      ? `No organizations found matching "${searchQuery}"`
-                      : "No sub-organizations found."}
+                      ? t("no_organizations_found_matching", { searchQuery })
+                      : t("no_sub_organizations_found")}
                   </CardContent>
                 </Card>
               )}
diff --git a/src/pages/Organization/OrganizationView.tsx b/src/pages/Organization/OrganizationView.tsx
index ebed2ca5a14..3a0f140f250 100644
--- a/src/pages/Organization/OrganizationView.tsx
+++ b/src/pages/Organization/OrganizationView.tsx
@@ -89,8 +89,8 @@ export default function OrganizationView({ id, navOrganizationId }: Props) {
                   <Card key={orgChild.id}>
                     <CardContent className="p-6">
                       <div className="space-y-4">
-                        <div className="flex items-center justify-between">
-                          <div className="space-y-1">
+                        <div className="flex items-center justify-between flex-wrap">
+                          <div className="space-y-1 mb-2">
                             <h3 className="text-lg font-semibold">
                               {orgChild.name}
                             </h3>
@@ -110,7 +110,7 @@ export default function OrganizationView({ id, navOrganizationId }: Props) {
                           </div>
                           <Button variant="link" asChild>
                             <Link href={`${baseUrl}/children/${orgChild.id}`}>
-                              View Details
+                              {t("view_details")}
                               <CareIcon
                                 icon="l-arrow-right"
                                 className="h-4 w-4"
diff --git a/src/pages/Organization/components/OrganizationLayout.tsx b/src/pages/Organization/components/OrganizationLayout.tsx
index 2fd985fd97f..0ea786aec15 100644
--- a/src/pages/Organization/components/OrganizationLayout.tsx
+++ b/src/pages/Organization/components/OrganizationLayout.tsx
@@ -173,7 +173,7 @@ export default function OrganizationLayout({
       </Breadcrumb>
       {/* Navigation */}
       <div className="mt-4">
-        <Menubar>
+        <Menubar className="w-full h-full overflow-x-auto">
           {navItems
             .filter((item) => item.visibility)
             .map((item) => (