fix some styles

xroom-dashboard/src/components/TeamUser.vue

@@ -339,7 +339,7 @@ export default {
       this.$emit('change-tab', 'buy-subscription');
     },
     handleResize() {
-      this.isMobile = window.innerWidth <= 1024;
+      this.isMobile = window.innerWidth <= 1280;
     },
   },
   mounted() {
@@ -726,8 +726,112 @@ export default {
   }
 }
 
-/* Desktop Styles (min-width: 1024px) */
+/* LapTop Styles (min-width: 1025px and max-width: 1280px) */
-@media (min-width: 1025px) {
+@media (min-width: 1025px) and (max-width: 1280px) {
+
+  .swiper-add-user {
+    display : block;
+  }
+
+  .user-card {
+    width: 100%;
+    height: auto;
+  }
+
+  .add-card {
+    width: 100%;
+    height: 100px;
+    display: flex;
+  }
+
+  .license-card {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .user-info-box {
+    flex-direction: column;
+    align-items: flex-end;
+  }
+
+  .user-activity {
+    padding-left: 0;
+  }
+
+  .user-avatar {
+    margin-top: 0;
+    width: 50px;
+    height: 80px;
+    object-fit: cover;
+  }
+
+  .user-name {
+    font-size: 14px;
+    font-size: 16px;
+    font-weight: 700;
+    color: #101010;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow-x: clip;
+    width: 90px;
+  }
+
+  .user-email {
+    font-size: 12px;
+  }
+
+  .user-role {
+    font-size: 15px;
+  }
+
+  .user-footer span {
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  .user-info-tags, .user-activity {
+    gap: 1rem;
+  }
+
+  .user-actions svg {
+    width: 18px !important; 
+    height: 18px !important; 
+  }
+
+  .user-version , .user-role{ 
+    font-size: 14px;
+    font-weight: 500;
+    text-overflow: ellipsis;
+    overflow-x: clip;
+    white-space: nowrap;
+    width: 80px;
+  }
+
+  .license-card span {
+    font-size: 14px;
+  }
+
+  .buy-subscription {
+    font-size : 14px;
+    gap : 6px;
+  }
+
+  .buy-subscription svg {
+  
+    height: 18px;
+    width: 18px;
+
+  }
+
+  .add-text {
+    font-size: 18px;
+  }
+}
+
+
+/* Desktop Styles (min-width: 1280px) */
+@media (min-width: 1280px) {
   .user-cards-grid {
     display: flex;
     flex-wrap: wrap;

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

@@ -69,8 +69,8 @@
         </span>
         <div v-else class="meetings-list">
           <div v-for="meeting in filteredMeetings" :key="meeting.id" class="meeting-item">
-            <img :src="meeting.image" alt="Meeting Image" class="meeting-image" width="120" height="120" />
+            <img :src="meeting.image" alt="Meeting Image" class="meeting-image" width="48%" height="120" />
-            <div class="meeting-details" style="width:100%;margin-right: 10px;">
+            <div class="meeting-details" style="width : 48%;">
               <h3 class="meet-title">{{ meeting.title }}</h3>
               <p class="meet-capacity">
                 <span style="margin-left: 4px;">
@@ -131,7 +131,7 @@
             :key="filteredMeetings.length + activeFilter + JSON.stringify(filteredMeetings)"
             :slides-per-view="1.4"
             :space-between="10"
-            :loop="true"
+            :freeMode="true"
             :pagination="{ clickable: true }"
             :breakpoints="{
               768: { slidesPerView: 3.3, spaceBetween: 15 },
@@ -142,8 +142,8 @@
             class="swiper-meetings-list"
           >
             <swiper-slide v-for="meeting in filteredMeetings" :key="meeting.id" class="swiper-meeting-item">
-              <img :src="meeting.image" alt="Meeting Image" class="meeting-image" width="120" height="120" />
+              <img :src="meeting.image" alt="Meeting Image" class="meeting-image" width="48%" height="120" />
-              <div class="meeting-details" style="width:100%;margin-right: 10px;">
+              <div class="meeting-details" style="width: 48%;padding-left: 4px;">
                 <h3 class="meet-title">{{ meeting.title }}</h3>
                 <p class="meet-capacity">
                   <span style="margin-left: 4px;">
@@ -230,7 +230,7 @@ import CreateMeetingModal from '@/components/CreateMeetingModal.vue';
 import MeetingInfoModal from '@/components/MeetingInfoModal.vue';
 import { Swiper, SwiperSlide } from 'swiper/vue';
 import 'swiper/css';
-import { Pagination } from 'swiper/modules';
+import { FreeMode, Pagination } from 'swiper/modules';
 import axios from 'axios';
 
 const API_BASE_URL = 'http://my.xroomapp.com:8000';
@@ -250,7 +250,7 @@ export default {
       showModal: false,
       showInfoModal: false,
       selectedMeeting: null,
-      modules: [Pagination],
+      modules: [FreeMode, Pagination],
       meetings: [],
       filteredMeetings: [],
     };
@@ -566,6 +566,7 @@ export default {
   width: 100%;
   display: flex;
   align-items: center;
+  justify-content: space-between;
   border: 1px solid #b8c0cb;
   border-radius: 12px;
   text-align: right;
@@ -708,6 +709,7 @@ export default {
     width: 100%;
     display: flex;
     align-items: center;
+    justify-content: space-between;
     border: 1px solid #b8c0cb;
     border-radius: 12px;
     padding: 4px;
@@ -944,11 +946,11 @@ export default {
 
 
   .meet-title{
-    width: 150px !important;
+    width: 115px !important;
   }
 
   .meet-type span {
-    width : 120px !important;
+    width : 75px !important;
   }
 
   .info-button {
@@ -970,6 +972,7 @@ export default {
     width: 100%;
     display: flex;
     align-items: center;
+    justify-content: space-between;
     border: 1px solid #b8c0cb;
     border-radius: 12px;
     padding: 4px;
@@ -998,6 +1001,8 @@ export default {
   }
 
   .search-section {
+    display: flex;
+    flex-direction: column;
     max-width: 85%;
     width: 100%;
     margin-left: 1.5rem;
@@ -1043,16 +1048,13 @@ export default {
   }
 
   .meeting-item {
-    padding: 8px;
+    padding: 4px;
   }
 
-  .meeting-details {
-    width: 60% !important;
-  }
 
   .meet-title {
     font-size: 17px;
-    width : 200px;
+    width : 140px;
   }
 
   .meet-capacity,

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

@@ -678,7 +678,7 @@ export default {
   height: 22px;
 }
 
-@media (max-width: 1023px) {
+@media (min-width: 1024px) and (max-width: 1280px) {
   .swiper-file-section {
     display: flex;
     flex-direction: column;
@@ -724,7 +724,7 @@ export default {
   }
 }
 
-@media (min-width: 1024px) {
+/* @media (min-width: 1024px) {
   .file-manager-layout {
     flex-direction: row;
   }
@@ -785,7 +785,7 @@ export default {
   .filter-btn {
     font-size: 1.125rem;
   }
-}
+} */
 
 @media (min-width: 1280px) {
   .section-title {