fix: icon overlap issue

Signed-off-by: Wing-Kam Wong <wingkwong.code@gmail.com>

packages/nc-gui/components/project/spreadsheet/components/editableCell/editableAttachmentCell.vue

@@ -18,7 +18,8 @@
     </div>
 
     <div class="d-flex align-center img-container">
-      <div
+      <div class="d-flex no-overflow">
+        <div
         v-for="(item,i) in (isPublicForm ? localFilesState : localState)"
         :key="item.url || item.title"
         class="thumbnail align-center justify-center d-flex"
@@ -60,8 +61,8 @@
           </template>
           <span>{{ item.title }}</span>
         </v-tooltip>
+        </div>
       </div>
-
       <div v-if="isForm || active && !isPublicGrid" class="add d-flex align-center justify-center px-1 nc-attachment-add" @click="addFile">
         <v-icon v-if="uploading" small color="primary" class="nc-attachment-add-spinner">
           mdi-loading mdi-spin
@@ -90,7 +91,6 @@
       </v-icon>
       <input ref="file" type="file" multiple class="d-none" @change="onFileSelection">
     </div>
-
     <v-dialog
       v-if="dialog"
       v-model="dialog"
@@ -405,6 +405,10 @@ export default {
   margin: 0 -2px;
 }
 
+.no-overflow {
+  overflow: hidden;
+}
+
 .add {
   transition: .2s background-color;
   /*background-color: #666666ee;*/
@@ -436,6 +440,7 @@ export default {
 }
 
 .expand-icon {
+  margin-left: 8px;
   border-radius: 2px;
   /*opacity: 0;*/
   transition: .3s background-color;
@@ -552,6 +557,7 @@ export default {
  *
  * @author Naveen MR <oof1lab@gmail.com>
  * @author Pranav C Balan <pranavxc@gmail.com>
+ * @author Wing-Kam Wong <wingkwong.code@gmail.com>
  *
  * @license GNU AGPL version 3 or any later version
  *