Fix Button Overflow and Minor Responsive Issues on Mobile View

public/locale/en.json

@@ -1075,6 +1075,7 @@
   "from_date_must_be_before_to_date": "From date must be before to date",
   "from_user": "from User",
   "fulfilled": "Fulfilled",
+  "full_day_unavailable": "Full Day Unavailable",
   "full_name": "Full Name",
   "full_screen": "Full Screen",
   "gender": "Gender",
@@ -1730,9 +1731,10 @@
   "quantity_approved": "Quantity Approved",
   "quantity_requested": "Quantity Requested",
   "quantity_required": "Quantity Required",
-  "questionnaire": "Questionnaire",
   "questionnaire_error_loading": "Error loading questionnaire",
   "questionnaire_not_exist": "The questionnaire you tried to access does not exist.",
+  "questionnaire_one": "Questionnaire",
+  "questionnaire_other": "Questionnaires",
   "questionnaire_submission_failed": "Failed to submit questionnaire",
   "questionnaire_submitted_successfully": "Questionnaire submitted successfully",
   "questionnaires": "Questionnaires",
@@ -2344,6 +2346,7 @@
   "view_dashboard": "View Dashboard",
   "view_details": "View Details",
   "view_facility": "View Facility",
+  "view_facility_details": "View facility details",
   "view_files": "View Files",
   "view_patient": "View Patient",
   "view_patients": "View Patients",
@@ -2371,6 +2374,7 @@
   "we_ve_sent_you_a_code_to": "We've sent you a code to",
   "weekly_schedule": "Weekly Schedule",
   "weekly_working_hours_error": "Average weekly working hours must be a number between 0 and 168",
+  "welcome_back": "Welcome back, {{name}}!",
   "welcome_back_to_hospital_dashboard": "Welcome back to the overview ",
   "what_facility_assign_the_patient_to": "What facility would you like to assign the patient to",
   "whatsapp_number": "Whatsapp Number",
@@ -2390,6 +2394,8 @@
   "yesterday": "Yesterday",
   "yet_to_be_decided": "Yet to be decided",
   "you_need_at_least_a_location_to_create_an_assest": "You need at least a location to create an assest.",
+  "your_facilities": "Your Facilities",
+  "your_organizations": "Your Organizations",
   "zoom_in": "Zoom In",
   "zoom_out": "Zoom Out"
 }

public/locale/hi.json

@@ -801,4 +801,4 @@
   "you_need_at_least_a_location_to_create_an_assest": "संपत्ति बनाने के लिए आपको कम से कम एक स्थान की आवश्यकता होगी।",
   "zoom_in": "ज़ूम इन",
   "zoom_out": "ज़ूम आउट"
-}
+}

public/locale/ml.json

@@ -1505,7 +1505,8 @@
   "quantity_approved": "അളവ് അംഗീകരിച്ചു",
   "quantity_requested": "അഭ്യർത്ഥിച്ച അളവ്",
   "quantity_required": "ആവശ്യമായ അളവ്",
-  "questionnaire": "ചോദ്യാവലി",
+  "questionnaire_one": "ചോദ്യാവലി",
+  "questionnaire_other":"ചോദ്യാവലികൾ",
   "questionnaire_error_loading": "ചോദ്യാവലി ലോഡുചെയ്യുന്നതിൽ പിശക്",
   "questionnaire_not_exist": "നിങ്ങൾ ആക്സസ് ചെയ്യാൻ ശ്രമിച്ച ചോദ്യാവലി നിലവിലില്ല.",
   "raise_consent_request": "ABDM വഴി രോഗിയുടെ രേഖകൾ ലഭ്യമാക്കാൻ സമ്മത അഭ്യർത്ഥന ഉന്നയിക്കുക",

src/components/Questionnaire/QuestionnaireSearch.tsx

@@ -80,14 +80,14 @@ export function QuestionnaireSearch({
           <CareIcon icon="l-arrow-down" className="ml-2 h-4 w-4" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="w-[600px] p-0" align="start">
+      <PopoverContent className="w-full sm:w-[600px] p-0" align="start">
         <div className="flex items-center border-b px-3">
           <CareIcon
             icon="l-search"
             className="mr-2 h-4 w-4 shrink-0 text-gray-500"
           />
           <input
-            className="flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-gray-500 disabled:cursor-not-allowed disabled:opacity-50"
+            className="flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-gray-500 disabled:cursor-not-allowed disabled:opacity-50 focus:ring-0 focus:border-transparent"
             placeholder="Search questionnaires..."
             value={search}
             onChange={(e) => setSearch(e.target.value)}

src/components/Users/UserAvailabilityTab.tsx

@@ -175,12 +175,17 @@ export default function UserAvailabilityTab({ userData: user }: Props) {
       />
 
       <div className="space-y-4">
-        <div className="flex items-end justify-between">
-          <div className="flex bg-gray-100 rounded-lg p-1 gap-1 max-w-min">
+        <div className="flex items-end justify-between gap-3 md:gap-0">
+          <div className="flex bg-gray-100 rounded-lg p-0 md:p-1 gap-1 max-w-min">
             <Button
               variant={view === "schedule" ? "outline" : "ghost"}
               onClick={() => setQParams({ tab: "schedule" })}
-              className={cn(view === "schedule" && "shadow", "hover:bg-white")}
+              className={cn(
+                view === "schedule" && "shadow",
+                "hover:bg-white",
+                "text-xs sm:text-sm",
+                "px-2 md:px-4",
+              )}
             >
               {t("schedule")}
             </Button>
@@ -190,6 +195,8 @@ export default function UserAvailabilityTab({ userData: user }: Props) {
               className={cn(
                 view === "exceptions" && "shadow",
                 "hover:bg-white",
+                "text-xs sm:text-sm",
+                "px-2 md:px-4",
               )}
             >
               {t("exceptions")}

src/pages/Patients/VerifyPatient.tsx

@@ -164,7 +164,7 @@ export default function VerifyPatient(props: { facilityId: string }) {
                     data-cy="create-encounter-button"
                     className="group relative h-[100px] md:h-[120px] overflow-hidden border-0 bg-gradient-to-br from-emerald-50 to-teal-50 p-0 shadow-md hover:shadow-xl transition-all duration-300 justify-start"
                   >
-                    <div className="p-4 md:p-6">
+                    <div className="w-full p-4 md:p-6">
                       <div className="absolute inset-0 bg-gradient-to-br from-primary/80 to-primary opacity-0 transition-opacity duration-300 group-hover:opacity-10" />
                       <div className="relative flex w-full items-center gap-3 md:gap-4">
                         <div className="flex h-10 w-10 md:h-12 md:w-12 items-center justify-center rounded-xl bg-primary/10 group-hover:bg-primary/20 transition-colors">

src/pages/Scheduling/components/CreateScheduleExceptionSheet.tsx

@@ -193,7 +193,7 @@ export default function CreateScheduleExceptionSheet({
                   name="reason"
                   render={({ field }) => (
                     <FormItem>
-                      <FormLabel required>Reason</FormLabel>
+                      <FormLabel required>{t("reason")}</FormLabel>
                       <FormControl>
                         <Input
                           placeholder="e.g. Holiday Leave, Conference, etc."
@@ -210,8 +210,8 @@ export default function CreateScheduleExceptionSheet({
                     control={form.control}
                     name="valid_from"
                     render={({ field }) => (
-                      <FormItem>
-                        <FormLabel required>Valid From</FormLabel>
+                      <FormItem className="flex flex-col">
+                        <FormLabel required>{t("valid_from")}</FormLabel>
                         <DatePicker
                           date={field.value}
                           onChange={(date) => field.onChange(date)}
@@ -225,8 +225,8 @@ export default function CreateScheduleExceptionSheet({
                     control={form.control}
                     name="valid_to"
                     render={({ field }) => (
-                      <FormItem>
-                        <FormLabel required>Valid Till</FormLabel>
+                      <FormItem className="flex flex-col">
+                        <FormLabel required>{t("valid_to")}</FormLabel>
                         <DatePicker
                           date={field.value}
                           onChange={(date) => field.onChange(date)}
@@ -249,7 +249,7 @@ export default function CreateScheduleExceptionSheet({
                         />
                       </FormControl>
                       <div className="space-y-1 leading-none">
-                        <FormLabel>Full Day Unavailable</FormLabel>
+                        <FormLabel>{t("full_day_unavailable")}</FormLabel>
                       </div>
                     </FormItem>
                   )}

src/pages/UserDashboard.tsx

@@ -1,5 +1,6 @@
 import { ChevronRight, ClipboardList, LogOut, Settings } from "lucide-react";
 import { Link } from "raviger";
+import { useTranslation } from "react-i18next";
 
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
@@ -16,6 +17,7 @@ export default function UserDashboard() {
   const { signOut } = useAuthContext();
   const facilities = user.facilities || [];
   const organizations = user.organizations || [];
+  const { t } = useTranslation();
 
   return (
     <div className="container mx-auto space-y-4 md:space-y-8 max-w-5xl px-4 py-4 md:p-6">
@@ -29,7 +31,7 @@ export default function UserDashboard() {
           />
           <div className="space-y-1">
             <h1 className="text-xl md:text-2xl font-bold">
-              Welcome back, {user.first_name}!
+              {t("welcome_back", { name: user.first_name })}
             </h1>
             <p className="text-sm md:text-base text-gray-500">
               {new Date().toLocaleDateString("en-US", {
@@ -41,7 +43,7 @@ export default function UserDashboard() {
             </p>
           </div>
         </div>
-        <div className="flex gap-3">
+        <div className="flex flex-col sm:flex-row gap-3">
           <Button
             variant="outline"
             size="sm"
@@ -53,7 +55,7 @@ export default function UserDashboard() {
               className="gap-2 text-inherit"
             >
               <Settings className="h-4 w-4" />
-              Edit Profile
+              {t("edit_profile")}
             </Link>
           </Button>
           {user.is_superuser && (
@@ -65,7 +67,7 @@ export default function UserDashboard() {
             >
               <Link href="/questionnaire" className="gap-2 text-inherit">
                 <ClipboardList className="h-4 w-4" />
-                Questionnaires
+                {t("questionnaire", { count: 2 })}
               </Link>
             </Button>
           )}
@@ -76,15 +78,15 @@ export default function UserDashboard() {
             onClick={() => signOut()}
           >
             <LogOut className="h-4 w-4" />
-            Sign Out
+            {t("sign_out")}
           </Button>
         </div>
       </div>
 
       {/* Facilities Section */}
       {facilities.length > 0 && (
         <section className="space-y-3 md:space-y-4">
-          <h2 className="text-lg font-semibold px-1">Your Facilities</h2>
+          <h2 className="text-lg font-semibold px-1">{t("your_facilities")}</h2>
           <div
             className="grid gap-3 md:gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
             data-cy="facility-list"
@@ -105,7 +107,7 @@ export default function UserDashboard() {
                         {facility.name}
                       </h3>
                       <p className="text-xs md:text-sm text-gray-500 truncate">
-                        View facility details
+                        {t("view_facility_details")}
                       </p>
                     </div>
                     <ChevronRight className="h-4 w-4 md:h-5 md:w-5 text-gray-500" />
@@ -120,7 +122,9 @@ export default function UserDashboard() {
       {/* Organizations Section */}
       {organizations.length > 0 && (
         <section className="space-y-3 md:space-y-4">
-          <h2 className="text-lg font-semibold px-1">Your Organizations</h2>
+          <h2 className="text-lg font-semibold px-1">
+            {t("your_organizations")}
+          </h2>
           <div
             className="grid gap-3 md:gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3"
             data-cy="organization-list"