better mobile styles

src/app/dashboard/dashboard.html

@@ -54,13 +54,13 @@
         </div>
       </div>
       <div class="row" *ngFor="let recentTx of recentTxs" [routerLink]="'/accounts/'+recentTx.account.id+'/transactions'" [ngClass]="{hidden: recentTx.hidden}">
-        <div class="col-2 date">
+        <div class="col-3 col-md-2 date">
           {{recentTx.tx.date | date:"M/d"}}
         </div>
-        <div class="col-6 description">
+        <div class="col-5 col-md-6 description">
           {{recentTx.tx.description}}
         </div>
-        <div class="col-4 amount" [ngClass]="{'negative': recentTx.split.amount > 0}">
+        <div class="col-4 col-md-4 amount" [ngClass]="{'negative': recentTx.split.amount > 0}">
           {{-recentTx.split.amount | currencyFormat:recentTx.account.precision}}
         </div>
       </div>

src/app/dashboard/dashboard.scss

@@ -41,4 +41,16 @@
   .expanded .hidden {
     display: flex
   }
+}
+
+@media (max-width: 767px) {
+  .card {
+    .container-fluid {
+      padding-left: 2px;
+      padding-right: 2px;
+    }
+  }
+  .card-body {
+    padding: 0.5rem;
+  }
 }

src/sass/styles.scss

@@ -73,4 +73,17 @@ a:hover {
     font-size: 0.9rem;
     margin: 3rem 0;
   }
+}
+
+@media (max-width: 767px) {
+  .section {
+    padding: 0 0.5rem 1rem 0.5rem;
+  }
+  .content h1 {
+    padding: 0 0.5rem 0rem 0.5rem;
+  }
+
+  .content > * > .description {
+    padding: 0 0.5rem;
+  }
 }