From 09fe7502d486d069316b2013e53ff86ecf326666 Mon Sep 17 00:00:00 2001
From: Jannik Stehle <jannik.stehle@gmail.com>
Date: Wed, 25 May 2022 14:21:47 +0200
Subject: [PATCH] Prevent rename button from getting covered

---
 changelog/unreleased/bugfix-rename-button-visibility     | 6 ++++++
 .../src/components/FilesList/ResourceTable.vue           | 9 ++++++++-
 .../unit/components/__snapshots__/TrashBin.spec.js.snap  | 6 +++---
 .../shares/__snapshots__/SharedWithOthers.spec.js.snap   | 8 ++++----
 4 files changed, 21 insertions(+), 8 deletions(-)
 create mode 100644 changelog/unreleased/bugfix-rename-button-visibility

diff --git a/changelog/unreleased/bugfix-rename-button-visibility b/changelog/unreleased/bugfix-rename-button-visibility
new file mode 100644
index 00000000000..421693d8740
--- /dev/null
+++ b/changelog/unreleased/bugfix-rename-button-visibility
@@ -0,0 +1,6 @@
+Bugfix: Prevent rename button from getting covered
+
+We've fixed a bug where the rename button next to the file name would get covered if there is not enough space available.
+
+https://github.com/owncloud/web/pull/7061
+https://github.com/owncloud/web/issues/7007
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
index 053b5d4ad74..5a71a4326d8 100644
--- a/packages/web-app-files/src/components/FilesList/ResourceTable.vue
+++ b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
@@ -45,7 +45,10 @@
       />
     </template>
     <template #name="{ item }">
-      <div class="resource-table-resource-wrapper">
+      <div
+        class="resource-table-resource-wrapper"
+        :class="[{ 'resource-table-resource-wrapper-limit-max-width': hasRenameAction(item) }]"
+      >
         <oc-resource
           :key="`${item.path}-${resourceDomSelector(item)}-${item.thumbnail}`"
           :resource="item"
@@ -770,6 +773,10 @@ export default defineComponent({
 <style lang="scss">
 .resource-table {
   &-resource-wrapper {
+    &-limit-max-width {
+      max-width: 90%;
+    }
+
     &:hover > .resource-table-edit-name {
       svg {
         fill: var(--oc-color-text-default);
diff --git a/packages/web-app-files/tests/unit/components/__snapshots__/TrashBin.spec.js.snap b/packages/web-app-files/tests/unit/components/__snapshots__/TrashBin.spec.js.snap
index d10a0c99bd9..34201798900 100644
--- a/packages/web-app-files/tests/unit/components/__snapshots__/TrashBin.spec.js.snap
+++ b/packages/web-app-files/tests/unit/components/__snapshots__/TrashBin.spec.js.snap
@@ -17,7 +17,7 @@ exports[`Trashbin component when the view is not loading anymore when length of
     <tr tabindex="-1" data-item-id="file-id-1234" draggable="false" class="oc-tbody-tr oc-tbody-tr-file-id-1234">
       <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-table-data-cell oc-table-data-cell-select oc-pl-m "><span><input id="resource-table-select-file-id-1234" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l" value="[object Object]"> <label for="resource-table-select-file-id-1234" class="oc-invisible-sr oc-cursor-pointer">Select folder</label></span></td>
       <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-text-truncate oc-table-data-cell oc-table-data-cell-name">
-        <div class="resource-table-resource-wrapper">
+        <div class="resource-table-resource-wrapper resource-table-resource-wrapper-limit-max-width">
           <div class="oc-resource oc-text-overflow"><span><span class="oc-icon oc-icon-l oc-icon-passive oc-resource-icon oc-resource-icon-file"><!----></span></span>
             <div class="oc-resource-details oc-text-overflow"><span class="oc-text-overflow"><!----> <span data-test-resource-path="/file-path/1234" data-test-resource-name="file-path/file-name-1234" data-test-resource-type="folder" class="oc-resource-name"><span class="oc-text-truncate"><span class="oc-resource-basename">file-name-1234</span></span>
               <!----></span></span>
@@ -37,7 +37,7 @@ exports[`Trashbin component when the view is not loading anymore when length of
     <tr tabindex="-1" data-item-id="file-id-5896" draggable="false" class="oc-tbody-tr oc-tbody-tr-file-id-5896">
       <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-table-data-cell oc-table-data-cell-select oc-pl-m "><span><input id="resource-table-select-file-id-5896" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l" value="[object Object]"> <label for="resource-table-select-file-id-5896" class="oc-invisible-sr oc-cursor-pointer">Select folder</label></span></td>
       <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-text-truncate oc-table-data-cell oc-table-data-cell-name">
-        <div class="resource-table-resource-wrapper">
+        <div class="resource-table-resource-wrapper resource-table-resource-wrapper-limit-max-width">
           <div class="oc-resource oc-text-overflow"><span><span class="oc-icon oc-icon-l oc-icon-passive oc-resource-icon oc-resource-icon-file"><!----></span></span>
             <div class="oc-resource-details oc-text-overflow"><span class="oc-text-overflow"><!----> <span data-test-resource-path="/file-path/5896" data-test-resource-name="file-path/file-name-5896" data-test-resource-type="folder" class="oc-resource-name"><span class="oc-text-truncate"><span class="oc-resource-basename">file-name-5896</span></span>
               <!----></span></span>
@@ -57,7 +57,7 @@ exports[`Trashbin component when the view is not loading anymore when length of
     <tr tabindex="-1" data-item-id="file-id-9856" draggable="false" class="oc-tbody-tr oc-tbody-tr-file-id-9856">
       <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-shrink oc-table-data-cell oc-table-data-cell-select oc-pl-m "><span><input id="resource-table-select-file-id-9856" type="checkbox" name="checkbox" class="oc-checkbox oc-rounded oc-checkbox-l" value="[object Object]"> <label for="resource-table-select-file-id-9856" class="oc-invisible-sr oc-cursor-pointer">Select folder</label></span></td>
       <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-text-truncate oc-table-data-cell oc-table-data-cell-name">
-        <div class="resource-table-resource-wrapper">
+        <div class="resource-table-resource-wrapper resource-table-resource-wrapper-limit-max-width">
           <div class="oc-resource oc-text-overflow"><span><span class="oc-icon oc-icon-l oc-icon-passive oc-resource-icon oc-resource-icon-file"><!----></span></span>
             <div class="oc-resource-details oc-text-overflow"><span class="oc-text-overflow"><!----> <span data-test-resource-path="/file-path/9856" data-test-resource-name="file-path/file-name-9856" data-test-resource-type="folder" class="oc-resource-name"><span class="oc-text-truncate"><span class="oc-resource-basename">file-name-9856</span></span>
               <!----></span></span>
diff --git a/packages/web-app-files/tests/unit/views/shares/__snapshots__/SharedWithOthers.spec.js.snap b/packages/web-app-files/tests/unit/views/shares/__snapshots__/SharedWithOthers.spec.js.snap
index f8880ba0fbc..060618ebb0b 100644
--- a/packages/web-app-files/tests/unit/views/shares/__snapshots__/SharedWithOthers.spec.js.snap
+++ b/packages/web-app-files/tests/unit/views/shares/__snapshots__/SharedWithOthers.spec.js.snap
@@ -27,7 +27,7 @@ exports[`SharedWithOthers view when the wrapper is not loading anymore when leng
         <oc-checkbox-stub id="resource-table-select-38" value="" option="[object Object]" label="Select folder" hidelabel="true" size="large"></oc-checkbox-stub>
       </td>
       <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-text-truncate oc-table-data-cell oc-table-data-cell-name">
-        <div class="resource-table-resource-wrapper">
+        <div class="resource-table-resource-wrapper resource-table-resource-wrapper-limit-max-width">
           <oc-resource-stub folderlink="[object Object]" parentfolderlink="[object Object]" resource="[object Object]" parentfoldernamedefault="All files and folders" ispathdisplayed="true" isextensiondisplayed="true" isresourceclickable="true"></oc-resource-stub>
           <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="resource-table-edit-name"><span class="oc-icon oc-icon-s oc-icon-passive"><!----></span></oc-button-stub>
         </div>
@@ -50,7 +50,7 @@ exports[`SharedWithOthers view when the wrapper is not loading anymore when leng
         <oc-checkbox-stub id="resource-table-select-64" value="" option="[object Object]" label="Select folder" hidelabel="true" size="large"></oc-checkbox-stub>
       </td>
       <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-text-truncate oc-table-data-cell oc-table-data-cell-name">
-        <div class="resource-table-resource-wrapper">
+        <div class="resource-table-resource-wrapper resource-table-resource-wrapper-limit-max-width">
           <oc-resource-stub folderlink="[object Object]" parentfolderlink="[object Object]" resource="[object Object]" parentfoldernamedefault="All files and folders" ispathdisplayed="true" isextensiondisplayed="true" isresourceclickable="true"></oc-resource-stub>
           <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="resource-table-edit-name"><span class="oc-icon oc-icon-s oc-icon-passive"><!----></span></oc-button-stub>
         </div>
@@ -73,7 +73,7 @@ exports[`SharedWithOthers view when the wrapper is not loading anymore when leng
         <oc-checkbox-stub id="resource-table-select-39" value="" option="[object Object]" label="Select folder" hidelabel="true" size="large"></oc-checkbox-stub>
       </td>
       <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-text-truncate oc-table-data-cell oc-table-data-cell-name">
-        <div class="resource-table-resource-wrapper">
+        <div class="resource-table-resource-wrapper resource-table-resource-wrapper-limit-max-width">
           <oc-resource-stub folderlink="[object Object]" parentfolderlink="[object Object]" resource="[object Object]" parentfoldernamedefault="All files and folders" ispathdisplayed="true" isextensiondisplayed="true" isresourceclickable="true"></oc-resource-stub>
           <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="resource-table-edit-name"><span class="oc-icon oc-icon-s oc-icon-passive"><!----></span></oc-button-stub>
         </div>
@@ -96,7 +96,7 @@ exports[`SharedWithOthers view when the wrapper is not loading anymore when leng
         <oc-checkbox-stub id="resource-table-select-30" value="" option="[object Object]" label="Select file" hidelabel="true" size="large"></oc-checkbox-stub>
       </td>
       <td class="oc-td oc-table-cell oc-table-cell-align-left oc-table-cell-align-middle oc-table-cell-width-expand oc-text-truncate oc-table-data-cell oc-table-data-cell-name">
-        <div class="resource-table-resource-wrapper">
+        <div class="resource-table-resource-wrapper resource-table-resource-wrapper-limit-max-width">
           <oc-resource-stub folderlink="[object Object]" parentfolderlink="[object Object]" resource="[object Object]" parentfoldernamedefault="All files and folders" ispathdisplayed="true" isextensiondisplayed="true" isresourceclickable="true"></oc-resource-stub>
           <oc-button-stub type="button" size="medium" submit="button" variation="passive" appearance="raw" justifycontent="center" gapsize="medium" class="resource-table-edit-name"><span class="oc-icon oc-icon-s oc-icon-passive"><!----></span></oc-button-stub>
         </div>