Merge pull request #936 from nextcloud-libraries/backport/4d97c0a079a…

…6058f544a74264394b55ebcd2e718
nextcloud-libraries · Aug 24, 2023 · 8dc9e0c · 8dc9e0c
2 parents a107996 + fa4dfe6
commit 8dc9e0c
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 3 deletions.
diff --git a/lib/components/FilePicker/FileList.vue b/lib/components/FilePicker/FileList.vue
@@ -172,6 +172,8 @@ function onChangeDirectory(dir: Node) {
 <style scoped lang="scss">
 .file-picker {
 	&__files {
+		// ensure focus outlines are visible
+		padding: 2px;
 		padding-inline-start: 12px; // align with bread crumbs
 		min-height: calc(5 * var(--row-height, 50px)); // make file list not jumping when loading (1x header 4x loading placeholders)
 		overflow: scroll auto;
@@ -185,6 +187,8 @@ function onChangeDirectory(dir: Node) {
 			position: sticky;
 			top: 0;
 			background-color: var(--color-main-background);
+			// ensure focus outline of buttons is visible
+			padding: 2px;
 
 			&.row-checkbox {
 				width: 44px;

diff --git a/lib/components/FilePicker/FilePicker.vue b/lib/components/FilePicker/FilePicker.vue
@@ -269,12 +269,17 @@ export default {
 	}
 
 	&__main {
+		box-sizing: border-box;
 		width: 100%;
 		display: flex;
 		flex-direction: column;
 		// Auto fit height
 		min-height: 0;
 		flex: 1;
+
+		* {
+			box-sizing: border-box;
+		}
 	}
 }
 

diff --git a/lib/components/FilePicker/FilePickerNavigation.vue b/lib/components/FilePicker/FilePickerNavigation.vue
@@ -99,6 +99,8 @@ const updateFilterValue = (value: string) => emit('update:filterString', value)
 		align-items: start;
 		gap: 0.5rem;
 		min-width: 200px;
+		// ensure focus outline is visible
+		padding-block: 2px;
 
 		:deep(.button-vue__wrapper) {
 			justify-content: start;
@@ -137,9 +139,17 @@ const updateFilterValue = (value: string) => emit('update:filterString', value)
 }
 </style>
 
-<style>
-.file-picker__navigation .v-select.select {
-	min-width: 220px;
+<style lang="scss">
+/* Ensure focus outline is visible */
+.file-picker__navigation {
+	padding-inline: 2px;
+	&, * {
+		box-sizing: border-box;
+	}
+
+	.v-select.select {
+		min-width: 220px;
+	}
 }
 
 @media (min-width: 513px) and (max-width: 736px) {