[explorer] fix: horizontal scrollbar issue #1129

* [explorer] fix: horizontal scrollbar issue * [explorer] fix: scrollbar will appear below table instead of pagination component
symbol · Oct 14, 2022 · d825340 · d825340
1 parent 24ba6e4
commit d825340
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 20 deletions.
diff --git a/src/components/tables/TableListView.vue b/src/components/tables/TableListView.vue
@@ -75,26 +75,28 @@
 					</tr>
 				</tbody>
 			</table>
-			<div v-if="pagination || timelinePagination" class="bottom">
-				<div class="pagination-wrapper">
-					<Pagination
-						:canFetchPrevious="prevPageExist"
-						:canFetchNext="nextPageExist"
-						:goUp="false"
-						:currentPageNumber="pageNumber"
-						:lastPageNumber="lastPage"
-						class="pagination"
-						@next="nextPage"
-						@previous="prevPage"
-						@firstPage="goFirstPage"
-						@lastPage="goLastPage"
-						@fetchPage="fetchPage($event)"
-					/>
-					<Loading small v-if="paginationLoading" />
-				</div>
-			</div>
 		</div>
+
 		<div v-else class="empty-data">{{emptyDataMessageFormatted}}</div>
+
+		<div v-if="(pagination || timelinePagination) && dataIsNotEmpty" class="bottom">
+			<div class="pagination-wrapper">
+				<Pagination
+					:canFetchPrevious="prevPageExist"
+					:canFetchNext="nextPageExist"
+					:goUp="false"
+					:currentPageNumber="pageNumber"
+					:lastPageNumber="lastPage"
+					class="pagination"
+					@next="nextPage"
+					@previous="prevPage"
+					@firstPage="goFirstPage"
+					@lastPage="goLastPage"
+					@fetchPage="fetchPage($event)"
+				/>
+				<Loading small v-if="paginationLoading" />
+			</div>
+		</div>
 	</div>
 </template>
 
@@ -327,7 +329,10 @@ export default {
 
 <style lang="scss" scoped>
 .table-view {
-    overflow: auto;
+    .table-wrapper {
+        display: block;
+        overflow: auto;
+    }
 
     .pointer {
         cursor: pointer;

diff --git a/src/views/PageAssembler.vue b/src/views/PageAssembler.vue
@@ -212,7 +212,7 @@ export default {
         }
     }
 
-    @media screen and (min-width: 80em) {
+    @media screen and (min-width: 1300px) {
         .page-content-card-f {
             padding-left: 80px;
             padding-right: 80px;