From 26b92424bcbf2fd137b97e6616402fec528f3cf0 Mon Sep 17 00:00:00 2001
From: Diyar Akhgar <diyar.akhgar@gmail.com>
Date: Mon, 30 Jun 2025 03:47:32 +0330
Subject: [PATCH] Responsive All popUps in Meeting Pages

---
 .../src/components/CreateMeetingModal.vue     | 888 ++++++++++++-----
 .../src/components/CreateSpaceModal.vue       |   2 +-
 .../src/components/MeetingInfoModal.vue       | 929 ++++++++++++------
 .../src/components/RoomSelectionModal.vue     | 329 +++++--
 .../src/pages/dashboard/Meeting.vue           |   2 +-
 5 files changed, 1504 insertions(+), 646 deletions(-)

diff --git a/xroom-dashboard/src/components/CreateMeetingModal.vue b/xroom-dashboard/src/components/CreateMeetingModal.vue
index 8c3ac9e..c682248 100644
--- a/xroom-dashboard/src/components/CreateMeetingModal.vue
+++ b/xroom-dashboard/src/components/CreateMeetingModal.vue
@@ -95,181 +95,185 @@
             <label for="meetingTime">ساعت</label>
             <div class="input-group">
               <div class="time-input-group">
-                <p style="margin-left: 1rem;">شروع</p>
-                <div class="input-div">
-                  <button type="button" @click="incrementTime('startMinute')">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                    >
-                      <path
-                        d="M15 12.5L10 7.5L5 12.5"
-                        stroke="#3A57E8"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      />
-                    </svg>
-                  </button>
-                  <input
-                    type="number"
-                    v-model.number="form.startMinute"
-                    min="0"
-                    max="59"
-                    required
-                  />
-                  <button type="button" @click="decrementTime('startMinute')">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                    >
-                      <path
-                        d="M5 7.5L10 12.5L15 7.5"
-                        stroke="#3A57E8"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      />
-                    </svg>
-                  </button>
+                <div class="child-time-input-group">
+                  <p>شروع</p>
+                  <div class="input-div">
+                    <button type="button" @click="incrementTime('startMinute')">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 20 20"
+                        fill="none"
+                      >
+                        <path
+                          d="M15 12.5L10 7.5L5 12.5"
+                          stroke="#3A57E8"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </button>
+                    <input
+                      type="number"
+                      v-model.number="form.startMinute"
+                      min="0"
+                      max="59"
+                      required
+                    />
+                    <button type="button" @click="decrementTime('startMinute')">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 20 20"
+                        fill="none"
+                      >
+                        <path
+                          d="M5 7.5L10 12.5L15 7.5"
+                          stroke="#3A57E8"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </button>
+                  </div>
+                  <span>:</span>
+                  <div class="input-div">
+                    <button type="button" @click="incrementTime('startHour')">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 20 20"
+                        fill="none"
+                      >
+                        <path
+                          d="M15 12.5L10 7.5L5 12.5"
+                          stroke="#3A57E8"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </button>
+                    <input
+                      type="number"
+                      v-model.number="form.startHour"
+                      min="0"
+                      max="23"
+                      required
+                    />
+                    <button type="button" @click="decrementTime('startHour')">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 20 20"
+                        fill="none"
+                      >
+                        <path
+                          d="M5 7.5L10 12.5L15 7.5"
+                          stroke="#3A57E8"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </button>
+                  </div>
                 </div>
-                <span>:</span>
-                <div class="input-div">
-                  <button type="button" @click="incrementTime('startHour')">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                    >
-                      <path
-                        d="M15 12.5L10 7.5L5 12.5"
-                        stroke="#3A57E8"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      />
-                    </svg>
-                  </button>
-                  <input
-                    type="number"
-                    v-model.number="form.startHour"
-                    min="0"
-                    max="23"
-                    required
-                  />
-                  <button type="button" @click="decrementTime('startHour')">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                    >
-                      <path
-                        d="M5 7.5L10 12.5L15 7.5"
-                        stroke="#3A57E8"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      />
-                    </svg>
-                  </button>
-                </div>
-                <p style="margin-left: 1rem; margin-right: 2.5rem;">پایان</p>
-                <div class="input-div">
-                  <button type="button" @click="incrementTime('endMinute')">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                    >
-                      <path
-                        d="M15 12.5L10 7.5L5 12.5"
-                        stroke="#3A57E8"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      />
-                    </svg>
-                  </button>
-                  <input
-                    type="number"
-                    v-model.number="form.endMinute"
-                    min="0"
-                    max="59"
-                    required
-                  />
-                  <button type="button" @click="decrementTime('endMinute')">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                    >
-                      <path
-                        d="M5 7.5L10 12.5L15 7.5"
-                        stroke="#3A57E8"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      />
-                    </svg>
-                  </button>
-                </div>
-                <span>:</span>
-                <div class="input-div">
-                  <button type="button" @click="incrementTime('endHour')">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                    >
-                      <path
-                        d="M15 12.5L10 7.5L5 12.5"
-                        stroke="#3A57E8"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      />
-                    </svg>
-                  </button>
-                  <input
-                    type="number"
-                    v-model.number="form.endHour"
-                    min="0"
-                    max="23"
-                    required
-                  />
-                  <button type="button" @click="decrementTime('endHour')">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                    >
-                      <path
-                        d="M5 7.5L10 12.5L15 7.5"
-                        stroke="#3A57E8"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      />
-                    </svg>
-                  </button>
+                <div class="child-time-input-group">
+                  <p>پایان</p>
+                  <div class="input-div">
+                    <button type="button" @click="incrementTime('endMinute')">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 20 20"
+                        fill="none"
+                      >
+                        <path
+                          d="M15 12.5L10 7.5L5 12.5"
+                          stroke="#3A57E8"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </button>
+                    <input
+                      type="number"
+                      v-model.number="form.endMinute"
+                      min="0"
+                      max="59"
+                      required
+                    />
+                    <button type="button" @click="decrementTime('endMinute')">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 20 20"
+                        fill="none"
+                      >
+                        <path
+                          d="M5 7.5L10 12.5L15 7.5"
+                          stroke="#3A57E8"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </button>
+                  </div>
+                  <span>:</span>
+                  <div class="input-div">
+                    <button type="button" @click="incrementTime('endHour')">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 20 20"
+                        fill="none"
+                      >
+                        <path
+                          d="M15 12.5L10 7.5L5 12.5"
+                          stroke="#3A57E8"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </button>
+                    <input
+                      type="number"
+                      v-model.number="form.endHour"
+                      min="0"
+                      max="23"
+                      required
+                    />
+                    <button type="button" @click="decrementTime('endHour')">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 20 20"
+                        fill="none"
+                      >
+                        <path
+                          d="M5 7.5L10 12.5L15 7.5"
+                          stroke="#3A57E8"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </button>
+                  </div>
                 </div>
               </div>
             </div>
@@ -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;
@@ -856,12 +860,12 @@ export default {
 }
 
 .dropdown-item .user-info span {
-    font-size: 14px;
-    color: #718096;
-    width: 75px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow-x: clip;
+  font-size: 14px;
+  color: #718096;
+  width: 75px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow-x: clip;
 }
 
 .dropdown-item .user-role {
@@ -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,21 +927,20 @@ export default {
   -ms-overflow-style: none;
 }
 
-
 .modal-content::-webkit-scrollbar {
   display: none;
 }
 
 .popUp-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background-color: #101010;
-    color: #fff;
-    width: 100%;
-    padding: 20px 26px;
-    margin-bottom: 1.5rem;
-    border-radius: 20px 20px 0px 0px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #101010;
+  color: #fff;
+  width: 100%;
+  padding: 20px 26px;
+  margin-bottom: 1.5rem;
+  border-radius: 20px 20px 0px 0px;
 }
 
 .popUp-header h2 {
@@ -939,42 +948,41 @@ export default {
 }
 
 .popUp-header button {
-    background-color: #101010;
-    border: none;
-    cursor: pointer;
+  background-color: #101010;
+  border: none;
+  cursor: pointer;
 }
 
-
 .popUp-objects {
-    margin-top: 1rem !important;
-    padding: 20px;
-    background-color: #FFFFFF;
-    border-radius: 16px;
-    width: 100%;
-    max-width: 620px;
-    display: block;
-    margin: auto;
+  margin-top: 1rem !important;
+  padding: 20px;
+  background-color: #FFFFFF;
+  border-radius: 16px;
+  width: 100%;
+  max-width: 620px;
+  display: block;
+  margin: auto;
 }
 
 .popUp-title {
-    display: flex;
-    flex-direction: column;
-    align-items: start;
-    padding: 20px;
-    padding-right: 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  padding: 20px;
+  padding-right: 50px;
 }
 
 .popUp-title h2 {
-    font-size: 20px;
-    font-weight: 600;
-    color: #101010;
-} 
+  font-size: 20px;
+  font-weight: 600;
+  color: #101010;
+}
 
-.popUp-title span {
-    font-size: 16px;
-    font-weight: 500;
-    color: #4F5A69;
-    margin-top: 1rem;
+.popUpcntl:popUp-title span {
+  font-size: 16px;
+  font-weight: 500;
+  color: #4F5A69;
+  margin-top: 1rem;
 }
 
 .form-group {
@@ -998,12 +1006,12 @@ export default {
   border: 1px solid #718096;
   border-radius: 8px;
   font-size: 1rem;
-  max-width: 25rem
+  max-width: 25rem;
 }
 
 .input-group {
-    position: relative;
-    width: 100%;
+  position: relative;
+  width: 100%;
 }
 
 .form-group textarea {
@@ -1017,12 +1025,9 @@ export default {
   resize: none;
 }
 
-.form-group input:focus {
-    outline: none;
-}
-
+.form-group input:focus,
 .form-group textarea:focus {
-    outline: none;
+  outline: none;
 }
 
 .time-input-group {
@@ -1043,12 +1048,12 @@ export default {
 
 .time-input-group input::-webkit-outer-spin-button,
 .time-input-group input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
+  -webkit-appearance: none;
+  margin: 0;
 }
 
 .time-input-group input[type=number] {
-    -moz-appearance:textfield;
+  -moz-appearance: textfield;
 }
 
 .time-input-group p {
@@ -1060,9 +1065,9 @@ export default {
 }
 
 .input-div {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .input-div button {
@@ -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%;
@@ -1152,14 +1155,14 @@ export default {
 }
 
 .presenter {
-    margin: 2rem 0 2rem 0;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    box-shadow: 0px 1px 4px 0px #00000029;
-    border-radius: 12px;
-    height: 95px;
-    padding-left: 1rem;
+  margin: 2rem 0 2rem 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: 0px 1px 4px 0px #00000029;
+  border-radius: 12px;
+  height: 95px;
+  padding-left: 1rem;
 }
 
 .user-avatar {
@@ -1196,18 +1199,18 @@ export default {
 
 .presenter button {
   background-color: transparent;
-  border:none;
+  border: none;
   height: 35px;
   cursor: pointer;
 }
 
 .last-span {
   color: rgb(79, 90, 105);
-    font-size: 16.5px;
-    line-height: 190%;
-    display: block;
-    margin-top: 4rem;
-    margin-bottom: 1rem;
+  font-size: 16.5px;
+  line-height: 190%;
+  display: block;
+  margin-top: 4rem;
+  margin-bottom: 1rem;
 }
 
 .participant-input {
@@ -1232,25 +1235,388 @@ 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%;
-    border: 1px solid #718096;
-    border-radius: 8px;
-    font-size: 1rem;
-    max-width: 25rem;
-    text-align: center;
-    padding: 0;
+  height: 40px;
+  width: 100%;
+  border: 1px solid #718096;
+  border-radius: 8px;
+  font-size: 1rem;
+  max-width: 25rem;
+  text-align: center;
+  padding: 0;
 }
 
-
 .vpd-input-group label {
-    display: none;
+  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>
\ No newline at end of file
diff --git a/xroom-dashboard/src/components/CreateSpaceModal.vue b/xroom-dashboard/src/components/CreateSpaceModal.vue
index ebda4c5..ad737db 100644
--- a/xroom-dashboard/src/components/CreateSpaceModal.vue
+++ b/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 {
diff --git a/xroom-dashboard/src/components/MeetingInfoModal.vue b/xroom-dashboard/src/components/MeetingInfoModal.vue
index 9547765..9cf20bc 100644
--- a/xroom-dashboard/src/components/MeetingInfoModal.vue
+++ b/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,185 +108,189 @@
             <label for="meetingTime">ساعت</label>
             <div class="input-group">
               <div class="time-input-group">
-                <p style="margin-left: 1rem;">شروع</p>
-                <div class="input-div">
-                  <button type="button" @click="incrementTime('startMinute')" :disabled="!isEditing">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                    >
-                      <path
-                        d="M15 12.5L10 7.5L5 12.5"
-                        stroke="#3A57E8"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      />
-                    </svg>
-                  </button>
-                  <input
-                    type="number"
-                    v-model.number="form.startMinute"
-                    min="0"
-                    max="59"
-                    :disabled="!isEditing"
-                    required
-                  />
-                  <button type="button" @click="decrementTime('startMinute')" :disabled="!isEditing">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                    >
-                      <path
-                        d="M5 7.5L10 12.5L15 7.5"
-                        stroke="#3A57E8"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      />
-                    </svg>
-                  </button>
+                <div class="child-time-input-group">
+                  <p>شروع</p>
+                  <div class="input-div">
+                    <button type="button" @click="incrementTime('startMinute')" :disabled="!isEditing">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 20 20"
+                        fill="none"
+                      >
+                        <path
+                          d="M15 12.5L10 7.5L5 12.5"
+                          stroke="#3A57E8"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </button>
+                    <input
+                      type="number"
+                      v-model.number="form.startMinute"
+                      min="0"
+                      max="59"
+                      :disabled="!isEditing"
+                      required
+                    />
+                    <button type="button" @click="decrementTime('startMinute')" :disabled="!isEditing">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 20 20"
+                        fill="none"
+                      >
+                        <path
+                          d="M5 7.5L10 12.5L15 7.5"
+                          stroke="#3A57E8"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </button>
+                  </div>
+                  <span>:</span>
+                  <div class="input-div">
+                    <button type="button" @click="incrementTime('startHour')" :disabled="!isEditing">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 20 20"
+                        fill="none"
+                      >
+                        <path
+                          d="M15 12.5L10 7.5L5 12.5"
+                          stroke="#3A57E8"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </button>
+                    <input
+                      type="number"
+                      v-model.number="form.startHour"
+                      min="0"
+                      max="23"
+                      :disabled="!isEditing"
+                      required
+                    />
+                    <button type="button" @click="decrementTime('startHour')" :disabled="!isEditing">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 20 20"
+                        fill="none"
+                      >
+                        <path
+                          d="M5 7.5L10 12.5L15 7.5"
+                          stroke="#3A57E8"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </button>
+                  </div>
                 </div>
-                <span>:</span>
-                <div class="input-div">
-                  <button type="button" @click="incrementTime('startHour')" :disabled="!isEditing">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                    >
-                      <path
-                        d="M15 12.5L10 7.5L5 12.5"
-                        stroke="#3A57E8"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      />
-                    </svg>
-                  </button>
-                  <input
-                    type="number"
-                    v-model.number="form.startHour"
-                    min="0"
-                    max="23"
-                    :disabled="!isEditing"
-                    required
-                  />
-                  <button type="button" @click="decrementTime('startHour')" :disabled="!isEditing">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                    >
-                      <path
-                        d="M5 7.5L10 12.5L15 7.5"
-                        stroke="#3A57E8"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      />
-                    </svg>
-                  </button>
-                </div>
-                <p style="margin-left: 1rem; margin-right: 2.5rem;">پایان</p>
-                <div class="input-div">
-                  <button type="button" @click="incrementTime('endMinute')" :disabled="!isEditing">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                    >
-                      <path
-                        d="M15 12.5L10 7.5L5 12.5"
-                        stroke="#3A57E8"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      />
-                    </svg>
-                  </button>
-                  <input
-                    type="number"
-                    v-model.number="form.endMinute"
-                    min="0"
-                    max="59"
-                    :disabled="!isEditing"
-                    required
-                  />
-                  <button type="button" @click="decrementTime('endMinute')" :disabled="!isEditing">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                    >
-                      <path
-                        d="M5 7.5L10 12.5L15 7.5"
-                        stroke="#3A57E8"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      />
-                    </svg>
-                  </button>
-                </div>
-                <span>:</span>
-                <div class="input-div">
-                  <button type="button" @click="incrementTime('endHour')" :disabled="!isEditing">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                    >
-                      <path
-                        d="M15 12.5L10 7.5L5 12.5"
-                        stroke="#3A57E8"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      />
-                    </svg>
-                  </button>
-                  <input
-                    type="number"
-                    v-model.number="form.endHour"
-                    min="0"
-                    max="23"
-                    :disabled="!isEditing"
-                    required
-                  />
-                  <button type="button" @click="decrementTime('endHour')" :disabled="!isEditing">
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      width="24"
-                      height="24"
-                      viewBox="0 0 20 20"
-                      fill="none"
-                    >
-                      <path
-                        d="M5 7.5L10 12.5L15 7.5"
-                        stroke="#3A57E8"
-                        stroke-width="2"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                      />
-                    </svg>
-                  </button>
+                <div class="child-time-input-group">
+                  <p>پایان</p>
+                  <div class="input-div">
+                    <button type="button" @click="incrementTime('endMinute')" :disabled="!isEditing">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 20 20"
+                        fill="none"
+                      >
+                        <path
+                          d="M15 12.5L10 7.5L5 12.5"
+                          stroke="#3A57E8"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </button>
+                    <input
+                      type="number"
+                      v-model.number="form.endMinute"
+                      min="0"
+                      max="59"
+                      :disabled="!isEditing"
+                      required
+                    />
+                    <button type="button" @click="decrementTime('endMinute')" :disabled="!isEditing">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 20 20"
+                        fill="none"
+                      >
+                        <path
+                          d="M5 7.5L10 12.5L15 7.5"
+                          stroke="#3A57E8"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </button>
+                  </div>
+                  <span>:</span>
+                  <div class="input-div">
+                    <button type="button" @click="incrementTime('endHour')" :disabled="!isEditing">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 20 20"
+                        fill="none"
+                      >
+                        <path
+                          d="M15 12.5L10 7.5L5 12.5"
+                          stroke="#3A57E8"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </button>
+                    <input
+                      type="number"
+                      v-model.number="form.endHour"
+                      min="0"
+                      max="23"
+                      :disabled="!isEditing"
+                      required
+                    />
+                    <button type="button" @click="decrementTime('endHour')" :disabled="!isEditing">
+                      <svg
+                        xmlns="http://www.w3.org/2000/svg"
+                        width="24"
+                        height="24"
+                        viewBox="0 0 20 20"
+                        fill="none"
+                      >
+                        <path
+                          d="M5 7.5L10 12.5L15 7.5"
+                          stroke="#3A57E8"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </button>
+                  </div>
                 </div>
               </div>
             </div>
@@ -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;
@@ -961,12 +972,12 @@ export default {
 }
 
 .dropdown-item .user-info span {
-    font-size: 14px;
-    color: #718096;
-    width: 75px;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow-x: clip;
+  font-size: 14px;
+  color: #718096;
+  width: 75px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow-x: clip;
 }
 
 .dropdown-item .user-role {
@@ -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,21 +1039,20 @@ export default {
   -ms-overflow-style: none;
 }
 
-
 .modal-content::-webkit-scrollbar {
   display: none;
 }
 
 .popUp-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background-color: #101010;
-    color: #fff;
-    width: 100%;
-    padding: 20px 26px;
-    margin-bottom: 1.5rem;
-    border-radius: 20px 20px 0px 0px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: #101010;
+  color: #fff;
+  width: 100%;
+  padding: 20px 26px;
+  margin-bottom: 1.5rem;
+  border-radius: 20px 20px 0px 0px;
 }
 
 .popUp-header h2 {
@@ -1045,42 +1060,40 @@ export default {
 }
 
 .popUp-header button {
-    background-color: #101010;
-    border: none;
-    cursor: pointer;
+  background-color: #101010;
+  border: none;
+  cursor: pointer;
 }
 
-
 .popUp-objects {
-    margin-top: 1rem !important;
-    padding: 20px;
-    background-color: #FFFFFF;
-    border-radius: 16px;
-    width: 100%;
-    max-width: 620px;
-    display: block;
-    margin: auto;
+  margin-top: 1rem !important;
+  padding: 20px;
+  background-color: #FFFFFF;
+  border-radius: 16px;
+  width: 100%;
+  max-width: 620px;
+  display: block;
+  margin: auto;
 }
 
 .popUp-title {
-    display: flex;
-    flex-direction: column;
-    align-items: start;
-    padding: 20px;
-    padding-right: 50px;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  padding: 20px;
+  padding-right: 50px;
 }
 
 .popUp-title h2 {
-    font-size: 20px;
-    font-weight: 600;
-    color: #101010;
-} 
+  font-size: 20px;
+  font-weight: 600;
+  color: #101010;
+}
 
 .popUp-title span {
-    font-size: 16px;
-    font-weight: 500;
-    color: #4F5A69;
-    margin-top: 1rem;
+  font-size: 16px;
+  font-weight: 500;
+  color: #4F5A69;
 }
 
 .form-group {
@@ -1104,12 +1117,12 @@ export default {
   border: 1px solid #718096;
   border-radius: 8px;
   font-size: 1rem;
-  max-width: 25rem
+  max-width: 25rem;
 }
 
 .input-group {
-    position: relative;
-    width: 100%;
+  position: relative;
+  width: 100%;
 }
 
 .form-group textarea {
@@ -1123,12 +1136,9 @@ export default {
   resize: none;
 }
 
-.form-group input:focus {
-    outline: none;
-}
-
+.form-group input:focus,
 .form-group textarea:focus {
-    outline: none;
+  outline: none;
 }
 
 .time-input-group {
@@ -1149,12 +1159,12 @@ export default {
 
 .time-input-group input::-webkit-outer-spin-button,
 .time-input-group input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
+  -webkit-appearance: none;
+  margin: 0;
 }
 
 .time-input-group input[type=number] {
-    -moz-appearance:textfield;
+  -moz-appearance: textfield;
 }
 
 .time-input-group p {
@@ -1166,9 +1176,9 @@ export default {
 }
 
 .input-div {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
 .input-div button {
@@ -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%;
@@ -1258,14 +1266,14 @@ export default {
 }
 
 .presenter {
-    margin: 2rem 0 2rem 0;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    box-shadow: 0px 1px 4px 0px #00000029;
-    border-radius: 12px;
-    height: 95px;
-    padding-left: 1rem;
+  margin: 2rem 0 2rem 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: 0px 1px 4px 0px #00000029;
+  border-radius: 12px;
+  height: 95px;
+  padding-left: 1rem;
 }
 
 .user-avatar {
@@ -1302,18 +1310,18 @@ export default {
 
 .presenter button {
   background-color: transparent;
-  border:none;
+  border: none;
   height: 35px;
   cursor: pointer;
 }
 
 .last-span {
   color: rgb(79, 90, 105);
-    font-size: 16.5px;
-    line-height: 190%;
-    display: block;
-    margin-top: 4rem;
-    margin-bottom: 1rem;
+  font-size: 16.5px;
+  line-height: 190%;
+  display: block;
+  margin-top: 4rem;
+  margin-bottom: 1rem;
 }
 
 .participant-input {
@@ -1338,25 +1346,386 @@ 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%;
-    border: 1px solid #718096;
-    border-radius: 8px;
-    font-size: 1rem;
-    max-width: 25rem;
-    text-align: center;
-    padding: 0;
+  height: 40px;
+  width: 100%;
+  border: 1px solid #718096;
+  border-radius: 8px;
+  font-size: 1rem;
+  max-width: 25rem;
+  text-align: center;
+  padding: 0;
 }
 
-
 .vpd-input-group label {
-    display: none;
+  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>
\ No newline at end of file
diff --git a/xroom-dashboard/src/components/RoomSelectionModal.vue b/xroom-dashboard/src/components/RoomSelectionModal.vue
index 42cfd74..2b7096c 100644
--- a/xroom-dashboard/src/components/RoomSelectionModal.vue
+++ b/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>
-        <span>هیچ فضایی یافت نشد.</span>
+      <div v-else style="text-align: center;line-height: 200%;color: #718096;">
+        <span>اتاقی یافت نشد</span>
       </div>
       <div v-if="temporaryRooms.length">
         <div class="popUp-title">
@@ -305,8 +305,8 @@
           </div>
         </div>
       </div>
-      <div v-else>
-        <span>هیچ اتاق موقتی یافت نشد.</span>
+      <div v-else style="text-align: center;line-height: 200%;color: #718096;">
+        <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 {
-  font-size: 16px;
-  font-weight: 500;
-  color: #101010;
-}
+/* موبایل (max-width: 600px) */
+@media (max-width: 600px) {
+  .modal-content {
+    max-width: 90%;
+    height: 90vh;
+    border-radius: 20px;
+    padding-bottom: 1rem;
+  }
 
-.form-group {
-  margin-bottom: 3rem;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-}
+  .popUp-header h2 {
+    font-size: 18px;
+  }
 
-.form-group label {
-  display: block;
-  font-weight: 500;
-  width: 50%;
-  font-size: 16px;
-}
+  .popUp-header button svg {
+    width: 28px;
+    height: 28px;
+  }
 
-.form-group input {
-  height: 45px;
-  width: 100%;
-  padding: 8px;
-  border: 1px solid #718096;
-  border-radius: 8px;
-  font-size: 1rem;
-  max-width: 25rem
-}
+  .popUp-header {
+    padding: 15px 20px;
+  }
 
-.room-capacity {
-  font-size: 14px;
-  font-weight: 500;
-  color: #718096;
-  margin: 1.2rem 0;
-  display: flex;
-  align-items: center;
-}
+  .rooms-list,
+  .temporary-rooms-list {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1rem;
+    padding: 10px;
+    max-width: 100%;
+  }
 
-.room-type {
-  font-size: 14px;
-  font-weight: 500;
-  color: #3A57E8;
-  display: flex;
-  align-items: center;
-}
+  .rooms-list {
+    background-color: transparent;
+    margin-bottom:1rem ;
+  }
 
-.create-room {
+  .room-item {
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 5px;
+    background-color: #fff;
+  }
+
+  .room-image {
+    width: 100%;
+    height: 130px;
+    margin-bottom: 10px;
+  }
+
+  .room-details {
+    text-align: right;
+    width: 100%;
+    margin-right: 4px !important;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    margin-top: 8px;
+    height: 5rem;
+  }
+
+  .room-title {
+    font-size: 14px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow-x: clip;
     width: 120px;
-    height: 45px;
-    padding: 12px 24px 12px 24px;
-    background-color: #3A57E8;
-    border-radius: 8px;
+  }
+
+  .room-capacity,
+  .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;
-    cursor: pointer;
-    display: block;
-    margin-right: auto;
+  }
+
+  .popUp-title span {
+    font-size: 14px;
+  }
+
+  .form-actions {
+    flex-direction: row;
+    gap: 10px;
+    padding: 15px;
+  }
+
+  .submit-button,
+  .cancel-button {
+    width: 100%;
+    height: 40px;
+    font-size: 14px;
+  }
 }
 
-.room-image {
-  border-radius: 10px;
-  object-fit :cover;
+/* تبلت (min-width: 600px و max-width: 1024px) */
+@media (min-width: 600px) and (max-width: 1024px) {
+  .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>
\ No newline at end of file
diff --git a/xroom-dashboard/src/pages/dashboard/Meeting.vue b/xroom-dashboard/src/pages/dashboard/Meeting.vue
index 08d836c..f9090ee 100644
--- a/xroom-dashboard/src/pages/dashboard/Meeting.vue
+++ b/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;
   }