Fix/comment section stretching

src/Components/Shifting/CommentsSection.tsx

@@ -89,13 +89,32 @@ export const Comment = ({
   modified_date,
 }: IComment) => {
   const { t } = useTranslation();
+  const [expanded, setExpanded] = useState(false);
+  const toggleExpanded = () => {
+    setExpanded(!expanded);
+  };
+  const truncatedComment = comment.split(" ").slice(0, 20).join(" ");
+  const remainingComment = comment.split(" ").slice(20).join(" ");
+
   return (
     <div
       key={id}
       className="mt-4 flex w-full flex-col rounded-lg border border-gray-300 bg-white p-4 text-gray-800"
     >
       <div className="flex  w-full ">
-        <p className="text-justify">{comment}</p>
+        <p className="text-justify">
+          {expanded ? comment : truncatedComment}
+          {!expanded && remainingComment && (
+            <button onClick={toggleExpanded} className="ml-2 text-green-600">
+              {t("read_more")}
+            </button>
+          )}
+          {expanded && remainingComment && (
+            <button onClick={toggleExpanded} className="ml-2 text-green-600">
+              {t("read_less")}
+            </button>
+          )}
+        </p>
       </div>
       <div className="mt-3">
         <span className="text-xs text-gray-500">

src/Components/Shifting/ShiftDetails.tsx

@@ -281,7 +281,7 @@ export default function ShiftDetails(props: { id: string }) {
 
   const showFacilityCard = (facilityData: any) => {
     return (
-      <div className="mt-2 h-full rounded-lg border bg-white p-4 text-black shadow">
+      <div className="mt-2 rounded-lg border bg-white p-4 text-black shadow lg:h-[25vh] lg:w-[30vw]">
         <div>
           <span className="mr-1 font-semibold leading-relaxed">
             {t("name")}:{" "}
@@ -796,10 +796,6 @@ export default function ShiftDetails(props: { id: string }) {
                 </h4>
                 {showPatientCard(data?.patient_object)}
               </div>
-              <div className="mb-10 mr-3 md:mr-8">
-                <h4 className="mt-8">{t("comments")}</h4>
-                <CommentSection id={props.id} />
-              </div>
             </div>
 
             <div className="col-span-2">
@@ -838,12 +834,12 @@ export default function ShiftDetails(props: { id: string }) {
 
                 {showFacilityCard(data?.origin_facility_object)}
               </div>
-              {!data?.assigned_facility_external && (
+              {/* {!data?.assigned_facility_external && (
                 <div>
                   <h4 className="mt-8">{t("details_of_assigned_facility")}</h4>
                   {showFacilityCard(data?.assigned_facility_object)}
                 </div>
-              )}
+              )} */}
               {wartime_shifting && (
                 <div>
                   <h4 className="mt-8">
@@ -853,6 +849,28 @@ export default function ShiftDetails(props: { id: string }) {
                 </div>
               )}
             </div>
+            <div
+              className="Details of assigned facility flex w-full flex-col lg:flex-row
+
+"
+            >
+              <div className="Details of assigned facility">
+                {!data?.assigned_facility_external && (
+                  <div className=" w-full lg:w-[50vw]">
+                    <h4 className="mt-8">
+                      {t("details_of_assigned_facility")}
+                    </h4>
+                    {showFacilityCard(data?.assigned_facility_object)}
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+          <div className="">
+            <div className="mb-10 mr-3 md:mr-8">
+              <h4 className="mt-8">{t("comments")}</h4>
+              <CommentSection id={props.id} />
+            </div>
           </div>
         </Page>
       )}

src/Components/Users/models.tsx

@@ -45,7 +45,6 @@ export type UserModel = UserBareMinimum & {
   doctor_medical_council_registration?: string;
   weekly_working_hours?: string | null;
 };
-
 export interface SkillObjectModel {
   id: string;
   name: string;

src/Locale/en/Shifting.json

@@ -82,5 +82,7 @@
   "transfer_in_progress": "TRANSFER IN PROGRESS",
   "patient_state": "Patient State",
   "yet_to_be_decided": "Yet to be decided",
-  "awaiting_destination_approval": "AWAITING DESTINATION APPROVAL"
+  "awaiting_destination_approval": "AWAITING DESTINATION APPROVAL",
+  "read_more": "Read More",
+  "read_less": "Read Less"
 }

src/Locale/kn/Shifting.json

@@ -0,0 +1,4 @@
+{
+  "read_more": "ಇನ್ನಷ್ಟು ಓದಿ",
+  "read_less": "ಇನ್ನಷ್ಟು ಓದಬೇಕಿಲ್ಲ"
+}

src/Locale/kn/index.js

@@ -2,10 +2,12 @@ import Auth from "./Auth.json";
 import Common from "./Common.json";
 import Entities from "./Entities.json";
 import Facility from "./Facility.json";
+import Shifting from "./Shifting.json";
 
 export default {
   ...Auth,
   ...Common,
   ...Entities,
   ...Facility,
+  ...Shifting,
 };

src/Locale/ml/Shifing.json

@@ -0,0 +1,4 @@
+{
+  "read_more": "കൂടുതൽ വായിക്കുക",
+  "read_less": "കുറഞ്ഞത് വായിക്കുക"
+}

src/Locale/ml/index.js

@@ -2,10 +2,12 @@ import Auth from "./Auth.json";
 import Common from "./Common.json";
 import Entities from "./Entities.json";
 import Facility from "./Facility.json";
+import Shifting from "./Shifing.json";
 
 export default {
   ...Auth,
   ...Common,
   ...Entities,
   ...Facility,
+  ...Shifting,
 };

src/Locale/mr/Shifting.json

@@ -0,0 +1,4 @@
+{
+  "read_more": "अधिक वाचा",
+  "read_less": "कमी वाचा"
+}

src/Locale/mr/index.js

@@ -2,10 +2,12 @@ import Auth from "./Auth.json";
 import Common from "./Common.json";
 import Entities from "./Entities.json";
 import Facility from "./Facility.json";
+import Shifting from "./Shifting.json";
 
 export default {
   ...Auth,
   ...Common,
   ...Entities,
   ...Facility,
+  ...Shifting,
 };

src/Locale/ta/Shifting.json

@@ -0,0 +1,4 @@
+{
+  "read_more": "மேலும் படிக்க",
+  "read_less": "குறைந்தது படிக்க"
+}

src/Locale/ta/index.js

@@ -2,10 +2,12 @@ import Auth from "./Auth.json";
 import Common from "./Common.json";
 import Entities from "./Entities.json";
 import Facility from "./Facility.json";
+import Shifting from "./Shifting.json";
 
 export default {
   ...Auth,
   ...Common,
   ...Entities,
   ...Facility,
+  ...Shifting,
 };