diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
index d2f4aebf5..8b3df0e3a 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
@@ -170,10 +170,34 @@
min-width: 150px;
background: $grey-2;
border-right: 1px solid $separator;
+
+ &:not(.collapsed) redaction-circle-button {
+ margin-right: -8px;
+ }
+
+ &.collapsed {
+ width: 50px;
+ min-width: 50px;
+
+ > .csv-part-header {
+ height: 100%;
+ border-bottom: none;
+ align-items: center;
+ flex-direction: column-reverse;
+ justify-content: flex-end;
+ padding-top: 8px;
+
+ > .all-caps-label {
+ transform: rotate(90deg) translateX(50%);
+ white-space: nowrap;
+ margin-top: 10px;
+ }
+ }
+ }
}
> .content-container {
- width: calc(100% - 527px);
+ width: 100%;
redaction-table-col-name::ng-deep {
> div {
@@ -211,7 +235,7 @@
height: calc(100% - 80px);
::ng-deep.cdk-virtual-scroll-content-wrapper {
- grid-template-columns: auto 2fr 150px auto auto auto 11px;
+ grid-template-columns: 30px minmax(0, 20vw) 150px auto auto auto 11px;
.table-item {
> div {
@@ -253,7 +277,7 @@
&.has-scrollbar:hover {
::ng-deep.cdk-virtual-scroll-content-wrapper {
- grid-template-columns: auto 2fr 150px auto auto auto;
+ grid-template-columns: 30px minmax(0, 20vw) 150px auto auto auto;
}
}
}
diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
index c7b5b6ac4..ae71e6f5e 100644
--- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
+++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.ts
@@ -39,6 +39,7 @@ export class FileAttributesCsvImportDialogComponent implements OnInit {
public isSearchOpen = false;
public searchForm: FormGroup;
public filteredFields: Field[];
+ public previewExpanded = true;
@ViewChild(CdkVirtualScrollViewport, { static: false }) cdkVirtualScrollViewport: CdkVirtualScrollViewport;
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index ad62b56a7..b38d12861 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -1159,6 +1159,7 @@
"available": "{{value}} available",
"selected": "{{value}} selected",
"csv-column": "CSV Column",
+ "csv-column-preview": "CSV Column Preview",
"no-hovered-column": "Preview CSV column by hovering the entry.",
"search": {
"placeholder": "Search by column name..."