From 3df66334db687c097612ad4721719b53868133d0 Mon Sep 17 00:00:00 2001
From: Lee Salminen <leesalminen@gmail.com>
Date: Sun, 14 Aug 2022 11:41:26 -0600
Subject: [PATCH] clean up mobile layout per @callebtc (#874)

---
 lnbits/extensions/invoices/static/css/pay.css    | 16 +++++++++++++---
 .../invoices/templates/invoices/pay.html         | 10 +++++-----
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/lnbits/extensions/invoices/static/css/pay.css b/lnbits/extensions/invoices/static/css/pay.css
index 626f5a43..ad7ce914 100644
--- a/lnbits/extensions/invoices/static/css/pay.css
+++ b/lnbits/extensions/invoices/static/css/pay.css
@@ -1,12 +1,11 @@
-#invoicePage>.row:first-child>.col-xs {
+#invoicePage>.row:first-child>.col-md-6 {
 	display:  flex;
 }
 
-#invoicePage>.row:first-child>.col-xs>.q-card {
+#invoicePage>.row:first-child>.col-md-6>.q-card {
 	flex:  1;
 }
 
-
 #invoicePage .clear {
 	margin-bottom: 25px;
 }
@@ -15,6 +14,17 @@
 	display:  none;
 }
 
+@media (min-width: 1024px) {
+	#invoicePage>.row:first-child>.col-md-6:first-child>div {
+		margin-right: 5px;
+	}
+
+	#invoicePage>.row:first-child>.col-md-6:nth-child(2)>div {
+		margin-left: 5px;
+	}
+}
+
+
 @media print {
 	* {
 		color:  black !important;
diff --git a/lnbits/extensions/invoices/templates/invoices/pay.html b/lnbits/extensions/invoices/templates/invoices/pay.html
index 14e3fcb7..7b6452dc 100644
--- a/lnbits/extensions/invoices/templates/invoices/pay.html
+++ b/lnbits/extensions/invoices/templates/invoices/pay.html
@@ -19,8 +19,8 @@
 block page %}
 <link rel="stylesheet" href="/invoices/static/css/pay.css" />
 <div id="invoicePage">
-  <div class="row q-gutter-y-md q-gutter-md">
-    <div class="col-xs">
+  <div class="row q-gutter-y-md">
+    <div class="col-md-6 col-sm-12 col-xs-12">
       <q-card>
         <q-card-section>
           <p>
@@ -88,7 +88,7 @@ block page %}
       </q-card>
     </div>
 
-    <div class="col-xs">
+    <div class="col-md-6 col-sm-12 col-xs-12">
       <q-card>
         <q-card-section>
           <p>
@@ -131,7 +131,7 @@ block page %}
 
   <div class="clear"></div>
 
-  <div class="row q-gutter-y-md q-gutter-md">
+  <div class="row">
     <div class="col-12 col-md">
       <q-card>
         <q-card-section>
@@ -162,7 +162,7 @@ block page %}
 
   <div class="clear"></div>
 
-  <div class="row q-gutter-y-md q-gutter-md">
+  <div class="row">
     <div class="col-12 col-md">
       <q-card>
         <q-card-section>