fix: output amount CSS on mobile (nova) (#1482)

iotaledger · May 15, 2024 · 11bf3d9 · 11bf3d9
1 parent 52a0488
commit 11bf3d9
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git 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
@@ -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>