From 3d00fc39bb224e51ecf0c353e575cbc9bc4b7c96 Mon Sep 17 00:00:00 2001
From: Alexis Sellier <self@cloudhead.io>
Date: Wed, 24 Aug 2022 10:35:52 +0200
Subject: [PATCH] Style fixes

Signed-off-by: Alexis Sellier <self@cloudhead.io>
---
 public/index.css     | 8 ++++----
 src/Clipboard.svelte | 8 ++++----
 src/Form.svelte      | 9 ++++++---
 src/Input.svelte     | 2 ++
 4 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/public/index.css b/public/index.css
index 581eb9122..ccb8b9534 100644
--- a/public/index.css
+++ b/public/index.css
@@ -408,7 +408,7 @@ label.input {
   font-family: var(--font-family-monospace);
 }
 
-.mobile {
+.mobile, .mobile-inline {
   display: none !important;
 }
 .desktop {
@@ -422,10 +422,10 @@ label.input {
   .mobile {
     display: block !important;
   }
-  .desktop {
-    display: none !important;
+  .mobile-inline {
+    display: inline !important;
   }
-  .desktop-inline {
+  .desktop, .desktop-inline {
     display: none !important;
   }
 }
diff --git a/src/Clipboard.svelte b/src/Clipboard.svelte
index c36532c8d..6f1940f4e 100644
--- a/src/Clipboard.svelte
+++ b/src/Clipboard.svelte
@@ -16,16 +16,16 @@
 
 <style>
   .clipboard {
-    width: 30px;
-    height: 30px;
+    width: 2rem;
+    height: 2rem;
     cursor: pointer;
     display: inline-flex;
     justify-content: center;
     align-items: center;
   }
   .clipboard.small {
-    width: 24px;
-    height: 24px;
+    width: 1.5rem;
+    height: 1.5rem;
   }
   .clipboard:hover :global(svg) {
     fill: var(--color-foreground-90);
diff --git a/src/Form.svelte b/src/Form.svelte
index af33bc742..7363bf005 100644
--- a/src/Form.svelte
+++ b/src/Form.svelte
@@ -117,6 +117,9 @@
     margin: 0;
     white-space: nowrap;
   }
+  .field > div {
+    height: inherit;
+  }
   .ellipsis {
     width: 28rem;
     overflow: hidden;
@@ -133,7 +136,7 @@
   }
 
   input.field {
-    border-radius: var(--border-radius);
+    border-radius: var(--border-radius-round);
     overflow: hidden;
     text-overflow: ellipsis;
     border-color: var(--color-secondary) !important;
@@ -192,10 +195,10 @@
                 <a class="link" href="{field.value}" target="_blank">{field.value}</a>
               </span>
             {:else if isAddress(field.value)}
-              <div class="desktop">
+              <div class="desktop-inline">
                 <Address resolve={field.resolve ?? false} address={field.value} {config} />
               </div>
-              <div class="mobile">
+              <div class="mobile-inline">
                 <Address compact resolve={field.resolve ?? false} address={field.value} {config} />
               </div>
             {:else if (field.url)}
diff --git a/src/Input.svelte b/src/Input.svelte
index 3d3f3779f..345105197 100644
--- a/src/Input.svelte
+++ b/src/Input.svelte
@@ -17,6 +17,7 @@
     visibility: hidden;
     margin-left: -4rem;
     width: 4rem;
+    height: 2rem;
     text-align: right;
     -webkit-mask: linear-gradient(90deg, transparent 0%, #fff 50%);
     mask: linear-gradient(90deg, transparent 0%, #fff 50%);
@@ -29,6 +30,7 @@
     border: none;
     outline: none;
     width: 100%;
+    height: 2rem;
     text-overflow: ellipsis !important;
     border-radius: var(--border-radius-small);
   }