fix: Change scroll container for sharing details

In order to meet accessibility requirements we cannot use a sticky
footer that overlaps important interactable content. Therefore this
moves to a scroll container for the details which does not include the
action buttons at the bottom.

Larger indentation change in SharingDetailsTab was required to have a
wrapping container for the scroll area.

Signed-off-by: Julius Härtl <jus@bitgrid.net>

1 files changed, 9 insertions, 8 deletions

diff --git a/apps/files_sharing/src/views/SharingTab.vue b/apps/files_sharing/src/views/SharingTab.vue
index f37f2095a90..6ec8f25fcf6 100644
--- a/apps/files_sharing/src/views/SharingTab.vue
+++ b/apps/files_sharing/src/views/SharingTab.vue
@@ -21,7 +21,7 @@
   -->
 
 <template>
-	<div :class="{ 'icon-loading': loading }">
+	<div class="sharingTab" :class="{ 'icon-loading': loading }">
 		<!-- error message -->
 		<div v-if="error" class="emptycontent" :class="{ emptyContentWithSections: sections.length > 0 }">
 			<div class="icon icon-error" />
@@ -87,13 +87,11 @@
 		</template>
 
 		<!-- share details -->
-		<div v-else>
-			<SharingDetailsTab :file-info="shareDetailsData.fileInfo"
-				:share="shareDetailsData.share"
-				@close-sharing-details="toggleShareDetailsView"
-				@add:share="addShare"
-				@remove:share="removeShare" />
-		</div>
+		<SharingDetailsTab v-else :file-info="shareDetailsData.fileInfo"
+			:share="shareDetailsData.share"
+			@close-sharing-details="toggleShareDetailsView"
+			@add:share="addShare"
+			@remove:share="removeShare" />
 	</div>
 </template>
 
@@ -406,6 +404,9 @@ export default {
 }
 
 .sharingTab {
+	position: relative;
+	height: 100%;
+
 	&__content {
 		padding: 0 6px;
 	}