Fix Button Overflow and Minor Responsive Issues on Mobile View (ohcne…

…twork#10546)

public/locale/en.json

@@ -1175,6 +1175,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",
@@ -1884,12 +1885,12 @@
   "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",
   "quick_access": "Quick Access",
   "quick_actions": "Quick Actions",
   "quick_actions_description": "Schedule an appointment or create a new encounter",

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

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

src/components/Patient/EncounterQuestionnaire.tsx

@@ -39,7 +39,7 @@ export default function EncounterQuestionnaire({
     enabled: !!encounterId,
   });
   return (
-    <Page title={t("questionnaire")}>
+    <Page title={t("questionnaire_one")}>
       <div className="flex flex-col space-y-4 mt-4">
         {encounter && (
           <div className="size-full rounded-lg border bg-white text-black shadow">

src/components/Questionnaire/QuestionnaireList.tsx

@@ -45,7 +45,7 @@ export function QuestionnaireList() {
     <div className="container mx-auto px-4 py-6">
       <div className="mb-4 ">
         <div className="mb-2">
-          <h1 className="text-2xl font-bold">{t("questionnaires")}</h1>
+          <h1 className="text-2xl font-bold">{t("questionnaire_other")}</h1>
           <p className="text-gray-600">{t("manage_and_view_questionnaires")}</p>
         </div>
 

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,15 @@ 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>
@@ -189,7 +192,7 @@ export default function UserAvailabilityTab({ userData: user }: Props) {
               onClick={() => setQParams({ tab: "exceptions" })}
               className={cn(
                 view === "exceptions" && "shadow",
-                "hover:bg-white",
+                "hover:bg-white text-xs sm:text-sm px-2 md:px-4",
               )}
             >
               {t("exceptions")}

src/components/ui/sidebar/admin-nav.tsx

@@ -13,7 +13,7 @@ function generateAdminLinks(t: TFunction) {
   const baseUrl = "/admin";
   const links: NavigationLink[] = [
     {
-      name: t("questionnaire"),
+      name: t("questionnaire_one"),
       url: `${baseUrl}/questionnaire`,
       icon: "d-book-open",
     },

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."
@@ -211,7 +211,7 @@ export default function CreateScheduleExceptionSheet({
                     name="valid_from"
                     render={({ field }) => (
                       <FormItem>
-                        <FormLabel required>Valid From</FormLabel>
+                        <FormLabel required>{t("valid_from")}</FormLabel>
                         <DatePicker
                           date={field.value}
                           onChange={(date) => field.onChange(date)}
@@ -226,7 +226,7 @@ export default function CreateScheduleExceptionSheet({
                     name="valid_to"
                     render={({ field }) => (
                       <FormItem>
-                        <FormLabel required>Valid Till</FormLabel>
+                        <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>
                   )}