From fe216b12d9145c132f85d321c1b8aba91d3c2d25 Mon Sep 17 00:00:00 2001
From: softsimon <softsimon@protonmail.com>
Date: Wed, 25 Mar 2020 00:41:46 +0700
Subject: [PATCH] Mobile padding improvements.

---
 frontend/src/app/components/block/block.component.html |  8 ++++----
 frontend/src/app/components/block/block.component.scss | 10 ++++++++--
 frontend/src/styles.scss                               |  6 ++++++
 3 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/frontend/src/app/components/block/block.component.html b/frontend/src/app/components/block/block.component.html
index 467bd9672..c796a7685 100644
--- a/frontend/src/app/components/block/block.component.html
+++ b/frontend/src/app/components/block/block.component.html
@@ -14,7 +14,7 @@
           <table class="table table-borderless table-striped">
             <tbody>
               <tr>
-                <td class="mobile-width">Timestamp</td>
+                <td class="td-width">Timestamp</td>
                 <td>
                   {{ block.timestamp * 1000 | date:'yyyy-MM-dd HH:mm' }}
                   <div class="lg-inline">
@@ -41,7 +41,7 @@
           <table class="table table-borderless table-striped">
             <tbody>
               <tr>
-                <td class="mobile-width">Hash</td>
+                <td class="td-width">Hash</td>
                 <td><a [routerLink]="['/block/', block.id]" title="{{ block.id }}">{{ block.id | shortenString : 13 }}</a> <app-clipboard [text]="block.id"></app-clipboard></td>
               </tr>
               <tr *ngIf="block.medianFee !== undefined">
@@ -117,7 +117,7 @@
           <table class="table table-borderless table-striped">
             <tbody>
               <tr>
-                <td class="mobile-width" colspan="2"><span class="skeleton-loader"></span></td>
+                <td class="td-width" colspan="2"><span class="skeleton-loader"></span></td>
               </tr>
               <tr>
                 <td colspan="2"><span class="skeleton-loader"></span></td>
@@ -135,7 +135,7 @@
           <table class="table table-borderless table-striped">
             <tbody>
               <tr>
-                <td class="mobile-width" colspan="2"><span class="skeleton-loader"></span></td>
+                <td class="td-width" colspan="2"><span class="skeleton-loader"></span></td>
               </tr>
               <tr>
                 <td colspan="2"><span class="skeleton-loader"></span></td>
diff --git a/frontend/src/app/components/block/block.component.scss b/frontend/src/app/components/block/block.component.scss
index 859b81409..8fdae6df5 100644
--- a/frontend/src/app/components/block/block.component.scss
+++ b/frontend/src/app/components/block/block.component.scss
@@ -5,6 +5,12 @@
   border-top: 5px solid #FFF;
 }
 
-.mobile-width {
-  width: 130px;
+.td-width {
+  width: 175px;
+}
+
+@media (max-width: 767.98px) {
+	.td-width {
+		width: 150px;
+	}
 }
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index bbe983877..9fae107e4 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -50,6 +50,12 @@ body {
   box-shadow: 0.125rem 0.125rem 0.25rem rgba(0,0,0,0.075);
 }
 
+@media (max-width: 767.98px) {
+  .box {
+    padding: 0.75rem;
+  }
+}
+
 .form-control {
   color: #495057;
 }