frontend: make copy component responsive and simplify styles

The copy component should grow to improve accessibility.

Also removed utility classes in favor of already exsting container
class.

Author: thisconnect

frontends/web/src/components/copy/Copy.module.css

@@ -6,21 +6,20 @@
     cursor: pointer;
     display: flex;
     flex-direction: row;
-    height: 18px;
+    height: var(--size-default);
     justify-content: center;
     margin-top: var(--spacing-half);
-    min-width: 18px !important;
+    max-width: var(--size-default);
     padding: 0;
     position: absolute;
     right: var(--spacing-default);
     top: 10px;
     transition: background-color ease 0.2s;
-    width: 18px;
     will-change: background-color;
 }
 
 .button img {
-    width: 18px;
+    height: var(--size-default);
 }
 
 .button:focus {
@@ -36,6 +35,10 @@
 }
 
 .container {
+    align-items: flex-start;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
     position: relative;
 }
 

frontends/web/src/components/copy/Copy.tsx

@@ -89,7 +89,6 @@ export const CopyableInput = ({
 
   return (
     <div className={[
-      'flex flex-row flex-start flex-items-start',
       style.container,
       className ? className : ''
     ].join(' ')}>

frontends/web/src/style/layout.css

@@ -8,7 +8,6 @@
 .flex-end { justify-content: flex-end; }
 .flex-items-center { align-items: center; }
 .flex-items-baseline { align-items: baseline; }
-.flex-items-start { align-items: flex-start; }
 .flex-items-end { align-items: flex-end; }
 .flex-items-stretch { align-items: stretch; }
 .flex-wrap { flex-wrap: wrap; }