From e884e3b003902676e2ba9d267d268f3651c39d53 Mon Sep 17 00:00:00 2001
From: Vlad Stan <stan.v.vlad@gmail.com>
Date: Thu, 11 Aug 2022 14:22:14 +0300
Subject: [PATCH] fix: look&feel on small screens

---
 .../static/components/wallet-config/wallet-config.html    | 8 ++++----
 .../static/components/wallet-list/wallet-list.html        | 7 +++----
 .../extensions/watchonly/templates/watchonly/index.html   | 7 ++++---
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/lnbits/extensions/watchonly/static/components/wallet-config/wallet-config.html b/lnbits/extensions/watchonly/static/components/wallet-config/wallet-config.html
index 61a35362..4e75a339 100644
--- a/lnbits/extensions/watchonly/static/components/wallet-config/wallet-config.html
+++ b/lnbits/extensions/watchonly/static/components/wallet-config/wallet-config.html
@@ -1,16 +1,16 @@
 <div>
   <q-card>
     <div class="row items-center no-wrap q-mb-md">
-      <div class="col-2 q-ml-lg">
+      <div class="col-md-2 col-xs-4 q-ml-lg">
         <q-btn unelevated @click="show = true" color="primary" icon="settings">
         </q-btn>
       </div>
-      <div class="col-8">
+      <div class="col-md-8 col-xs-4">
         <div class="row justify-center q-gutter-x-md items-center">
-          <div class="text-h3">{{satBtc(total)}}</div>
+          <div :class="{'text-h4': $q.screen.gt.md}">{{satBtc(total)}}</div>
         </div>
       </div>
-      <div class="col-2 float-right">
+      <div class="col-md-2 col-xs-4 q-pr-lg ">
         <slot name="serial"></slot>
       </div>
     </div>
diff --git a/lnbits/extensions/watchonly/static/components/wallet-list/wallet-list.html b/lnbits/extensions/watchonly/static/components/wallet-list/wallet-list.html
index ccd6f678..72ff2156 100644
--- a/lnbits/extensions/watchonly/static/components/wallet-list/wallet-list.html
+++ b/lnbits/extensions/watchonly/static/components/wallet-list/wallet-list.html
@@ -2,7 +2,7 @@
   <q-card>
     <q-card-section>
       <div class="row items-center no-wrap q-mb-md">
-        <div class="col">
+        <div class="col-4">
           <q-btn-dropdown
             split
             unelevated
@@ -30,9 +30,8 @@
             </q-list>
           </q-btn-dropdown>
         </div>
-
-        <div class="col-auto q-pr-lg"></div>
-        <div class="col-auto q-pl-lg">
+        <div class="col-4 q-pl-lg"></div>
+        <div class="col-4 q-pl-lg">
           <q-input
             borderless
             dense
diff --git a/lnbits/extensions/watchonly/templates/watchonly/index.html b/lnbits/extensions/watchonly/templates/watchonly/index.html
index 03deeffa..f6c853e3 100644
--- a/lnbits/extensions/watchonly/templates/watchonly/index.html
+++ b/lnbits/extensions/watchonly/templates/watchonly/index.html
@@ -13,6 +13,7 @@
           :network="config.network"
           :sats-denominated="config.sats_denominated"
           @signed:psbt="updateSignedPsbt"
+          class="q-pr-lg float-right"
         ></serial-signer>
       </template>
     </wallet-config>
@@ -33,7 +34,7 @@
     {% raw %}
     <q-card>
       <div class="row q-pt-sm q-pb-sm items-center no-wrap q-mb-md">
-        <div class="col-3 q-pl-md">
+        <div class="col-md-3 col-sm-5 q-pl-md">
           <q-btn
             unelevated
             class="btn-full"
@@ -43,14 +44,14 @@
             >Scan Blockchain</q-btn
           >
         </div>
-        <div class="col-6">
+        <div class="col-md-6 col-sm-2 q-pl-md">
           <q-spinner
             v-if="scan.scanning == true"
             color="primary"
             size="2.55em"
           ></q-spinner>
         </div>
-        <div class="col-3 q-pr-md">
+        <div class="col-md-3 col-sm-5 q-pr-md">
           <q-btn
             v-if="!showPayment"
             unelevated