From 6367842e1e8ef5990e701aa3ae6dabee252567c2 Mon Sep 17 00:00:00 2001
From: artoscinote <85488244+artoscinote@users.noreply.github.com>
Date: Wed, 20 Jul 2022 12:07:25 +0200
Subject: [PATCH] Step table CSS fixes [SCI-6998] (#4270)

---
 .../stylesheets/steps/components/table.scss       | 15 +++++++++++++++
 .../vue/protocol/step_elements/table.vue          |  4 +++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/steps/components/table.scss b/app/assets/stylesheets/steps/components/table.scss
index da25437bc..0404aa6a0 100644
--- a/app/assets/stylesheets/steps/components/table.scss
+++ b/app/assets/stylesheets/steps/components/table.scss
@@ -3,6 +3,7 @@
 
   .step-table {
     border: $border-transparent;
+    border-radius: 4px;
     margin-left: var(--left-component-padding);
     padding: 4px;
     position: relative;
@@ -20,6 +21,19 @@
       z-index: 200;
     }
 
+    .enable-edit-mode__icon {
+      background: linear-gradient(
+          90deg,
+          transparent 0%,
+          $color-concrete 25%,
+          $color-concrete 100%
+        );
+      padding: 4px 8px;
+      position: absolute;
+      right: 0;
+      top: 0;
+    }
+
     .edit-message {
       @include font-small;
       color: $color-silver-chalice;
@@ -43,6 +57,7 @@
 
     &.edit {
       border: $border-default;
+      border-radius: 4px;
     }
   }
 
diff --git a/app/javascript/vue/protocol/step_elements/table.vue b/app/javascript/vue/protocol/step_elements/table.vue
index 2fdc35f5e..91488bb27 100644
--- a/app/javascript/vue/protocol/step_elements/table.vue
+++ b/app/javascript/vue/protocol/step_elements/table.vue
@@ -33,7 +33,9 @@
     </div>
     <div :class="'step-table ' + (editingTable ? 'edit' : 'view')" tabindex="0" @keyup.enter="!editingTable && enableTableEdit()">
       <div  class="enable-edit-mode" v-if="!editingTable && element.attributes.orderable.urls.update_url" @click="enableTableEdit">
-        <i class="fas fa-pen"></i>
+        <div class="enable-edit-mode__icon">
+          <i class="fas fa-pen"></i>
+        </div>
       </div>
       <div ref="hotTable" class="hot-table-container">
       </div>