(fix) Replace overlays in the Appointments app (#1133)

Co-authored-by: Mark Goodrich <[email protected]>
openmrs · May 31, 2024 · c419ca3 · c419ca3
1 parent b521561
commit c419ca3
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/packages/esm-appointments-app/src/appointments.component.tsx b/packages/esm-appointments-app/src/appointments.component.tsx
@@ -37,7 +37,6 @@ const Appointments: React.FC = () => {
       />
       <AppointmentMetrics appointmentServiceType={appointmentServiceType} />
       <AppointmentTabs appointmentServiceType={appointmentServiceType} />
-      <WorkspaceOverlay contextKey="appointments" />
     </SelectedDateContext.Provider>
   );
 };

diff --git a/packages/esm-appointments-app/src/form/appointments-form.component.tsx b/packages/esm-appointments-app/src/form/appointments-form.component.tsx
@@ -136,7 +136,6 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
 
   const [isRecurringAppointment, setIsRecurringAppointment] = useState(false);
   const [isAllDayAppointment, setIsAllDayAppointment] = useState(false);
-
   const defaultRecurringPatternType = recurringPattern?.type || 'DAY';
   const defaultRecurringPatternPeriod = recurringPattern?.period || 1;
   const defaultRecurringPatternDaysOfWeek = recurringPattern?.daysOfWeek || [];
@@ -491,7 +490,7 @@ const AppointmentsForm: React.FC<AppointmentsFormProps> = ({
 
         <section className={styles.formGroup}>
           <span className={styles.heading}>{t('dateTime', 'Date & Time')}</span>
-          <div>
+          <div className={styles.dateTimeFields}>
             {isRecurringAppointment && (
               <div className={styles.inputContainer}>
                 {allowAllDayAppointments && (

diff --git a/packages/esm-appointments-app/src/form/appointments-form.scss b/packages/esm-appointments-app/src/form/appointments-form.scss
@@ -60,6 +60,14 @@ $openmrs-background-grey: #ededed;
   align-items: center;
 }
 
+.dateTimeFields {
+  max-width: 100%;
+}
+
+:global(.omrs-breakpoint-gt-tablet) .dateTimeFields {
+  max-width: 32.25rem;
+}
+
 .button {
   height: 4rem;
   display: flex;