web/satellite: fix pop up position on safari

This change fixes wrong positioning of pop ups (the bucket guide, and bucket item drop down) on Safari.

Change-Id: Ia0abcc1a1450cb21e38a435218fb6c788ce546e2

web/satellite/src/components/common/TableItem.vue

@@ -10,7 +10,10 @@
         <th v-if="selectable" class="icon select">
             <v-table-checkbox :disabled="selectDisabled" :value="selected" @checkChange="onChange" />
         </th>
-        <th v-for="(val, key, index) in item" :key="index" class="align-left data">
+        <th
+            v-for="(val, key, index) in item" :key="index" class="align-left data"
+            :class="{'guide-container': showBucketGuide(index)}"
+        >
             <BucketGuide v-if="showBucketGuide(index)" :hide-guide="hideGuide" />
             <div v-if="Array.isArray(val)" class="few-items">
                 <p v-for="str in val" :key="str" class="array-val">{{ str }}</p>
@@ -35,7 +38,7 @@ import BucketIcon from '@/../static/images/objects/bucketIcon.svg';
 
 // @vue/component
 @Component({
-    components: { 
+    components: {
         VTableCheckbox,
         BucketGuide,
         BucketIcon,
@@ -166,4 +169,9 @@ export default class TableItem extends Vue {
     .item-icon {
         margin-right: 12px;
     }
+
+    .guide-container {
+        position: relative;
+        overflow: visible;
+    }
 </style>

web/satellite/src/components/objects/BucketItem.vue

@@ -133,6 +133,7 @@ export default class BucketItem extends Resizable {
             padding: 0 10px;
             cursor: pointer;
             pointer-events: auto;
+            position: relative;
 
             &__dropdown {
                 position: absolute;