From 11bf3d906763a6d72c2e7accb5528a8d23f45918 Mon Sep 17 00:00:00 2001
From: Bran <52735957+brancoder@users.noreply.github.com>
Date: Wed, 15 May 2024 17:20:48 +0200
Subject: [PATCH] fix: output amount CSS on mobile (nova) (#1482)

---
 client/src/app/components/nova/OutputView.scss |  7 +++++++
 client/src/app/components/nova/OutputView.tsx  | 14 +++++++-------
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/client/src/app/components/nova/OutputView.scss b/client/src/app/components/nova/OutputView.scss
index d5b23291c..c4affc334 100644
--- a/client/src/app/components/nova/OutputView.scss
+++ b/client/src/app/components/nova/OutputView.scss
@@ -33,6 +33,10 @@
                 height: auto;
             }
 
+            @include phone-down {
+                flex-wrap: wrap;
+            }
+
             .output-header {
                 display: flex;
                 width: 100%;
@@ -62,6 +66,9 @@
                 }
             }
 
+            .row.middle {
+                margin: 5px 10px;
+            }
             .amount-size {
                 width: min-content;
                 text-align: end;
diff --git a/client/src/app/components/nova/OutputView.tsx b/client/src/app/components/nova/OutputView.tsx
index 92eabe0e3..cc591cb7e 100644
--- a/client/src/app/components/nova/OutputView.tsx
+++ b/client/src/app/components/nova/OutputView.tsx
@@ -92,14 +92,14 @@ const OutputView: React.FC<OutputViewProps> = ({ outputId, output, showCopyAmoun
 
     const header = (
         <div onClick={() => setIsExpanded(!isExpanded)} className="card--value card-header--wrapper">
-            <div
-                className={classNames("card--content--dropdown", {
-                    opened: isExpanded,
-                })}
-            >
-                <DropdownIcon />
-            </div>
             <div className="output-header">
+                <div
+                    className={classNames("card--content--dropdown", {
+                        opened: isExpanded,
+                    })}
+                >
+                    <DropdownIcon />
+                </div>
                 <button type="button" className="output-type--name color">
                     {NameHelper.getOutputTypeName(output.type)}
                 </button>