diff --git a/src/resources/sass/app.scss b/src/resources/sass/app.scss
index 62da1338..fbb7724f 100644
--- a/src/resources/sass/app.scss
+++ b/src/resources/sass/app.scss
@@ -1,335 +1,398 @@
 @import 'variables';
 @import 'bootstrap';
 @import 'menu';
 @import 'toast';
 @import 'forms';
 
 html,
 body,
 body > .outer-container {
     height: 100%;
 }
 
 #app {
     display: flex;
     flex-direction: column;
     min-height: 100%;
 
     & > nav {
         flex-shrink: 0;
         z-index: 12;
     }
 
     & > div.container {
         flex-grow: 1;
         margin-top: 2rem;
         margin-bottom: 2rem;
     }
 
     & > .filler {
         flex-grow: 1;
     }
 
     & > div.container + .filler {
         display: none;
     }
 }
 
 #error-page {
     position: absolute;
     top: 0;
     height: 100%;
     width: 100%;
     align-items: center;
     display: flex;
     justify-content: center;
     color: #636b6f;
     z-index: 10;
     background: white;
 
     .code {
         text-align: right;
         border-right: 2px solid;
         font-size: 26px;
         padding: 0 15px;
     }
 
     .message {
         font-size: 18px;
         padding: 0 15px;
     }
 }
 
 .app-loader {
     background-color: $body-bg;
     height: 100%;
     width: 100%;
     position: absolute;
     top: 0;
     left: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 8;
 
     .spinner-border {
         width: 120px;
         height: 120px;
         border-width: 15px;
         color: #b2aa99;
     }
 
     &.small .spinner-border {
         width: 25px;
         height: 25px;
         border-width: 3px;
     }
 
     &.fadeOut {
         visibility: hidden;
         opacity: 0;
         transition: visibility 400ms linear, opacity 400ms linear;
     }
 }
 
 pre {
     margin: 1rem 0;
     padding: 1rem;
     background-color: $menu-bg-color;
 }
 
 .card-title {
     font-size: 1.2rem;
     font-weight: bold;
 }
 
 tfoot.table-fake-body {
     background-color: #f8f8f8;
     color: grey;
     text-align: center;
 
     td {
         vertical-align: middle;
         height: 8em;
+        border: 0;
     }
 
     tbody:not(:empty) + & {
         display: none;
     }
 }
 
 table {
     td.buttons,
     td.email,
     td.price,
     td.datetime,
     td.selection {
         width: 1%;
         white-space: nowrap;
     }
 
     th.price,
     td.price {
         width: 1%;
         text-align: right;
         white-space: nowrap;
     }
 
     &.form-list {
         margin: 0;
 
         td {
             border: 0;
 
             &:first-child {
                 padding-left: 0;
             }
 
             &:last-child {
                 padding-right: 0;
             }
         }
 
         button {
             line-height: 1;
         }
     }
 
     .btn-action {
         line-height: 1;
         padding: 0;
     }
 }
 
 .list-details {
     min-height: 1em;
 
     & > ul {
         margin: 0;
         padding-left: 1.2em;
     }
 }
 
 .plan-selector {
     .plan-ico {
         font-size: 3.8rem;
         color: #f1a539;
         border: 3px solid #f1a539;
         width: 6rem;
         height: 6rem;
         margin-bottom: 1rem;
         border-radius: 50%;
     }
 }
 
 .plan-description {
     & > ul {
         padding-left: 1.2em;
 
         &:last-child {
             margin-bottom: 0;
         }
     }
 }
 
 #status-box {
     background-color: lighten($green, 35);
 
     .progress {
         background-color: #fff;
         height: 10px;
     }
 
     .progress-label {
         font-size: 0.9em;
     }
 
     .progress-bar {
         background-color: $green;
     }
 
     &.process-failed {
         background-color: lighten($orange, 30);
 
         .progress-bar {
             background-color: $red;
         }
     }
 }
 
 #dashboard-nav {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
 
     & > a {
         padding: 1rem;
         text-align: center;
         white-space: nowrap;
         margin: 0.25rem;
         text-decoration: none;
         width: 150px;
 
         &.disabled {
             pointer-events: none;
             opacity: 0.6;
         }
 
         .badge {
             position: absolute;
             top: 0.5rem;
             right: 0.5rem;
         }
     }
 
     svg {
         width: 6rem;
         height: 6rem;
         margin: auto;
     }
 }
 
 .form-separator {
     position: relative;
     margin: 1em 0;
     display: flex;
     justify-content: center;
 
     hr {
         border-color: #999;
         margin: 0;
         position: absolute;
         top: 0.75em;
         width: 100%;
     }
 
     span {
         background: #fff;
         padding: 0 1em;
         z-index: 1;
     }
 }
 
 // Various improvements for mobile
 @include media-breakpoint-down(sm) {
     .card {
         border: 0;
     }
 
     .card-body {
         padding: 0.5rem 0;
     }
 
     .form-group {
         margin-bottom: 0.5rem;
     }
 
+    .nav-tabs {
+        flex-wrap: nowrap;
+        overflow-x: auto;
+
+        .nav-link {
+            white-space: nowrap;
+            padding: 0.5rem 0.75rem;
+        }
+    }
+
     .tab-content {
         margin-top: 0.5rem;
     }
 
     .col-form-label {
         color: #666;
         font-size: 95%;
     }
 
     .form-group.plaintext .col-form-label {
         padding-bottom: 0;
     }
 
     form.read-only.short label {
         width: 35%;
 
         & + * {
             width: 65%;
         }
     }
 
     #app > div.container {
         margin-bottom: 1rem;
         margin-top: 1rem;
+        max-width: 100%;
     }
 
     #header-menu-navbar {
         padding: 0;
     }
 
     #dashboard-nav > a {
         width: 135px;
     }
 
     .table-sm:not(.form-list) {
         tbody td {
             padding: 0.75rem 0.5rem;
 
             svg {
                 vertical-align: -0.175em;
             }
 
             & > svg {
                 font-size: 125%;
                 margin-right: 0.25rem;
             }
         }
     }
+
+    .table.transactions {
+        thead {
+            display: none;
+        }
+
+        tbody {
+            tr {
+                position: relative;
+                display: flex;
+                flex-wrap: wrap;
+            }
+
+            td {
+                width: auto;
+                border: 0;
+                padding: 0.5rem;
+
+                &.datetime {
+                    width: 50%;
+                    padding-left: 0;
+                }
+
+                &.description {
+                    order: 3;
+                    width: 100%;
+                    border-bottom: 1px solid $border-color;
+                    color: $secondary;
+                    padding: 0 1.5em 0.5rem 0;
+                    margin-top: -0.25em;
+                }
+
+                &.selection {
+                    position: absolute;
+                    right: 0;
+                    border: 0;
+                    top: 1.7em;
+                    padding-right: 0;
+                }
+
+                &.price {
+                    width: 50%;
+                    padding-right: 0;
+                }
+
+                &.email {
+                    display: none;
+                }
+            }
+        }
+    }
 }
diff --git a/src/resources/sass/menu.scss b/src/resources/sass/menu.scss
index 25c99965..ace41eb2 100644
--- a/src/resources/sass/menu.scss
+++ b/src/resources/sass/menu.scss
@@ -1,150 +1,150 @@
 #header-menu {
     background-color: $menu-bg-color;
     padding: 0;
     line-height: 85px;
 
     .navbar-brand {
         padding: 0;
         outline: 0;
 
         > img {
             display: inline;
             vertical-align: middle;
         }
     }
 
     .nav-link {
         color: #202020;
         line-height: 85px;
         padding: 0 0 0 25px;
         background: transparent;
 
         &:focus {
             text-decoration: underline;
             outline: 0;
         }
 
         &:hover {
             color: $main-color;
             text-decoration: underline;
         }
 
         &.active:not(.menulogin) {
             font-weight: bold;
         }
     }
 }
 
 #footer-menu {
     background-color: $main-color;
     height: 100px;
 
     .navbar-brand {
         margin: 0;
 
         img {
             width: 170px;
         }
     }
 
     .footer {
         text-align: right;
         color: #fff;
         font-size: 0.75rem;
         padding: 0 0.5rem;
     }
 }
 
 @include media-breakpoint-up(lg) {
     #header-menu {
         a.menulogin {
             text-transform: uppercase;
             border: 2px solid $main-color;
             border-radius: 21px;
             line-height: 21px;
             letter-spacing: 1px;
             padding: 6px 34px;
             margin: 25px 0 25px 25px;
 
             &:focus,
             &:hover {
                 text-decoration: none;
                 background-color: $main-color;
                 color: #fff;
                 font-weight: normal;
             }
         }
     }
 
-    #footer-menu {
+    .navbar {
         .navbar {
-            flex-direction: column;
-            align-items: flex-end;
+            justify-content: flex-end;
         }
     }
 
-    .navbar {
+    #footer-menu {
         .navbar {
-            justify-content: flex-end;
+            flex-direction: column;
+            align-items: flex-end;
         }
     }
 }
 
 @include media-breakpoint-down(md) {
     #header-menu {
         .navbar-nav {
             padding-bottom: 1em;
         }
 
         .nav-link {
             line-height: 45px;
             padding: 0;
         }
     }
 
     #footer-menu {
         .navbar-nav {
             display: none;
         }
 
         .container {
             flex-wrap: nowrap;
         }
     }
 }
 
 @include media-breakpoint-down(sm) {
     #header-menu {
         padding: 0 1em;
 
         .navbar-nav {
             display: block;
             width: 100%;
             padding: 0;
 
             li {
                 border-top: 1px solid #eee;
             }
         }
     }
 
     #footer-menu {
         height: 80px;
 
         .container {
             flex-direction: column;
         }
 
         #footer-company {
             display: none;
         }
     }
 }
 
 @media (max-width: 340px) {
     #header-menu {
         .navbar-brand img {
             width: 160px;
         }
     }
 }
diff --git a/src/resources/vue/Widgets/TransactionLog.vue b/src/resources/vue/Widgets/TransactionLog.vue
index 6fb4e356..3e725251 100644
--- a/src/resources/vue/Widgets/TransactionLog.vue
+++ b/src/resources/vue/Widgets/TransactionLog.vue
@@ -1,122 +1,122 @@
 <template>
     <div>
         <table class="table table-sm m-0 transactions">
             <thead class="thead-light">
                 <tr>
                     <th scope="col">Date</th>
                     <th scope="col" v-if="isAdmin">User</th>
                     <th scope="col"></th>
                     <th scope="col">Description</th>
                     <th scope="col" class="price">Amount</th>
                 </tr>
             </thead>
             <tbody>
                 <tr v-for="transaction in transactions" :id="'log' + transaction.id" :key="transaction.id">
                     <td class="datetime">{{ transaction.createdAt }}</td>
                     <td class="email" v-if="isAdmin">{{ transaction.user }}</td>
                     <td class="selection">
-                        <button class="btn btn-lg btn-link btn-action" title="Details"
+                        <button class="btn btn-lg btn-link btn-action" title="Details" type="button"
                                 v-if="transaction.hasDetails"
                                 @click="loadTransaction(transaction.id)"
                         >
                             <svg-icon icon="info-circle"></svg-icon>
                         </button>
                     </td>
                     <td class="description">{{ description(transaction) }}</td>
                     <td :class="'price ' + className(transaction)">{{ amount(transaction) }}</td>
                 </tr>
             </tbody>
             <tfoot class="table-fake-body">
                 <tr>
                     <td :colspan="isAdmin ? 5 : 4">There are no transactions for this account.</td>
                 </tr>
             </tfoot>
         </table>
         <div class="text-center p-3" id="transactions-loader" v-if="hasMore">
             <button class="btn btn-secondary" @click="loadLog(true)">Load more</button>
         </div>
     </div>
 </template>
 
 <script>
     export default {
         props: {
             walletId: { type: String, default: null },
             isAdmin: { type: Boolean, default: false },
         },
         data() {
             return {
                 transactions: [],
                 hasMore: false,
                 page: 1
             }
         },
         mounted() {
             this.loadLog()
         },
         methods: {
             loadLog(more) {
                 if (!this.walletId) {
                     return
                 }
 
                 let loader = $(this.$el)
                 let param = ''
 
                 if (more) {
                     param = '?page=' + (this.page + 1)
                     loader = $('#transactions-loader')
                 }
 
                 this.$root.addLoader(loader)
                 axios.get('/api/v4/wallets/' + this.walletId + '/transactions' + param)
                     .then(response => {
                         this.$root.removeLoader(loader)
                         // Note: In Vue we can't just use .concat()
                         for (let i in response.data.list) {
                             this.$set(this.transactions, this.transactions.length, response.data.list[i])
                         }
                         this.hasMore = response.data.hasMore
                         this.page = response.data.page || 1
                     })
                     .catch(error => {
                         this.$root.removeLoader(loader)
                     })
             },
             loadTransaction(id) {
                 let record = $('#log' + id)
                 let cell = record.find('td.description')
                 let details = $('<div class="list-details"><ul></ul><div>').appendTo(cell)
 
                 this.$root.addLoader(cell)
                 axios.get('/api/v4/wallets/' + this.walletId + '/transactions' + '?transaction=' + id)
                     .then(response => {
                         this.$root.removeLoader(cell)
                         record.find('button').remove()
                         let list = details.find('ul')
                         response.data.list.forEach(elem => {
                            list.append($('<li>').text(this.description(elem)))
                         })
                     })
                     .catch(error => {
                         this.$root.removeLoader(cell)
                     })
             },
             amount(transaction) {
                 return this.$root.price(transaction.amount)
             },
             className(transaction) {
                 return transaction.amount < 0 ? 'text-danger' : 'text-success';
             },
             description(transaction) {
                 let desc = transaction.description
 
                 if (/^(billed|created|deleted)$/.test(transaction.type)) {
                     desc += ' (' + this.$root.price(transaction.amount) + ')'
                 }
 
                 return desc
             }
         }
     }
 </script>
diff --git a/src/tests/Browser/Admin/UserFinancesTest.php b/src/tests/Browser/Admin/UserFinancesTest.php
index aa63f5a9..dd9b3959 100644
--- a/src/tests/Browser/Admin/UserFinancesTest.php
+++ b/src/tests/Browser/Admin/UserFinancesTest.php
@@ -1,316 +1,322 @@
 <?php
 
 namespace Tests\Browser\Admin;
 
 use App\Discount;
 use App\Transaction;
 use App\User;
 use App\Wallet;
 use Carbon\Carbon;
 use Tests\Browser;
 use Tests\Browser\Components\Dialog;
 use Tests\Browser\Components\Toast;
 use Tests\Browser\Pages\Admin\User as UserPage;
 use Tests\Browser\Pages\Dashboard;
 use Tests\Browser\Pages\Home;
 use Tests\TestCaseDusk;
 
 class UserFinancesTest extends TestCaseDusk
 {
     /**
      * {@inheritDoc}
      */
     public function setUp(): void
     {
         parent::setUp();
         self::useAdminUrl();
 
         $john = $this->getTestUser('john@kolab.org');
         $wallet = $john->wallets()->first();
         $wallet->discount()->dissociate();
         $wallet->balance = 0;
         $wallet->save();
         $wallet->setSettings(['mollie_id' => null, 'stripe_id' => null]);
     }
 
     /**
      * Test Finances tab (and transactions)
      */
     public function testFinances(): void
     {
         // Assert Jack's Finances tab
         $this->browse(function (Browser $browser) {
             $jack = $this->getTestUser('jack@kolab.org');
             $wallet = $jack->wallets()->first();
             $wallet->transactions()->delete();
             $wallet->setSetting('stripe_id', 'abc');
             $page = new UserPage($jack->id);
 
             $browser->visit(new Home())
                 ->submitLogon('jeroen@jeroen.jeroen', 'jeroen', true)
                 ->on(new Dashboard())
                 ->visit($page)
                 ->on($page)
                 ->assertSeeIn('@nav #tab-finances', 'Finances')
                 ->with('@user-finances', function (Browser $browser) {
                     $browser->waitUntilMissing('.app-loader')
                         ->assertSeeIn('.card-title:first-child', 'Account balance')
                         ->assertSeeIn('.card-title:first-child .text-success', '0,00 CHF')
                         ->with('form', function (Browser $browser) {
                             $browser->assertElementsCount('.row', 2)
                                 ->assertSeeIn('.row:nth-child(1) label', 'Discount')
                                 ->assertSeeIn('.row:nth-child(1) #discount span', 'none')
                                 ->assertSeeIn('.row:nth-child(2) label', 'Stripe ID')
                                 ->assertSeeIn('.row:nth-child(2) a', 'abc');
                         })
                         ->assertSeeIn('h2:nth-of-type(2)', 'Transactions')
                         ->with('table', function (Browser $browser) {
                             $browser->assertMissing('tbody')
                                 ->assertSeeIn('tfoot td', "There are no transactions for this account.");
                         })
                         ->assertMissing('table + button');
                 });
         });
 
         // Assert John's Finances tab (with discount, and debit)
         $this->browse(function (Browser $browser) {
             $john = $this->getTestUser('john@kolab.org');
             $page = new UserPage($john->id);
             $discount = Discount::where('code', 'TEST')->first();
             $wallet = $john->wallet();
             $wallet->transactions()->delete();
             $wallet->discount()->associate($discount);
             $wallet->debit(2010);
             $wallet->save();
 
             // Create test transactions
             $transaction = Transaction::create([
                     'user_email' => 'jeroen@jeroen.jeroen',
                     'object_id' => $wallet->id,
                     'object_type' => Wallet::class,
                     'type' => Transaction::WALLET_CREDIT,
                     'amount' => 100,
                     'description' => 'Payment',
             ]);
             $transaction->created_at = Carbon::now()->subMonth();
             $transaction->save();
 
             // Click the managed-by link on Jack's page
             $browser->click('@user-info #manager a')
                 ->on($page)
                 ->with('@user-finances', function (Browser $browser) {
                     $browser->waitUntilMissing('.app-loader')
                         ->assertSeeIn('.card-title:first-child', 'Account balance')
                         ->assertSeeIn('.card-title:first-child .text-danger', '-20,10 CHF')
                         ->with('form', function (Browser $browser) {
                             $browser->assertElementsCount('.row', 1)
                                 ->assertSeeIn('.row:nth-child(1) label', 'Discount')
                                 ->assertSeeIn('.row:nth-child(1) #discount span', '10% - Test voucher');
                         })
                         ->assertSeeIn('h2:nth-of-type(2)', 'Transactions')
                         ->with('table', function (Browser $browser) {
                             $browser->assertElementsCount('tbody tr', 2)
-                                ->assertMissing('tfoot')
-                                ->assertSeeIn('tbody tr:last-child td.email', 'jeroen@jeroen.jeroen');
+                                ->assertMissing('tfoot');
+
+                            if (!$browser->isPhone()) {
+                                $browser->assertSeeIn('tbody tr:last-child td.email', 'jeroen@jeroen.jeroen');
+                            }
                         });
                 });
         });
 
         // Now we go to Ned's info page, he's a controller on John's wallet
         $this->browse(function (Browser $browser) {
             $ned = $this->getTestUser('ned@kolab.org');
             $page = new UserPage($ned->id);
 
             $browser->click('@nav #tab-users')
                 ->click('@user-users tbody tr:nth-child(3) td:first-child a')
                 ->on($page)
                 ->with('@user-finances', function (Browser $browser) {
                     $browser->waitUntilMissing('.app-loader')
                         ->assertSeeIn('.card-title:first-child', 'Account balance')
                         ->assertSeeIn('.card-title:first-child .text-success', '0,00 CHF')
                         ->with('form', function (Browser $browser) {
                             $browser->assertElementsCount('.row', 1)
                                 ->assertSeeIn('.row:nth-child(1) label', 'Discount')
                                 ->assertSeeIn('.row:nth-child(1) #discount span', 'none');
                         })
                         ->assertSeeIn('h2:nth-of-type(2)', 'Transactions')
                         ->with('table', function (Browser $browser) {
                             $browser->assertMissing('tbody')
                                 ->assertSeeIn('tfoot td', "There are no transactions for this account.");
                         })
                         ->assertMissing('table + button');
                 });
         });
     }
 
     /**
      * Test editing wallet discount
      *
      * @depends testFinances
      */
     public function testWalletDiscount(): void
     {
         $this->browse(function (Browser $browser) {
             $john = $this->getTestUser('john@kolab.org');
 
             $browser->visit(new UserPage($john->id))
                 ->pause(100)
                 ->waitUntilMissing('@user-finances .app-loader')
                 ->click('@user-finances #discount button')
                 // Test dialog content, and closing it with Cancel button
                 ->with(new Dialog('#discount-dialog'), function (Browser $browser) {
                     $browser->assertSeeIn('@title', 'Account discount')
                         ->assertFocused('@body select')
                         ->assertSelected('@body select', '')
                         ->assertSeeIn('@button-cancel', 'Cancel')
                         ->assertSeeIn('@button-action', 'Submit')
                         ->click('@button-cancel');
                 })
                 ->assertMissing('#discount-dialog')
                 ->click('@user-finances #discount button')
                 // Change the discount
                 ->with(new Dialog('#discount-dialog'), function (Browser $browser) {
                     $browser->click('@body select')
                         ->click('@body select option:nth-child(2)')
                         ->click('@button-action');
                 })
                 ->assertToast(Toast::TYPE_SUCCESS, 'User wallet updated successfully.')
                 ->assertSeeIn('#discount span', '10% - Test voucher')
                 ->click('@nav #tab-subscriptions')
                 ->with('@user-subscriptions', function (Browser $browser) {
                     $browser->assertSeeIn('table tbody tr:nth-child(1) td:last-child', '3,99 CHF/month¹')
                         ->assertSeeIn('table tbody tr:nth-child(2) td:last-child', '0,00 CHF/month¹')
                         ->assertSeeIn('table tbody tr:nth-child(3) td:last-child', '4,99 CHF/month¹')
                         ->assertSeeIn('table + .hint', '¹ applied discount: 10% - Test voucher');
                 })
                 // Change back to 'none'
                 ->click('@nav #tab-finances')
                 ->click('@user-finances #discount button')
                 ->with(new Dialog('#discount-dialog'), function (Browser $browser) {
                     $browser->click('@body select')
                         ->click('@body select option:nth-child(1)')
                         ->click('@button-action');
                 })
                 ->assertToast(Toast::TYPE_SUCCESS, 'User wallet updated successfully.')
                 ->assertSeeIn('#discount span', 'none')
                 ->click('@nav #tab-subscriptions')
                 ->with('@user-subscriptions', function (Browser $browser) {
                     $browser->assertSeeIn('table tbody tr:nth-child(1) td:last-child', '4,44 CHF/month')
                         ->assertSeeIn('table tbody tr:nth-child(2) td:last-child', '0,00 CHF/month')
                         ->assertSeeIn('table tbody tr:nth-child(3) td:last-child', '5,55 CHF/month')
                         ->assertMissing('table + .hint');
                 });
         });
     }
 
     /**
      * Test awarding/penalizing a wallet
      *
      * @depends testFinances
      */
     public function testBonusPenalty(): void
     {
         $this->browse(function (Browser $browser) {
             $john = $this->getTestUser('john@kolab.org');
 
             $browser->visit(new UserPage($john->id))
                 ->waitFor('@user-finances #button-award')
                 ->click('@user-finances #button-award')
                 // Test dialog content, and closing it with Cancel button
                 ->with(new Dialog('#oneoff-dialog'), function (Browser $browser) {
                     $browser->assertSeeIn('@title', 'Add a bonus to the wallet')
                         ->assertFocused('@body input#oneoff_amount')
                         ->assertSeeIn('@body label[for="oneoff_amount"]', 'Amount')
                         ->assertvalue('@body input#oneoff_amount', '')
                         ->assertSeeIn('@body label[for="oneoff_description"]', 'Description')
                         ->assertvalue('@body input#oneoff_description', '')
                         ->assertSeeIn('@button-cancel', 'Cancel')
                         ->assertSeeIn('@button-action', 'Submit')
                         ->click('@button-cancel');
                 })
                 ->assertMissing('#oneoff-dialog');
 
             // Test bonus
             $browser->click('@user-finances #button-award')
                 ->with(new Dialog('#oneoff-dialog'), function (Browser $browser) {
                     // Test input validation for a bonus
                     $browser->type('@body #oneoff_amount', 'aaa')
                         ->type('@body #oneoff_description', '')
                         ->click('@button-action')
                         ->assertToast(Toast::TYPE_ERROR, 'Form validation error')
                         ->assertVisible('@body #oneoff_amount.is-invalid')
                         ->assertVisible('@body #oneoff_description.is-invalid')
                         ->assertSeeIn(
                             '@body #oneoff_amount + span + .invalid-feedback',
                             'The amount must be a number.'
                         )
                         ->assertSeeIn(
                             '@body #oneoff_description + .invalid-feedback',
                             'The description field is required.'
                         );
 
                     // Test adding a bonus
                     $browser->type('@body #oneoff_amount', '12.34')
                         ->type('@body #oneoff_description', 'Test bonus')
                         ->click('@button-action')
                         ->assertToast(Toast::TYPE_SUCCESS, 'The bonus has been added to the wallet successfully.');
                 })
                 ->assertMissing('#oneoff-dialog')
                 ->assertSeeIn('@user-finances .card-title span.text-success', '12,34 CHF')
                 ->waitUntilMissing('.app-loader')
                 ->with('table', function (Browser $browser) {
                     $browser->assertElementsCount('tbody tr', 3)
                         ->assertMissing('tfoot')
                         ->assertSeeIn('tbody tr:first-child td.description', 'Bonus: Test bonus')
-                        ->assertSeeIn('tbody tr:first-child td.email', 'jeroen@jeroen.jeroen')
                         ->assertSeeIn('tbody tr:first-child td.price', '12,34 CHF');
+
+                    if (!$browser->isPhone()) {
+                        $browser->assertSeeIn('tbody tr:first-child td.email', 'jeroen@jeroen.jeroen');
+                    }
                 });
 
             $this->assertSame(1234, $john->wallets()->first()->balance);
 
             // Test penalty
             $browser->click('@user-finances #button-penalty')
                 // Test dialog content, and closing it with Cancel button
                 ->with(new Dialog('#oneoff-dialog'), function (Browser $browser) {
                     $browser->assertSeeIn('@title', 'Add a penalty to the wallet')
                         ->assertFocused('@body input#oneoff_amount')
                         ->assertSeeIn('@body label[for="oneoff_amount"]', 'Amount')
                         ->assertvalue('@body input#oneoff_amount', '')
                         ->assertSeeIn('@body label[for="oneoff_description"]', 'Description')
                         ->assertvalue('@body input#oneoff_description', '')
                         ->assertSeeIn('@button-cancel', 'Cancel')
                         ->assertSeeIn('@button-action', 'Submit')
                         ->click('@button-cancel');
                 })
                 ->assertMissing('#oneoff-dialog')
                 ->click('@user-finances #button-penalty')
                 ->with(new Dialog('#oneoff-dialog'), function (Browser $browser) {
                     // Test input validation for a penalty
                     $browser->type('@body #oneoff_amount', '')
                         ->type('@body #oneoff_description', '')
                         ->click('@button-action')
                         ->assertToast(Toast::TYPE_ERROR, 'Form validation error')
                         ->assertVisible('@body #oneoff_amount.is-invalid')
                         ->assertVisible('@body #oneoff_description.is-invalid')
                         ->assertSeeIn(
                             '@body #oneoff_amount + span + .invalid-feedback',
                             'The amount field is required.'
                         )
                         ->assertSeeIn(
                             '@body #oneoff_description + .invalid-feedback',
                             'The description field is required.'
                         );
 
                     // Test adding a penalty
                     $browser->type('@body #oneoff_amount', '12.35')
                         ->type('@body #oneoff_description', 'Test penalty')
                         ->click('@button-action')
                         ->assertToast(Toast::TYPE_SUCCESS, 'The penalty has been added to the wallet successfully.');
                 })
                 ->assertMissing('#oneoff-dialog')
                 ->assertSeeIn('@user-finances .card-title span.text-danger', '-0,01 CHF');
 
             $this->assertSame(-1, $john->wallets()->first()->balance);
         });
     }
 }