Responsive All popUps in Meeting Pages

xroom-dashboard/src/components/CreateMeetingModal.vue

@@ -95,7 +95,8 @@
             <label for="meetingTime">ساعت</label>
             <div class="input-group">
               <div class="time-input-group">
-                <p style="margin-left: 1rem;">شروع</p>
+                <div class="child-time-input-group">
+                  <p>شروع</p>
                   <div class="input-div">
                     <button type="button" @click="incrementTime('startMinute')">
                       <svg
@@ -183,7 +184,9 @@
                       </svg>
                     </button>
                   </div>
-                <p style="margin-left: 1rem; margin-right: 2.5rem;">پایان</p>
+                </div>
+                <div class="child-time-input-group">
+                  <p>پایان</p>
                   <div class="input-div">
                     <button type="button" @click="incrementTime('endMinute')">
                       <svg
@@ -274,6 +277,7 @@
                 </div>
               </div>
             </div>
+          </div>
           <div class="form-group">
             <label style="font-size: 19px; font-weight: 600;">اتاق جلسه</label>
             <div class="rooms-selecter">
@@ -760,6 +764,7 @@ export default {
 
 
 <style scoped>
+/* Base styles remain unchanged */
 .participant-input {
   position: relative;
   display: flex;
@@ -843,7 +848,6 @@ export default {
   margin-top: 15px;
 }
 
-
 .dropdown-item .user-name {
   font-size: 16px;
   font-weight: 600;
@@ -876,6 +880,13 @@ export default {
   color: #718096;
 }
 
+.child-time-input-group {
+  display: flex;
+  align-items: center;
+  width: 50%;
+  justify-content: space-around;
+}
+
 .participant-input button {
   margin-left: 10px;
   padding: 10px;
@@ -888,7 +899,6 @@ export default {
   justify-content: center;
 }
 
-
 .modal-overlay {
   position: fixed;
   top: 0;
@@ -917,7 +927,6 @@ export default {
   -ms-overflow-style: none;
 }
 
-
 .modal-content::-webkit-scrollbar {
   display: none;
 }
@@ -944,7 +953,6 @@ export default {
   cursor: pointer;
 }
 
-
 .popUp-objects {
   margin-top: 1rem !important;
   padding: 20px;
@@ -970,7 +978,7 @@ export default {
   color: #101010;
 }
 
-.popUp-title span {
+.popUpcntl:popUp-title span {
   font-size: 16px;
   font-weight: 500;
   color: #4F5A69;
@@ -998,7 +1006,7 @@ export default {
   border: 1px solid #718096;
   border-radius: 8px;
   font-size: 1rem;
-  max-width: 25rem
+  max-width: 25rem;
 }
 
 .input-group {
@@ -1017,10 +1025,7 @@ export default {
   resize: none;
 }
 
-.form-group input:focus {
+.form-group input:focus,
-    outline: none;
-}
-
 .form-group textarea:focus {
   outline: none;
 }
@@ -1048,7 +1053,7 @@ export default {
 }
 
 .time-input-group input[type=number] {
-    -moz-appearance:textfield;
+  -moz-appearance: textfield;
 }
 
 .time-input-group p {
@@ -1072,14 +1077,12 @@ export default {
   padding: 0;
 }
 
-
 .form-actions {
   display: flex;
   justify-content: space-between;
-  padding: 20px;
+  padding: 20px 5%;
   padding-bottom: 0;
   width: 100%;
-  max-width: 620px;
   margin: auto;
 }
 
@@ -1123,7 +1126,7 @@ export default {
   background-color: #3A57E8;
   color: #fff;
   border-radius: 8px;
-  border:none ;
+  border: none;
   font-size: 17px;
   height: 50px;
   width: 60%;
@@ -1196,7 +1199,7 @@ export default {
 
 .presenter button {
   background-color: transparent;
-  border:none;
+  border: none;
   height: 35px;
   cursor: pointer;
 }
@@ -1232,10 +1235,354 @@ export default {
   padding-right: 1.5rem;
 }
 
+/* Responsive Styles */
+
+/* Mobile (max-width: 600px) */
+@media (max-width: 600px) {
+  .modal-content {
+    max-width: 90%;
+    height: 85vh;
+    padding-bottom: 1rem;
+  }
+
+  .popUp-header {
+    padding: 15px 20px;
+  }
+
+  .popUp-header h2 {
+    font-size: 18px; /* Smaller header font */
+  }
+
+  .popUp-header button svg {
+    width: 28px;
+    height: 28px;
+  }
+
+  .popUp-objects {
+    padding: 10px;
+    max-width: 325px;
+    border-radius: 16px;
+  }
+
+  .child-time-input-group {
+    display: flex;
+    align-items: center;
+    width: 50%;
+    justify-content: space-between;
+  }
+
+  .popUp-title {
+    padding: 10px;
+    padding-right: 10px;
+    padding-top: 0;
+    gap: 0.5rem 0;
+  }
+
+  .popUp-title h2 {
+    font-size: 18px;
+  }
+
+  .popUp-title span {
+    font-size: 14px;
+  }
+
+  .form-group {
+    flex-direction: column;
+    align-items: flex-start;
+    margin-bottom: 2rem;
+  }
+
+  .form-group label {
+    width: 100%;
+    font-size: 14px;
+    margin-bottom: 8px;
+  }
+
+  .form-group input,
+  .form-group textarea {
+    max-width: 100%;
+    font-size: 14px;
+  }
+
+  .time-input-group {
+    justify-content: flex-start;
+    gap: 1.5rem;
+  }
+
+  .time-input-group input {
+    width: 35px;
+    height: 35px;
+    font-size: 14px;
+  }
+
+  .input-div svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  .time-input-group p {
+    font-size: 15px;
+  }
+
+  .time-input-group span {
+    margin: 0 0.3rem;
+  }
+
+  .form-actions {
+    flex-direction: row;
+    gap: 10px;
+    padding: 15px;
+  }
+
+  .submit-button,
+  .cancel-button {
+    width: 100%;
+    height: 40px;
+    font-size: 14px;
+  }
+
+  .rooms-selecter {
+    flex-direction: row;
+    align-items: flex-start;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .rooms-selecter button {
+    width: 60%;
+    height: 40px;
+    font-size: 14px;
+  }
+
+
+  .rooms-selecter span {
+    font-size: 15px;
+    width: 50%;
+  }
+
+  .participants-objects h2 {
+    font-size: 17px;
+  }
+
+  .participants-objects p {
+    font-size: 14px;
+    margin: 1.5rem 0;
+  }
+
+  .participants-guide {
+    font-size: 14px;
+    line-height: 1.8rem;
+  }
+
+  .presenter {
+    height: 80px;
+    padding-left: 0.5rem;
+  }
+
+  .user-avatar {
+    width: 60px;
+    height: 60px;
+  }
+
+  .user-info {
+    font-size: 16px;
+    max-height: 60px;
+  }
+
+  .user-info p {
+    font-size: 15px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow-x: clip;
+    width: 6rem;
+  }
+
+  .user-info span {
+    font-size: 13px;
+  }
+
+  .presenter-role {
+    font-size: 13px;
+    text-align: center;
+    width: 70px;
+    font-weight: 500;
+  }
+
+  .presenter button svg {
+    width: 30px;
+    height: 30px;
+  }
+
+  .last-span {
+    font-size: 14px;
+    margin-top: 1.5rem;
+  }
+
+  .dropdown-item .avatar-wrapper {
+    width: 60px;
+    height: 60px;
+  }
+
+  .dropdown-item .user-name {
+    font-size: 14px;
+    width: 80px;
+  }
+
+  .dropdown-item .user-info span {
+    font-size: 12px;
+    width: 60px;
+  }
+
+  .dropdown-item .user-role {
+    font-size: 11px;
+  }
+
+  .custom-input {
+    font-size: 14px;
+    padding: 8px;
+  }
+
+  .dropdown-menu {
+    max-height: 250px;
+  }
+}
+
+/* Tablet (min-width: 600px - max-width: 1024px) */
+@media (min-width: 600px) and (max-width: 1024px) {
+  .modal-content {
+    max-width: 90vw;
+    padding: 0px;
+    padding-bottom: 2rem;
+  }
+
+  .popUp-header h2 {
+    font-size: 20px;
+  }
+
+  .popUp-objects {
+    max-width: 95%;
+    padding: 18px;
+  }
+
+  .popUp-title {
+    padding-right: 20px;
+    gap: 1rem;
+  }
+
+  .popUp-title h2 {
+    font-size: 19px;
+  }
+
+  .popUp-title span {
+    font-size: 15px;
+  }
+
+  .form-group label {
+    font-size: 15px;
+  }
+
+  .form-group input,
+  .form-group textarea {
+    max-width: 90%;
+    font-size: 15px;
+  }
+
+  .time-input-group input {
+    width: 42px;
+    height: 42px;
+  }
+
+  .time-input-group p {
+    font-size: 16px;
+  }
+
+  .submit-button,
+  .cancel-button {
+    font-size: 17px;
+    height: 48px;
+  }
+
+  .rooms-selecter button {
+    width: 60%;
+    font-size: 16px;
+  }
+
+  .participants-objects h2 {
+    font-size: 18px;
+  }
+
+  .participants-objects p {
+    font-size: 15px;
+  }
+
+  .participants-guide {
+    font-size: 15px;
+  }
+
+  .presenter {
+    height: 90px;
+  }
+
+  .user-avatar {
+    width: 70px;
+    height: 70px;
+  }
+
+  .user-info {
+    font-size: 17px;
+  }
+
+  .user-name {
+    font-size: 16px;
+  }
+
+  .user-info span {
+    font-size: 14px;
+  }
+
+  .presenter-role {
+    font-size: 16px;
+    width: 140px;
+  }
+}
+
+/* Large Tablet / Small Desktop (min-width: 1024px - max-width: 1280px) */
+@media (min-width: 1024px) and (max-width: 1280px) {
+  .modal-content {
+    max-width: 85vw;
+  }
+
+  .popUp-objects {
+    max-width: 95%;
+  }
+
+  .form-group input,
+  .form-group textarea {
+    max-width: 95%;
+  }
+
+  .rooms-selecter button {
+    width: 65%;
+  }
+}
+
+/* Desktop (min-width: 1280px) */
+@media (min-width: 1280px) {
+  .modal-content {
+    max-width: 700px; /* Keep the original max-width */
+  }
+
+  .popUp-objects {
+    max-width: 620px;
+  }
+
+  .popUp-title {
+    gap: 1rem;
+  }
+}
 </style>
 
 <style>
-
 .vpd-input-group input {
   height: 40px;
   width: 100%;
@@ -1247,10 +1594,29 @@ export default {
   padding: 0;
 }
 
-
 .vpd-input-group label {
   display: none;
 }
 
+/* Responsive adjustments for VuePersianDatetimePicker */
+@media (max-width: 600px) {
+  .vpd-input-group input {
+    height: 40px;
+    max-width: 100%;
+    font-size: 14px;
+  }
+}
 
+@media (min-width: 600px) and (max-width: 1024px) {
+  .vpd-input-group input {
+    max-width: 90%;
+    font-size: 15px;
+  }
+}
+
+@media (min-width: 1024px) and (max-width: 1280px) {
+  .vpd-input-group input {
+    max-width: 95%;
+  }
+}
 </style>

xroom-dashboard/src/components/CreateSpaceModal.vue

@@ -514,7 +514,7 @@ export default {
 @media (max-width: 600px) {
   .modal-content {
     max-width: 90%;
-    height: 90vh;
+    height: 85vh;
   }
 
   .popUp-header {

xroom-dashboard/src/components/MeetingInfoModal.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- The template remains unchanged -->
   <div v-if="isOpen && !isRoomSelectionOpen" class="modal-overlay" @click="closeModal">
     <div class="modal-content" ref="modalContent" @click.stop>
       <div class="popUp-header">
@@ -107,7 +108,8 @@
             <label for="meetingTime">ساعت</label>
             <div class="input-group">
               <div class="time-input-group">
-                <p style="margin-left: 1rem;">شروع</p>
+                <div class="child-time-input-group">
+                  <p>شروع</p>
                   <div class="input-div">
                     <button type="button" @click="incrementTime('startMinute')" :disabled="!isEditing">
                       <svg
@@ -197,7 +199,9 @@
                       </svg>
                     </button>
                   </div>
-                <p style="margin-left: 1rem; margin-right: 2.5rem;">پایان</p>
+                </div>
+                <div class="child-time-input-group">
+                  <p>پایان</p>
                   <div class="input-div">
                     <button type="button" @click="incrementTime('endMinute')" :disabled="!isEditing">
                       <svg
@@ -290,6 +294,7 @@
                 </div>
               </div>
             </div>
+          </div>
           <div class="form-group">
             <label style="font-size: 19px; font-weight: 600;">اتاق جلسه</label>
             <div class="rooms-selecter">
@@ -512,6 +517,17 @@ export default {
         this.fetchTeamMembers();
       }
       document.body.style.overflow = newVal && !this.isRoomSelectionOpen ? 'hidden' : '';
+      if (newVal) {
+        this.$nextTick(() => {
+          if (this.$refs.modalContent) {
+            this.$refs.modalContent.addEventListener('click', this.closeDropdownOnClick);
+          }
+        });
+      } else {
+        if (this.$refs.modalContent) {
+          this.$refs.modalContent.removeEventListener('click', this.closeDropdownOnClick);
+        }
+      }
     },
     meeting(newVal) {
       if (newVal) {
@@ -522,9 +538,18 @@ export default {
       document.body.style.overflow = newVal ? 'hidden' : '';
     },
   },
+  mounted() {
+    if (this.$refs.modalContent) {
+      this.$refs.modalContent.addEventListener('click', this.closeDropdownOnClick);
+    }
+  },
+  beforeUnmount() {
+    if (this.$refs.modalContent) {
+      this.$refs.modalContent.removeEventListener('click', this.closeDropdownOnClick);
+    }
+  },
   methods: {
     async fetchTeamMembers() {
-      // Define Toast configuration with SweetAlert2
       const Toast = this.$swal.mixin({
         toast: true,
         position: 'top-end',
@@ -548,7 +573,6 @@ export default {
         );
       } catch (error) {
         if (error.response?.status === 403) {
-          // Show error Toast for unauthorized access
           Toast.fire({
             icon: 'error',
             title: 'لطفاً دوباره وارد شوید',
@@ -655,7 +679,6 @@ export default {
       return member ? `${member.user.first_name} ${member.user.last_name}` : '';
     },
     addParticipant() {
-      // Define Toast configuration for participant errors
       const Toast = this.$swal.mixin({
         toast: true,
         position: 'top-end',
@@ -669,7 +692,6 @@ export default {
       });
 
       if (!this.selectedParticipantId) {
-        // Show error Toast for no participant selected
         Toast.fire({
           icon: 'error',
           title: 'لطفاً یک عضو تیم انتخاب کنید.',
@@ -679,7 +701,6 @@ export default {
       }
       const selectedMember = this.teamMembers.find((member) => member.user.id === this.selectedParticipantId);
       if (!selectedMember) {
-        // Show error Toast for invalid participant
         Toast.fire({
           icon: 'error',
           title: 'کاربر انتخاب‌شده یافت نشد.',
@@ -688,7 +709,6 @@ export default {
         return;
       }
       if (this.participants.some((p) => p.id === this.selectedParticipantId)) {
-        // Show error Toast for duplicate participant
         Toast.fire({
           icon: 'error',
           title: 'این کاربر قبلاً اضافه شده است.',
@@ -697,7 +717,6 @@ export default {
         return;
       }
       if (this.selectedParticipantId === this.userId) {
-        // Show error Toast for self-addition
         Toast.fire({
           icon: 'error',
           title: 'نمی‌توانید خودتان را به‌عنوان شرکت‌کننده اضافه کنید.',
@@ -759,7 +778,6 @@ export default {
       if (this.form[field] > 0) this.form[field]--;
     },
     async handleSubmit() {
-      // Define Toast configuration with SweetAlert2
       const Toast = this.$swal.mixin({
         toast: true,
         position: 'top-end',
@@ -773,7 +791,6 @@ export default {
       });
 
       if (!this.form.title || !this.form.date) {
-        // Show error Toast for missing title or date
         Toast.fire({
           icon: 'error',
           title: 'لطفاً نام جلسه و تاریخ را وارد کنید.',
@@ -782,7 +799,6 @@ export default {
         return;
       }
       if (!this.form.selectedRoom || this.form.space === null || this.form.asset_bundle === null) {
-        // Show error Toast for missing room selection
         Toast.fire({
           icon: 'error',
           title: 'لطفاً یک اتاق برای جلسه انتخاب کنید.',
@@ -792,7 +808,6 @@ export default {
       }
       const momentDate = moment(this.form.date, 'jYYYY/jMM/jDD');
       if (!momentDate.isValid()) {
-        // Show error Toast for invalid date
         Toast.fire({
           icon: 'error',
           title: 'تاریخ وارد شده معتبر نیست.',
@@ -803,7 +818,6 @@ export default {
       const startTimeInMinutes = this.form.startHour * 60 + this.form.startMinute;
       const endTimeInMinutes = this.form.endHour * 60 + this.form.endMinute;
       if (endTimeInMinutes <= startTimeInMinutes) {
-        // Show error Toast for invalid time range
         Toast.fire({
           icon: 'error',
           title: 'زمان پایان باید بعد از زمان شروع باشد.',
@@ -844,14 +858,12 @@ export default {
           maxCapacity: this.form.selectedRoom.capacity || 10,
           invited_users: this.participants,
         });
-        // Show success Toast
         Toast.fire({
           icon: 'success',
           title: 'جلسه با موفقیت ویرایش شد!',
         });
         this.closeModalByButton();
       } catch (error) {
-        // Show error Toast for submission failure
         Toast.fire({
           icon: 'error',
           title: `خطا در ویرایش جلسه: ${error.response?.data?.message || error.message}`,
@@ -863,8 +875,8 @@ export default {
 };
 </script>
 
-
 <style scoped>
+/* Base styles */
 .participant-input {
   position: relative;
   display: flex;
@@ -948,7 +960,6 @@ export default {
   margin-top: 15px;
 }
 
-
 .dropdown-item .user-name {
   font-size: 16px;
   font-weight: 600;
@@ -981,6 +992,13 @@ export default {
   color: #718096;
 }
 
+.child-time-input-group {
+  display: flex;
+  align-items: center;
+  width: 50%;
+  justify-content: space-around;
+}
+
 .participant-input button {
   margin-left: 10px;
   padding: 10px;
@@ -993,8 +1011,6 @@ export default {
   justify-content: center;
 }
 
-/*  */
-
 .modal-overlay {
   position: fixed;
   top: 0;
@@ -1023,7 +1039,6 @@ export default {
   -ms-overflow-style: none;
 }
 
-
 .modal-content::-webkit-scrollbar {
   display: none;
 }
@@ -1050,7 +1065,6 @@ export default {
   cursor: pointer;
 }
 
-
 .popUp-objects {
   margin-top: 1rem !important;
   padding: 20px;
@@ -1080,7 +1094,6 @@ export default {
   font-size: 16px;
   font-weight: 500;
   color: #4F5A69;
-    margin-top: 1rem;
 }
 
 .form-group {
@@ -1104,7 +1117,7 @@ export default {
   border: 1px solid #718096;
   border-radius: 8px;
   font-size: 1rem;
-  max-width: 25rem
+  max-width: 25rem;
 }
 
 .input-group {
@@ -1123,10 +1136,7 @@ export default {
   resize: none;
 }
 
-.form-group input:focus {
+.form-group input:focus,
-    outline: none;
-}
-
 .form-group textarea:focus {
   outline: none;
 }
@@ -1154,7 +1164,7 @@ export default {
 }
 
 .time-input-group input[type=number] {
-    -moz-appearance:textfield;
+  -moz-appearance: textfield;
 }
 
 .time-input-group p {
@@ -1178,14 +1188,12 @@ export default {
   padding: 0;
 }
 
-
 .form-actions {
   display: flex;
   justify-content: space-between;
-  padding: 20px;
+  padding: 20px 5%;
   padding-bottom: 0;
   width: 100%;
-  max-width: 620px;
   margin: auto;
 }
 
@@ -1229,7 +1237,7 @@ export default {
   background-color: #3A57E8;
   color: #fff;
   border-radius: 8px;
-  border:none ;
+  border: none;
   font-size: 17px;
   height: 50px;
   width: 60%;
@@ -1302,7 +1310,7 @@ export default {
 
 .presenter button {
   background-color: transparent;
-  border:none;
+  border: none;
   height: 35px;
   cursor: pointer;
 }
@@ -1338,10 +1346,352 @@ export default {
   padding-right: 1.5rem;
 }
 
+/* Responsive Styles */
+
+/* Mobile (max-width: 600px) */
+@media (max-width: 600px) {
+  .modal-content {
+    max-width: 90%;
+    height: 85vh;
+    padding-bottom: 1rem;
+  }
+
+  .popUp-header {
+    padding: 15px 20px;
+  }
+
+  .popUp-header h2 {
+    font-size: 18px;
+  }
+
+  .popUp-header button svg {
+    width: 28px;
+    height: 28px;
+  }
+
+  .popUp-objects {
+    padding: 10px;
+    max-width: 325px;
+    border-radius: 16px;
+  }
+
+  .child-time-input-group {
+    display: flex;
+    align-items: center;
+    width: 50%;
+    justify-content: space-between;
+  }
+
+  .popUp-title {
+    padding: 10px;
+    padding-right: 10px;
+    padding-top: 0;
+    gap: 0.5rem !important;
+  }
+
+  .popUp-title h2 {
+    font-size: 18px;
+  }
+
+  .popUp-title span {
+    font-size: 14px;
+  }
+
+  .form-group {
+    flex-direction: column;
+    align-items: flex-start;
+    margin-bottom: 2rem;
+  }
+
+  .form-group label {
+    width: 100%;
+    font-size: 14px;
+    margin-bottom: 8px;
+  }
+
+  .form-group input,
+  .form-group textarea {
+    max-width: 100%;
+    font-size: 14px;
+  }
+
+  .time-input-group {
+    justify-content: flex-start;
+    gap: 1.5rem;
+  }
+
+  .time-input-group input {
+    width: 35px;
+    height: 35px;
+    font-size: 14px;
+  }
+
+  .input-div svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  .time-input-group p {
+    font-size: 15px;
+  }
+
+  .time-input-group span {
+    margin: 0 0.3rem;
+  }
+
+  .form-actions {
+    flex-direction: row;
+    gap: 10px;
+    padding: 15px;
+  }
+
+  .submit-button,
+  .cancel-button {
+    width: 100%;
+    height: 40px;
+    font-size: 14px;
+  }
+
+  .rooms-selecter {
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .rooms-selecter button {
+    width: 60%;
+    height: 40px;
+    font-size: 14px;
+  }
+
+  .rooms-selecter span {
+    font-size: 15px;
+    width: 50%;
+  }
+
+  .participants-objects h2 {
+    font-size: 17px;
+  }
+
+  .participants-objects p {
+    font-size: 14px;
+    margin: 1.5rem 0;
+  }
+
+  .participants-guide {
+    font-size: 14px;
+    line-height: 1.8rem;
+  }
+
+  .presenter {
+    height: 80px;
+    padding-left: 0.5rem;
+  }
+
+  .user-avatar {
+    width: 60px;
+    height: 60px;
+  }
+
+  .user-info {
+    font-size: 16px;
+    max-height: 60px;
+  }
+
+  .user-info p {
+    font-size: 15px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow-x: clip;
+    width: 6rem;
+  }
+
+  .user-info span {
+    font-size: 13px;
+  }
+
+  .presenter-role {
+    font-size: 13px;
+    text-align: center;
+    width: 70px;
+    font-weight: 500;
+  }
+
+  .presenter button svg {
+    width: 30px;
+    height: 30px;
+  }
+
+  .last-span {
+    font-size: 14px;
+    margin-top: 1.5rem;
+  }
+
+  .dropdown-item .avatar-wrapper {
+    width: 60px;
+    height: 60px;
+  }
+
+  .dropdown-item .user-name {
+    font-size: 14px;
+    width: 80px;
+  }
+
+  .dropdown-item .user-info span {
+    font-size: 12px;
+    width: 60px;
+  }
+
+  .dropdown-item .user-role {
+    font-size: 11px;
+  }
+
+  .custom-input {
+    font-size: 14px;
+    padding: 8px;
+  }
+
+  .dropdown-menu {
+    max-height: 250px;
+  }
+}
+
+/* Tablet (min-width: 600px - max-width: 1024px) */
+@media (min-width: 600px) and (max-width: 1024px) {
+  .modal-content {
+    max-width: 90vw;
+    padding: 0px;
+    padding-bottom: 2rem;
+  }
+
+  .popUp-header h2 {
+    font-size: 20px;
+  }
+
+  .popUp-objects {
+    max-width: 95%;
+    padding: 18px;
+  }
+
+  .popUp-title {
+    padding-right: 20px;
+    gap: 1rem;
+  }
+
+  .popUp-title h2 {
+    font-size: 19px;
+  }
+
+  .popUp-title span {
+    font-size: 15px;
+  }
+
+  .form-group label {
+    font-size: 15px;
+  }
+
+  .form-group input,
+  .form-group textarea {
+    max-width: 90%;
+    font-size: 15px;
+  }
+
+  .time-input-group input {
+    width: 42px;
+    height: 42px;
+  }
+
+  .time-input-group p {
+    font-size: 16px;
+  }
+
+  .submit-button,
+  .cancel-button {
+    font-size: 17px;
+    height: 48px;
+  }
+
+  .rooms-selecter button {
+    width: 60%;
+    font-size: 16px;
+  }
+
+  .participants-objects h2 {
+    font-size: 18px;
+  }
+
+  .participants-objects p {
+    font-size: 15px;
+  }
+
+  .participants-guide {
+    font-size: 15px;
+  }
+
+  .presenter {
+    height: 90px;
+  }
+
+  .user-avatar {
+    width: 70px;
+    height: 70px;
+  }
+
+  .user-info {
+    font-size: 17px;
+  }
+
+  .user-name {
+    font-size: 16px;
+  }
+
+  .user-info span {
+    font-size: 14px;
+  }
+
+  .presenter-role {
+    font-size: 16px;
+    width: 140px;
+  }
+}
+
+/* Large Tablet / Small Desktop (min-width: 1024px - max-width: 1280px) */
+@media (min-width: 1024px) and (max-width: 1280px) {
+  .modal-content {
+    max-width: 85vw;
+  }
+
+  .popUp-objects {
+    max-width: 95%;
+  }
+
+  .form-group input,
+  .form-group textarea {
+    max-width: 95%;
+  }
+
+  .rooms-selecter button {
+    width: 65%;
+  }
+}
+
+/* Desktop (min-width: 1280px) */
+@media (min-width: 1280px) {
+  .modal-content {
+    max-width: 700px;
+  }
+
+  .popUp-objects {
+    max-width: 620px;
+  }
+
+  .popUp-title {
+    gap: 1rem;
+  }
+}
 </style>
 
 <style>
-
 .vpd-input-group input {
   height: 40px;
   width: 100%;
@@ -1353,10 +1703,29 @@ export default {
   padding: 0;
 }
 
-
 .vpd-input-group label {
   display: none;
 }
 
+/* Responsive adjustments for VuePersianDatetimePicker */
+@media (max-width: 600px) {
+  .vpd-input-group input {
+    height: 40px;
+    max-width: 100%;
+    font-size: 14px;
+  }
+}
 
+@media (min-width: 600px) and (max-width: 1024px) {
+  .vpd-input-group input {
+    max-width: 90%;
+    font-size: 15px;
+  }
+}
+
+@media (min-width: 1024px) and (max-width: 1280px) {
+  .vpd-input-group input {
+    max-width: 95%;
+  }
+}
 </style>

xroom-dashboard/src/components/RoomSelectionModal.vue

@@ -32,7 +32,7 @@
       </div>
       <div class="popUp-title">
         <h2>فضاها</h2>
-        <span>یک اتاق برای این جلسه انتخاب کنید</span>
+        <span v-if="rooms.length || temporaryRooms.length">یک اتاق برای این جلسه انتخاب کنید</span>
       </div>
       <div class="rooms-list" v-if="rooms.length">
         <div
@@ -165,8 +165,8 @@
           </div>
         </div>
       </div>
-      <div v-else>
+      <div v-else style="text-align: center;line-height: 200%;color: #718096;">
-        <span>هیچ فضایی یافت نشد.</span>
+        <span>اتاقی یافت نشد</span>
       </div>
       <div v-if="temporaryRooms.length">
         <div class="popUp-title">
@@ -305,8 +305,8 @@
           </div>
         </div>
       </div>
-      <div v-else>
+      <div v-else style="text-align: center;line-height: 200%;color: #718096;">
-        <span>هیچ اتاق موقتی یافت نشد.</span>
+        <span>اتاق موقتی یافت نشد.</span>
       </div>
       <div class="form-actions">
         <button type="button" class="cancel-button" @click="cancel">لغو</button>
@@ -458,6 +458,7 @@ export default {
 
 
 <style scoped>
+/* استایل‌های پیش‌فرض برای دسکتاپ (min-width: 1280px) */
 .modal-overlay {
   position: fixed;
   top: 0;
@@ -512,28 +513,6 @@ export default {
   cursor: pointer;
 }
 
-.room-item {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  border: 1px solid #B8C0CB;
-  border-radius: 12px;
-  padding: 8px;
-  text-align: right;
-  cursor: pointer;
-}
-
-.temporary-room-form {
-  margin-top: 1rem;
-  padding: 20px;
-  background-color: #FFFFFF;
-  border-radius: 16px;
-  width: 100%;
-  max-width: 700px;
-  margin: 1rem auto 2rem auto;
-
-}
-
 .rooms-list {
   margin-top: 1rem;
   padding: 20px;
@@ -560,10 +539,55 @@ export default {
   margin: 1rem auto 2rem auto;
 }
 
+.room-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  border: 1px solid #B8C0CB;
+  border-radius: 12px;
+  padding: 4px;
+  text-align: right;
+  cursor: pointer;
+}
+
 .room-item.selected {
   border: 1px solid #101010;
 }
 
+.room-image {
+  border-radius: 10px;
+  object-fit: cover;
+  width: 120px;
+  height: 120px;
+}
+
+.room-details {
+  margin-right: 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  height: 80%;
+}
+
+.room-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #101010;
+}
+
+.room-capacity,
+.room-type {
+  font-size: 14px;
+  font-weight: 500;
+  color: #718096;
+  display: flex;
+  align-items: center;
+}
+
+.room-type {
+  color: #3A57E8;
+}
+
 .popUp-title {
   display: flex;
   flex-direction: column;
@@ -585,27 +609,6 @@ export default {
   margin-top: 1rem;
 }
 
-.form-group label {
-  display: block;
-  font-weight: 500;
-  width: 50%;
-  font-size: 16px;
-}
-
-.form-group input {
-  height: 45px;
-  width: 100%;
-  padding: 8px;
-  border: 1px solid #718096;
-  border-radius: 8px;
-  font-size: 1rem;
-  max-width: 25rem;
-}
-
-.form-group input:focus {
-  outline: none;
-}
-
 .form-actions {
   display: flex;
   justify-content: space-between;
@@ -640,71 +643,191 @@ export default {
   font-size: 18px;
 }
 
-.room-title {
+/* موبایل (max-width: 600px) */
-  font-size: 16px;
+@media (max-width: 600px) {
-  font-weight: 500;
+  .modal-content {
-  color: #101010;
+    max-width: 90%;
-}
+    height: 90vh;
+    border-radius: 20px;
+    padding-bottom: 1rem;
+  }
 
-.form-group {
+  .popUp-header h2 {
-  margin-bottom: 3rem;
+    font-size: 18px;
-  display: flex;
+  }
-  align-items: center;
-  justify-content: space-between;
-}
 
-.form-group label {
+  .popUp-header button svg {
-  display: block;
+    width: 28px;
-  font-weight: 500;
+    height: 28px;
-  width: 50%;
+  }
-  font-size: 16px;
-}
 
-.form-group input {
+  .popUp-header {
-  height: 45px;
+    padding: 15px 20px;
+  }
+
+  .rooms-list,
+  .temporary-rooms-list {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+    padding: 10px;
+    max-width: 100%;
+  }
+
+  .rooms-list {
+    background-color: transparent;
+    margin-bottom:1rem ;
+  }
+
+  .room-item {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 5px;
+    background-color: #fff;
+  }
+
+  .room-image {
     width: 100%;
-  padding: 8px;
+    height: 130px;
-  border: 1px solid #718096;
+    margin-bottom: 10px;
-  border-radius: 8px;
+  }
-  font-size: 1rem;
-  max-width: 25rem
-}
 
-.room-capacity {
+  .room-details {
-  font-size: 14px;
+    text-align: right;
-  font-weight: 500;
+    width: 100%;
-  color: #718096;
+    margin-right: 4px !important;
-  margin: 1.2rem 0;
     display: flex;
-  align-items: center;
+    flex-direction: column;
-}
+    justify-content: space-between;
+    margin-top: 8px;
+    height: 5rem;
+  }
 
-.room-type {
+  .room-title {
     font-size: 14px;
-  font-weight: 500;
+    text-overflow: ellipsis;
-  color: #3A57E8;
+    white-space: nowrap;
-  display: flex;
+    overflow-x: clip;
-  align-items: center;
-}
-
-.create-room {
     width: 120px;
-    height: 45px;
+  }
-    padding: 12px 24px 12px 24px;
+
-    background-color: #3A57E8;
+  .room-capacity,
-    border-radius: 8px;
+  .room-type {
+    font-size: 12px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow-x: clip;
+    width: 140px;
+  }
+
+  .popUp-title {
+    padding: 15px;
+    padding-right: 20px;
+  }
+
+  .popUp-title h2 {
     font-size: 16px;
-    font-weight: 500;
+  }
-    color: #FFFFFF;
+
-    border: none;
+  .popUp-title span {
-    cursor: pointer;
+    font-size: 14px;
-    display: block;
+  }
-    margin-right: auto;
+
+  .form-actions {
+    flex-direction: row;
+    gap: 10px;
+    padding: 15px;
+  }
+
+  .submit-button,
+  .cancel-button {
+    width: 100%;
+    height: 40px;
+    font-size: 14px;
+  }
 }
 
-.room-image {
+/* تبلت (min-width: 600px و max-width: 1024px) */
-  border-radius: 10px;
+@media (min-width: 600px) and (max-width: 1024px) {
-  object-fit :cover;
+  .modal-content {
+    max-width: 90%;
+    height: 90vh;
+  }
+
+  .rooms-list,
+  .temporary-rooms-list {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.5rem;
+    padding: 15px;
+    max-width: 90%;
+  }
+
+  .room-item {
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .room-image {
+    width: 100px;
+    height: 100px;
+  }
+
+  .room-title {
+    font-size: 15px;
+  }
+
+  .room-capacity,
+  .room-type {
+    font-size: 13px;
+  }
+
+  .popUp-title h2 {
+    font-size: 18px;
+  }
+
+  .popUp-title span {
+    font-size: 15px;
+  }
+
+  .form-actions {
+    padding: 15px;
+  }
+
+  .submit-button,
+  .cancel-button {
+    height: 45px;
+    font-size: 16px;
+  }
 }
 
+/* رزولوشن‌های بزرگ‌تر (min-width: 1024px و max-width: 1280px) */
+@media (min-width: 1024px) and (max-width: 1280px) {
+  .modal-content {
+    max-width: 80%;
+  }
+
+  .rooms-list,
+  .temporary-rooms-list {
+    max-width: 90%;
+    gap: 1.5rem;
+  }
+
+  .room-image {
+    width: 110px;
+    height: 110px;
+  }
+
+  .room-title {
+    font-size: 15px;
+  }
+
+  .room-capacity,
+  .room-type {
+    font-size: 13px;
+  }
+}
+
+/* رزولوشن‌های خیلی بزرگ (min-width: 1280px) */
+@media (min-width: 1280px) {
+  /* استایل‌های پیش‌فرض حفظ می‌شوند */
+}
 </style>

xroom-dashboard/src/pages/dashboard/Meeting.vue

@@ -798,7 +798,7 @@ export default {
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow-x: clip;
-    width: 130px;
+    width: 100px;
     text-align: justify;
   }