Merge pull request #1138 from nextcloud-libraries/fix/filepicker-design

nextcloud-libraries · Dec 8, 2023 · eb34267 · eb34267
2 parents 4b37723 + 95ea092
commit eb34267
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/lib/components/FilePicker/FilePicker.vue b/lib/components/FilePicker/FilePicker.vue
@@ -318,13 +318,13 @@ export default {
 
 :deep(.file-picker) {
 	// Dialog is max. 900px wide so the best looking height seems to be 800px
-	height: min(80vh, 800px);
+	height: min(80vh, 800px)!important;
 }
 
 @media (max-width: 512px) {
 	:deep(.file-picker) {
 		// below 512px the modal is fullscreen so we use 100% height - margin of heading (4px + 12px) - height of heading (default-clickable-area)
-		height: calc(100% - 16px - var(--default-clickable-area));
+		height: calc(100% - 16px - var(--default-clickable-area))!important;
 	}
 }
 

diff --git a/lib/components/FilePicker/FilePickerNavigation.vue b/lib/components/FilePicker/FilePickerNavigation.vue
@@ -96,11 +96,11 @@ const updateFilterValue = (value: string) => emit('update:filterString', value)
 	&__side {
 		display: flex;
 		flex-direction: column;
-		align-items: start;
+		align-items: stretch;
 		gap: 0.5rem;
 		min-width: 200px;
 		// ensure focus outline is visible
-		padding-block: 2px;
+		padding: 2px;
 		// make only the navigation scroll
 		overflow: auto;
 
@@ -144,7 +144,7 @@ const updateFilterValue = (value: string) => emit('update:filterString', value)
 <style lang="scss">
 /* Ensure focus outline is visible */
 .file-picker__navigation {
-	padding-inline: 2px;
+	padding-inline: 8px 2px;
 	&, * {
 		box-sizing: border-box;
 	}