fix: Update event form UI - EXO-73527

exoplatform · Sep 30, 2024 · e2a190a · e2a190a
1 parent 2f0a301
commit e2a190a
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git a/agenda-webapps/src/main/webapp/skin/less/agenda.less b/agenda-webapps/src/main/webapp/skin/less/agenda.less
@@ -144,8 +144,13 @@
       min-height: 40px;
     }
 
-    .event-form-body > * {
-      max-width: ~"calc(50% - 21px)";
+    .event-form-body-left {
+      min-width: ~"calc(100% - 404px)";
+      max-width: ~"calc(100% - 404px)";
+    }
+    .event-form-body-right {
+      min-width: 404px;
+      max-width: 404px;
     }
 
     .event-form-body-left > * {
@@ -837,6 +842,19 @@
         .event-details-body-right {
           min-width: 404px !important;
         }
+       .event-details-body-left {
+         min-width: 100% !important;
+       }
+      }
+    }
+    .event-form  {
+      .event-form-body-left {
+        min-width: 100%;
+        max-width: 100%;
+      }
+      .event-form-body-right {
+        min-width: 404px;
+        max-width: 100%;
       }
     }
   }

diff --git a/...s/src/main/webapp/vue-app/agenda-common/components/event/view/AgendaEventsDetailsBody.vue b/...s/src/main/webapp/vue-app/agenda-common/components/event/view/AgendaEventsDetailsBody.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="event-details-body overflow-auto flex-grow-1 d-flex flex-column flex-md-row pa-4 mt-5">
     <div class="flex-grow-1 flex-shrink-0 event-details-body-left " :class="{ 'd-flex' : !isMobile }">
-      <div :class="{'mx-auto' : isMobile}">
+      <div class ="full-width" :class="{'mx-auto' : isMobile}">
         <div class="event-date align-center d-flex pb-5">
           <i class="uiIconDatePicker darkGreyIcon uiIcon32x32 pe-5"></i>
           <div class="d-inline-flex">