Style fixes

Signed-off-by: Alexis Sellier <self@cloudhead.io>

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;
   }
 }

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);

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)}

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);
   }