From 987def9baa8de482b16223aa9b4dc1a089f2b7b8 Mon Sep 17 00:00:00 2001
From: Mononaut <github@monospace.live>
Date: Thu, 16 May 2024 21:10:15 +0000
Subject: [PATCH] Improve faucet mobile layout

---
 frontend/src/app/components/faucet/faucet.component.html | 4 ++--
 frontend/src/app/components/faucet/faucet.component.scss | 8 +++++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/faucet/faucet.component.html b/frontend/src/app/components/faucet/faucet.component.html
index ac79b24ea..1030087b1 100644
--- a/frontend/src/app/components/faucet/faucet.component.html
+++ b/frontend/src/app/components/faucet/faucet.component.html
@@ -42,7 +42,7 @@
                 </div>
                 <input type="number" class="form-control" formControlName="satoshis" id="satoshis">
                 <div class="button-group">
-                  <button type="button" class="btn btn-secondary ml-2" (click)="setAmount(5000)">5k</button>
+                  <button type="button" class="btn btn-secondary" (click)="setAmount(5000)">5k</button>
                   <button type="button" class="btn btn-secondary ml-2" (click)="setAmount(50000)">50k</button>
                   <button type="button" class="btn btn-secondary ml-2" (click)="setAmount(500000)">500k</button>
                 </div>
@@ -57,7 +57,7 @@
                   <span class="input-group-text" i18n="address">Address</span>
                 </div>
                 <input type="address" class="form-control" formControlName="address" id="address" placeholder="tb1q...">
-                <button type="submit" class="btn btn-primary submit-button ml-2" [disabled]="!status?.access || !faucetForm.valid || !faucetForm.get('address')?.dirty" i18n="testnet4.request-coins">Request Testnet4 Coins</button>
+                <button type="submit" class="btn btn-primary submit-button" [disabled]="!status?.access || !faucetForm.valid || !faucetForm.get('address')?.dirty" i18n="testnet4.request-coins">Request Testnet4 Coins</button>
               </div>
               <div class="text-danger text-left" *ngIf="invalidAddress">
                 @if (address?.errors?.['required']) {
diff --git a/frontend/src/app/components/faucet/faucet.component.scss b/frontend/src/app/components/faucet/faucet.component.scss
index a8cf295f3..084168ca4 100644
--- a/frontend/src/app/components/faucet/faucet.component.scss
+++ b/frontend/src/app/components/faucet/faucet.component.scss
@@ -8,9 +8,11 @@
   align-items: stretch;
   justify-content: flex-end;
   row-gap: 0.5rem;
+  gap: 0.5rem;
   
   .form-control {
-    min-width: 200px;
+    min-width: 160px;
+    flex-grow: 100;
   }
 
   .button-group {
@@ -18,6 +20,10 @@
     align-items: stretch;
   }
 
+  .submit-button, .button-group, .button-group .btn {
+    flex-grow: 1;
+  }
+
   #satoshis::after {
     content: 'sats';
     position: absolute;