모바일 호환

src/components/base/VModal.vue

@@ -170,7 +170,8 @@ onUnmounted(() => {
   }
 
   &.is-full {
-    @media (hover: none) and (pointer: coarse) {
+    @media screen and (width < 1400px) {
+    //@media (hover: none) and (pointer: coarse) {
       .modal-content {
         width: 100%;
         max-width: 100% !important;

src/components/layouts/navbar/Navbar.vue

@@ -33,26 +33,84 @@ const isScrolling = computed(() => {
 </template>
 
 <style lang="scss">
-
-@media (hover: none) and (pointer: coarse) {
+@media screen and (width < 1400px) and (orientation: landscape)  {
+//@media (hover: none) and (pointer: coarse) {
   .company-nm {
     display:none !important;
   }
 
   .right {
-    width: 17% !important;
+    width: 19% !important;
   }
 
   .datatable-toolbar {
     .button {
-      padding: 8px 12px !important;
+      padding: 8px 10px !important;
       span:nth-child(1) {
+        padding-left:10px;
+      }
+      span:nth-child(2) {
         display:none;
       }
     }
   }
 }
 
+@media screen and (width <= 767px) and (orientation: portrait) {
+  .datatable-toolbar {
+    .buttons {
+      justify-content: center !important;
+    }
+  }
+}
+
+@media screen and (width > 767px) and (width < 1400px) and (orientation: portrait)  {
+  .company-nm {
+    display:none !important;
+  }
+
+  .brand-end {
+    .profile-dropdown {
+      display: none;
+    }
+  }
+
+  .dropdown-menu {
+    .v-avatar {
+      min-width: 40px !important;
+      max-width: 40px !important;
+      img {
+        min-width: 35px !important;
+        width: 35px !important;
+        height: 35px !important;
+      }
+    }
+  }
+
+  .datatable-toolbar {
+    .button {
+      padding: 8px 10px !important;
+      span:nth-child(1) {
+        padding-left:10px;
+      }
+      span:nth-child(2) {
+        display:none;
+      }
+    }
+  }
+}
+
+@media screen and (width < 1000px) and (orientation: landscape)  {
+  .right {
+    width: 25% !important;
+  }
+  .dropdown-menu {
+    .v-avatar {
+      max-width: 35px !important;
+    }
+  }
+}
+
 .navbar-navbar {
   position: fixed;
   top: 0;

src/components/layouts/shared/mobile/MobileBurger.vue

@@ -22,6 +22,11 @@ const modelValue = defineModel<boolean>({
 </template>
 
 <style scoped lang="scss">
+@media screen and (width < 1025px) and (orientation: portrait) {
+  .navbar-burger {
+    display:flex !important;
+  }
+}
 .navbar-burger {
   height: 60px;
   width: 60px;

src/components/partials/layout/toolbar/ToolbarUserProfile.vue

@@ -480,13 +480,18 @@ function onRePassword() {
   display:none;
 }
 
-@media (hover: none) and (pointer: coarse) {
+//@media (hover: none) and (pointer: coarse) {
+@media screen and (width <= 1400px)  and (orientation: portrait) {
   .light-person {
     display:none;
   }
   .dark-person {
     display:block;
   }
+
+  .avatar-area {
+    justify-content: right !important;
+  }
 }
 
 .is-dark {