web/satellite: users page made responsive

v-table visual bug with name fixed
v-header search position fixed
v-search expands 100% on smaller screens

Change-Id: Iadd6ecea4fba3d39af5b4ea48705f2e199810080

web/satellite/src/components/common/VHeader.vue

@@ -6,7 +6,7 @@
         <div class="header-container__buttons-area">
             <slot />
         </div>
-        <div v-if="styleType === 'common'">
+        <div v-if="styleType === 'common'" class="search-container">
             <VSearch
                 ref="search"
                 :placeholder="placeholder"
@@ -73,5 +73,23 @@ export default class VHeader extends Vue {
             align-items: center;
             justify-content: space-between;
         }
+
+        .search-container {
+            position: relative;
+        }
+    }
+
+    @media screen and (max-width: 1150px) {
+
+        .header-container {
+            flex-direction: column;
+            align-items: flex-start;
+            margin-bottom: 75px;
+
+            .search-container {
+                width: 100%;
+                margin-top: 30px;
+            }
+        }
     }
 </style>

web/satellite/src/components/common/VSearch.vue

@@ -86,7 +86,8 @@ export default class VSearch extends Vue {
     .common-search-input {
         position: absolute;
         right: 0;
-        bottom: 0;
+        bottom: 50%;
+        transform: translateY(50%);
         padding: 0 38px 0 18px;
         border: 1px solid #f2f2f2;
         box-sizing: border-box;
@@ -102,4 +103,11 @@ export default class VSearch extends Vue {
         background-size: 22px 22px;
         background-position: top 16px right 16px;
     }
-</style>
+
+    @media screen and (max-width: 1150px) {
+
+        .common-search-input {
+            width: 100% !important;
+        }
+    }
+</style>

web/satellite/src/components/common/VTable.vue

@@ -31,10 +31,6 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
 import TablePagination from "@/components/common/TablePagination.vue";
 import { OnPageClickCallback } from "@/types/pagination";
 
-export type SelectableItem<T> = T & {
-    isSelected: boolean;
-}
-
 // @vue/component
 @Component({
     components: {
@@ -152,10 +148,59 @@ export default class VTable extends Vue {
     }
 }
 
+@media screen and (max-width: 970px) {
+
+    tbody tr > .data p {
+        max-width: 25rem;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+}
+
+@media screen and (max-width: 870px) {
+
+    tbody tr > .data p {
+        max-width: 20rem;
+    }
+}
+
 @media screen and (max-width: 768px) {
 
     .select {
         display: none;
     }
+
+    tbody tr > .data p {
+        max-width: 25rem;
+    }
+}
+
+@media screen and (max-width: 660px) {
+
+    tbody tr > .data p {
+        max-width: 15rem;
+    }
+}
+
+@media screen and (max-width: 550px) {
+
+    tbody tr > .data p {
+        max-width: 15rem;
+    }
+}
+
+@media screen and (max-width: 440px) {
+
+    tbody tr > .data p {
+        max-width: 10rem;
+    }
+}
+
+@media screen and (max-width: 350px) {
+
+    tbody tr > .data p {
+        max-width: 8rem;
+    }
 }
 </style>

web/satellite/tests/unit/common/__snapshots__/VHeader.spec.ts.snap

@@ -3,7 +3,7 @@
 exports[`HeaderComponent.vue renders correctly 1`] = `
 <div class="header-container">
   <div class="header-container__buttons-area"></div>
-  <div>
+  <div class="search-container">
     <vsearch-stub placeholder="" search="[Function]"></vsearch-stub>
   </div>
   <!---->