Fix: Unwanted scrolling and spacing on availability page (#10130)

ohcnetwork · Jan 24, 2025 · 923423f · 923423f
1 parent 19141a3
commit 923423f
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 4 deletions.
diff --git a/src/components/Users/UserAvailabilityTab.tsx b/src/components/Users/UserAvailabilityTab.tsx
@@ -210,7 +210,7 @@ export default function UserAvailabilityTab({ userData: user }: Props) {
         </div>
 
         <div>
-          <ScrollArea className="h-[calc(100vh-24rem)] -mr-3 pr-3 pb-4">
+          <ScrollArea className="max-h-[calc(100vh-18rem)] overflow-auto -mr-3 pr-3 pb-4">
             {view === "schedule" && (
               <ScheduleTemplates
                 facilityId={facilityId}
@@ -282,7 +282,7 @@ function DayDetailsPopover({
         </Button>
       </div>
 
-      <ScrollArea className="h-[22rem]">
+      <ScrollArea className="max-h-[22rem] overflow-auto">
         {templates.map((template) => (
           <div key={template.id} className="border-t pt-3 mt-3">
             <div className="flex items-center">

diff --git a/src/pages/Scheduling/ScheduleExceptions.tsx b/src/pages/Scheduling/ScheduleExceptions.tsx
@@ -36,7 +36,7 @@ export default function ScheduleExceptions({
 
   if (items.length === 0) {
     return (
-      <div className="flex flex-col items-center text-center text-gray-500 py-64">
+      <div className="flex flex-col items-center text-center text-gray-500 py-16">
         <CareIcon icon="l-calendar-slash" className="size-10 mb-3" />
         <p>{t("no_scheduled_exceptions_found")}</p>
       </div>

diff --git a/src/pages/Scheduling/ScheduleTemplates.tsx b/src/pages/Scheduling/ScheduleTemplates.tsx
@@ -36,7 +36,7 @@ export default function ScheduleTemplates({
 
   if (items.length === 0) {
     return (
-      <div className="flex flex-col items-center text-center text-gray-500 py-64">
+      <div className="flex flex-col items-center text-center text-gray-500 py-16">
         <CareIcon icon="l-calendar-slash" className="size-10 mb-3" />
         <p>{t("no_schedule_templates_found")}</p>
       </div>