ng-deep (6차) - bug수정

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss

@@ -77,7 +77,7 @@ $tablet-s-width: 768px;
   height: calc(100% - 380px);
   @media screen and (max-width: #{$tablet-s-width}), (max-height: 800px) {
     margin-top: 10px;
-    height: calc(100% - 170px);
+    height: calc(100% - 120px);
   }
   overflow-y: auto;
   flex-wrap: wrap;

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/file-box.component.scss

@@ -138,7 +138,7 @@ $tablet-s-width: 768px;
   height: calc(100% - 440px);
   overflow-y: auto;
   @media screen and (max-width: #{$tablet-s-width}), (max-height: 800px) {
-    height: calc(100% - 146px);
+    height: calc(100% - 160px);
   }
   th {
     font-size: 1em;
@@ -151,15 +151,14 @@ $tablet-s-width: 768px;
 .footer-fix {
   position: absolute;
   bottom: 0;
-  min-height: 40px;
+  min-height: 50px;
   width: 100%;
-  height: 170px;
   flex-direction: column;
   box-sizing: border-box;
   display: flex;
   border-top: 1px solid #dddddd;
   .btn-box {
-    position: absolute;
+    position: relative;
     bottom: 0;
     height: 50px;
     margin-bottom: 10px;

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/notice.component.scss

@@ -1,3 +1,5 @@
+$tablet-s-width: 768px;
+
 @mixin ellipsis($row) {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -21,6 +23,9 @@
   .table-box {
     height: calc(100% - 100px);
     overflow: auto;
+    @media screen and (max-width: #{$tablet-s-width}) {
+      height: calc(100% - 50px);
+    }
   }
   .footer-fix {
     width: 100%;

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/settings/messenger-settings.dialog.component.scss

@@ -74,7 +74,7 @@
       }
     }
     .mat-ink-bar {
-      display: none;
+      opacity: 0;
     }
   }
 

projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html

@@ -15,7 +15,10 @@
       ></app-layout-messenger-left-side>
     </mat-drawer>
     <div class="chat-messages bg-accent-brightest">
-      <div #statusbarContainer class="messenger-statusbar-container">
+      <div
+        #statusbarContainer
+        class="messenger-statusbar-container bg-accent-darkest"
+      >
         <div class="messenger-statusbar-message">
           업데이트가 존재합니다.
         </div>

projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss

@@ -23,12 +23,13 @@
       min-width: 320px;
       overflow-x: auto;
       font-size: 1em;
-
+      overflow-y: hidden;
       .messenger-statusbar-container {
         width: 100%;
-        height: 25px;
-        background-color: silver;
+        height: 24px;
         text-align: center;
+        line-height: 24px;
+        font-size: 0.9em;
 
         .messenger-statusbar-message {
           width: calc(100% - 20px);

projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss

@@ -384,6 +384,12 @@ $daesang-grey: (
         min-width: 33%;
       }
     }
+    .mat-ink-bar {
+      opacity: 1;
+    }
+    .mat-tab-body-wrapper {
+      height: 100%;
+    }
   }
 
   //쪽지 라디오 버튼 정렬
@@ -410,9 +416,7 @@ $daesang-grey: (
     }
 
     .mat-ink-bar {
-      width: 0px !important;
-      height: 50px;
-      left: 98% !important;
+      opacity: 0;
     }
   }
 
@@ -520,25 +524,4 @@ $daesang-grey: (
       background-color: mat-color($accent, B100);
     }
   }
-
-  .rightDrawer-item {
-    .footer-fix {
-      .mat-paginator-container {
-        display: flex;
-        flex-flow: column;
-      }
-    }
-    @media screen and (max-width: #{$tablet-s-width}) {
-      .footer-fix {
-        height: 100px;
-        .mat-paginator-container {
-          height: 40px;
-          min-height: 40px;
-          .mat-paginator-page-size {
-            display: none;
-          }
-        }
-      }
-    }
-  }
 }

projects/ucap-webmessenger-ui/src/assets/scss/partials/_paginator.scss

@@ -1,14 +1,21 @@
 @charset 'utf-8';
+$tablet-s-width: 768px;
 
 .mat-paginator {
   .mat-paginator-container {
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    min-height: 56px;
+    min-height: 50px;
     padding: 0 8px;
     width: 100%;
     flex-flow: column-reverse;
+    .mat-paginator-page-size {
+      height: 60px;
+    }
+    .mat-paginator-range-actions {
+      height: 50px;
+    }
   }
   .mat-paginator-navigation-first {
     order: 1;
@@ -26,4 +33,13 @@
   .mat-paginator-navigation-last {
     order: 5;
   }
+  @media screen and (max-width: #{$tablet-s-width}) {
+    .mat-paginator-container {
+      height: 50px;
+      min-height: 50px;
+      .mat-paginator-page-size {
+        display: none;
+      }
+    }
+  }
 }