From 082687ddd549c5752eff9953b9abefb1634f7ed6 Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Mon, 10 Aug 2026 15:35:35 +0200
Subject: [PATCH] fix: position versions loading spinner without shifting the
 details layout

---
 .../SideBar/Details/FileDetails.vue           | 185 +++++++++---------
 1 file changed, 95 insertions(+), 90 deletions(-)

diff --git a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
index dbf86b71fe8..37068780bb6 100644
--- a/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
+++ b/packages/web-app-files/src/components/SideBar/Details/FileDetails.vue
@@ -30,97 +30,102 @@
         <oc-status-indicators :resource="resource" :indicators="shareIndicators" />
         <p class="my-0 mx-2" v-text="detailSharingInformation" />
       </div>
-      <div class="flex justify-end min-h-5">
-        <oc-spinner
-          v-if="versionsLoading"
-          v-oc-tooltip="$gettext('Loading version information')"
-          size="small"
-          :aria-label="$gettext('Loading version information')"
-        />
-        <oc-icon
-          v-else-if="versionsError"
-          v-oc-tooltip="$gettext('Version information could not be loaded')"
-          name="error-warning"
-          fill-type="line"
-          size="small"
-          class="text-role-error"
-        />
+      <div class="relative">
+        <div
+          v-if="versionsLoading || versionsError"
+          class="absolute top-0 right-0 z-20 flex items-center"
+        >
+          <oc-spinner
+            v-if="versionsLoading"
+            v-oc-tooltip="$gettext('Loading version information')"
+            size="small"
+            :aria-label="$gettext('Loading version information')"
+          />
+          <oc-icon
+            v-else
+            v-oc-tooltip="$gettext('Version information could not be loaded')"
+            name="error-warning"
+            fill-type="line"
+            size="small"
+            class="text-role-error"
+          />
+        </div>
+        <dl
+          class="details-list"
+          :aria-label="$gettext('Overview of the information about the selected file')"
+        >
+          <template v-if="hasDeletionDate">
+            <dt>{{ $gettext('Deleted at') }}</dt>
+            <dd data-testid="delete-timestamp">{{ capitalizedTimestamp }}</dd>
+          </template>
+          <template v-if="hasTimestamp">
+            <dt>{{ $gettext('Last modified') }}</dt>
+            <dd data-testid="timestamp">
+              <oc-button
+                v-if="showVersions"
+                v-oc-tooltip="seeVersionsLabel"
+                appearance="raw"
+                :aria-label="seeVersionsLabel"
+                no-hover
+                @click="openSideBarPanel('versions')"
+              >
+                {{ capitalizedTimestamp }}
+              </oc-button>
+              <span v-else v-text="capitalizedTimestamp" />
+            </dd>
+          </template>
+          <template v-if="resource.locked">
+            <dt>{{ $gettext('Locked via') }}</dt>
+            <dd data-testid="locked-by">
+              <span>{{ resource.lockOwner }}</span>
+              <span v-if="resource.lockTime">({{ formatDateRelative(resource.lockTime) }})</span>
+            </dd>
+          </template>
+          <template v-if="showSharedVia">
+            <dt>{{ $gettext('Shared via') }}</dt>
+            <dd data-testid="shared-via">
+              <router-link :to="sharedAncestorRoute">
+                <span v-oc-tooltip="sharedViaTooltip" v-text="sharedAncestor.path" />
+              </router-link>
+            </dd>
+          </template>
+          <template v-if="showSharedBy">
+            <dt>{{ $gettext('Shared by') }}</dt>
+            <dd data-testid="shared-by">{{ sharedByDisplayNames }}</dd>
+          </template>
+          <template v-if="ownerDisplayName && ownerDisplayName !== sharedByDisplayNames">
+            <dt>{{ $gettext('Owner') }}</dt>
+            <dd data-testid="ownerDisplayName">
+              <p class="m-0">
+                {{ ownerDisplayName }}
+                <span v-if="ownedByCurrentUser" v-text="$gettext('(me)')" />
+              </p>
+            </dd>
+          </template>
+          <template v-if="showSize">
+            <dt>{{ $gettext('Size') }}</dt>
+            <dd data-testid="sizeInfo">{{ resourceSize }}</dd>
+          </template>
+          <web-dav-details v-if="showWebDavDetails" :space="space" />
+          <template v-if="versionsRowVisible">
+            <dt>{{ $gettext('Version') }}</dt>
+            <dd data-testid="versionsInfo">
+              <span v-if="versionsPlaceholder" aria-hidden="true">&nbsp;</span>
+              <oc-button
+                v-else
+                v-oc-tooltip="seeVersionsLabel"
+                appearance="raw"
+                :aria-label="seeVersionsLabel"
+                no-hover
+                @click="openSideBarPanel('versions')"
+              >
+                {{ versions.length }}
+              </oc-button>
+            </dd>
+          </template>
+          <custom-component-target :extension-point="fileSideBarFileDetailsTableExtensionPoint" />
+        </dl>
       </div>
-      <dl
-        class="details-list"
-        :aria-label="$gettext('Overview of the information about the selected file')"
-      >
-        <template v-if="hasDeletionDate">
-          <dt>{{ $gettext('Deleted at') }}</dt>
-          <dd data-testid="delete-timestamp">{{ capitalizedTimestamp }}</dd>
-        </template>
-        <template v-if="hasTimestamp">
-          <dt>{{ $gettext('Last modified') }}</dt>
-          <dd data-testid="timestamp">
-            <oc-button
-              v-if="showVersions"
-              v-oc-tooltip="seeVersionsLabel"
-              appearance="raw"
-              :aria-label="seeVersionsLabel"
-              no-hover
-              @click="openSideBarPanel('versions')"
-            >
-              {{ capitalizedTimestamp }}
-            </oc-button>
-            <span v-else v-text="capitalizedTimestamp" />
-          </dd>
-        </template>
-        <template v-if="resource.locked">
-          <dt>{{ $gettext('Locked via') }}</dt>
-          <dd data-testid="locked-by">
-            <span>{{ resource.lockOwner }}</span>
-            <span v-if="resource.lockTime">({{ formatDateRelative(resource.lockTime) }})</span>
-          </dd>
-        </template>
-        <template v-if="showSharedVia">
-          <dt>{{ $gettext('Shared via') }}</dt>
-          <dd data-testid="shared-via">
-            <router-link :to="sharedAncestorRoute">
-              <span v-oc-tooltip="sharedViaTooltip" v-text="sharedAncestor.path" />
-            </router-link>
-          </dd>
-        </template>
-        <template v-if="showSharedBy">
-          <dt>{{ $gettext('Shared by') }}</dt>
-          <dd data-testid="shared-by">{{ sharedByDisplayNames }}</dd>
-        </template>
-        <template v-if="ownerDisplayName && ownerDisplayName !== sharedByDisplayNames">
-          <dt>{{ $gettext('Owner') }}</dt>
-          <dd data-testid="ownerDisplayName">
-            <p class="m-0">
-              {{ ownerDisplayName }}
-              <span v-if="ownedByCurrentUser" v-text="$gettext('(me)')" />
-            </p>
-          </dd>
-        </template>
-        <template v-if="showSize">
-          <dt>{{ $gettext('Size') }}</dt>
-          <dd data-testid="sizeInfo">{{ resourceSize }}</dd>
-        </template>
-        <web-dav-details v-if="showWebDavDetails" :space="space" />
-        <template v-if="versionsRowVisible">
-          <dt>{{ $gettext('Version') }}</dt>
-          <dd data-testid="versionsInfo">
-            <span v-if="versionsPlaceholder" aria-hidden="true">&nbsp;</span>
-            <oc-button
-              v-else
-              v-oc-tooltip="seeVersionsLabel"
-              appearance="raw"
-              :aria-label="seeVersionsLabel"
-              no-hover
-              @click="openSideBarPanel('versions')"
-            >
-              {{ versions.length }}
-            </oc-button>
-          </dd>
-        </template>
-        <custom-component-target :extension-point="fileSideBarFileDetailsTableExtensionPoint" />
-      </dl>
       <div v-if="hasTags" class="mt-2">
         <div class="inline-flex items-center text-sm mb-0.5">
           {{ $gettext('Tags') }}