Merge pull request #7640 from owncloud/fix-private-link-alignment

Fix 'Private link'-button alignment
owncloud · Sep 14, 2022 · cd64b1b · cd64b1b
2 parents 43bcb09 + 86781c7
commit cd64b1b
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 24 deletions.
diff --git a/changelog/unreleased/bugfix-private-link-alignment b/changelog/unreleased/bugfix-private-link-alignment
@@ -0,0 +1,6 @@
+Bugfix: "Private link"-button alignment
+
+We've fixed the alignment of the "Private link"-button in the sidebar.
+
+https://github.com/owncloud/web/pull/7640
+https://github.com/owncloud/web/issues/7618
diff --git a/packages/web-app-files/src/components/SideBar/FileInfo.vue b/packages/web-app-files/src/components/SideBar/FileInfo.vue
@@ -1,23 +1,25 @@
 <template>
-  <div class="file_info">
-    <oc-resource-icon
-      v-if="isSubPanelActive"
-      :resource="file"
-      size="large"
-      class="file_info__icon"
-    />
-    <div class="file_info__body oc-text-overflow">
-      <h3 data-testid="files-info-name">
-        <oc-resource-name
-          :name="file.name"
-          :extension="file.extension"
-          :type="file.type"
-          :full-path="file.webDavPath"
-          :is-extension-displayed="areFileExtensionsShown"
-          :is-path-displayed="false"
-          :truncate-name="false"
-        />
-      </h3>
+  <div class="file_info oc-flex oc-flex-between">
+    <div class="oc-flex oc-flex-middle">
+      <oc-resource-icon
+        v-if="isSubPanelActive"
+        :resource="file"
+        size="large"
+        class="file_info__icon oc-mr-s"
+      />
+      <div class="file_info__body oc-text-overflow">
+        <h3 data-testid="files-info-name">
+          <oc-resource-name
+            :name="file.name"
+            :extension="file.extension"
+            :type="file.type"
+            :full-path="file.webDavPath"
+            :is-extension-displayed="areFileExtensionsShown"
+            :is-path-displayed="false"
+            :truncate-name="false"
+          />
+        </h3>
+      </div>
     </div>
     <private-link-item v-if="privateLinkEnabled" class="oc-ml-s" />
   </div>
@@ -100,11 +102,6 @@ export default {
 
 <style lang="scss">
 .file_info {
-  display: grid;
-  grid-template-columns: auto 1fr auto;
-  align-items: center;
-  grid-gap: 5px;
-
   button {
     white-space: nowrap;
   }