Added copy button to error messages

frontend/src/components/blankstate.svelte

@@ -18,7 +18,7 @@
     {/if}
 
     <p class="title">{title}</p>
-    <p>{label}</p>
+    <p class="label">{label}</p>
 
     <slot />
   </div>
@@ -38,7 +38,7 @@
     height: 150px;
     width: auto;
   }
-  .content :global(svg) {
+  .content > :global(svg) {
     height: 40px;
     width: auto;
   }

frontend/src/components/grid.svelte

@@ -1,6 +1,8 @@
 <script>
+  import { onDestroy } from 'svelte';
   import BlankState from './blankstate.svelte';
   import GridItems from './grid-items.svelte';
+  import Icon from './icon.svelte';
 
   export let columns = [];
   export let items = [];
@@ -16,6 +18,17 @@
   export let errorTitle = '';
   export let errorDescription = '';
   export let busy = false;
+
+  let copySucceeded = false;
+  let timeout;
+
+  async function copyErrorDescription() {
+    await navigator.clipboard.writeText(errorDescription);
+    copySucceeded = true;
+    timeout = setTimeout(() => copySucceeded = false, 1500);
+  }
+
+  onDestroy(() => clearTimeout(timeout));
 </script>
 
 <div class="grid">
@@ -33,7 +46,11 @@
   {#if busy}
     <BlankState label={(busy === true) ? 'Loading…' : busy} icon="loading" />
   {:else if errorTitle || errorDescription}
-    <BlankState title={errorTitle} label={errorDescription} icon="!" />
+    <BlankState title={errorTitle} label={errorDescription} icon="!">
+      <button class="button-small" on:click={copyErrorDescription}>
+        <Icon name={copySucceeded ? 'check' : 'clipboard'} /> Copy error message
+      </button>
+    </BlankState>
   {:else}
     <table>
       {#if showHeaders && columns.some(col => col.title)}

frontend/src/components/tabbar.svelte

@@ -61,7 +61,7 @@
   }
   li {
     display: inline-block;
-    flex-grow: 1;
+    flex: 1;
     position: relative;
   }
 
@@ -101,6 +101,7 @@
     border-color: #00008b;
     cursor: not-allowed;
   }
+
   nav.tabs.multiline button.tab .label {
     display: block;
     margin-top: 4px;