fix(FilePicker): Adjust stylings after migration to NcDialog

* The height must have a `!important` otherwise it will conflict with `NcDialog` dependening on loading order of styles
* The navigation needs some padding for the focus visible outline
* Make the view buttons streched so they have the same width

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

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;
 	}
 }
 

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;
 	}