fix(popup-ui): align file/folder names horizontally

Resolved UI issue in Select file or folder to link to popup where
file/folder names appeared below icons. Updated styling so names are
suppressed horizontally for consistent layout.

Author: psawalka

css/layouts/guestview.scss

@@ -87,6 +87,7 @@
 
     .dialog__navigation.file-picker__navigation .file-picker__filter-input {
         max-width: 100%;
+        margin: 0;
     }
 
     button.action-item.files-list__row-action-sharing-popup {
@@ -219,4 +220,213 @@
     #request-password-button-not-talk {
         display: none;
     }
+}
+
+#body-public .modal-container {
+	.dialog__name {
+		font-size: 1.5rem;
+		height: unset;
+		line-height: 1.5rem;
+		margin-bottom: 1.5rem;
+		min-height: unset;
+		text-align: left;
+	}
+
+	.file-picker {
+		height: min(80vh, 800px) !important;
+
+		.dialog__wrapper {
+			margin-block: 0 1.5rem;
+    		padding-inline: 0;
+    		overflow: visible;
+			.dialog__content {
+				margin-top: 1rem;
+    			padding: 0;
+			}
+		}
+		&__navigation {
+			display: block;
+			padding: 0;
+			overflow: visible;
+			.input-field {
+				&__input {
+					padding-left: 2.5rem;
+				}
+				&__icon--leading {
+					bottom: 8px;
+				}
+			}
+		}
+		&__filter-input {
+    		margin-block: 7px;
+		}
+
+		&__main {
+			box-sizing: border-box;
+			width: 100%;
+			display: flex;
+			flex-direction: column;
+			min-height: 0;
+			flex: 1;
+			padding-inline: 2px;
+		}
+
+		&__breadcrumbs {
+			flex-grow: 0 !important;
+		}
+
+		&__files {
+			overflow: auto;
+			margin: 0;
+
+			table {
+				width: 100%;
+				max-height: 100%;
+				table-layout: fixed;
+			}
+
+			th:not(.row-size) .button-vue__wrapper {
+				flex-direction: row-reverse;
+			}
+			thead th {
+				background-color: var(--color-main-background);
+				border-bottom: 1px solid var(--color-border) !important;
+
+				position: sticky;
+				z-index: 1;
+				top: 0;
+				padding: 2px;
+
+				&.row-name {
+					width: 230px;
+				}
+
+				.header-wrapper {
+					display: flex;
+				}
+
+				.button-vue {
+					border: none;
+					margin: 0;
+					padding: 0;
+
+					cursor: pointer;
+
+					.button-vue__wrapper{
+						justify-content: start;
+						color: var(--color-text-maxcontrast);
+
+						display: inline-flex;
+						align-items: center;
+						width: 100%;
+					}
+
+					&__text {
+						margin-bottom: 1px;
+						padding: 2px 0;
+						white-space: nowrap;
+						text-overflow: ellipsis;
+						overflow: hidden;
+						font-weight: 400;
+					}
+
+					&__icon {
+						min-width: 20px;
+    					width: 20px;
+					}
+				}
+
+				.button-vue:hover:not(:disabled) {
+					background-color: unset;
+					border-color: unset;
+					color: unset;
+				}
+
+				&.row-size {
+					width: 100px;
+					.button-vue__wrapper {
+						justify-content: end !important;
+					}
+				}
+				&.row-modified {
+					width: 120px;
+					.button-vue__wrapper {
+						justify-content: end !important;
+						flex-direction: row;
+					}
+					span.button-vue__text {
+						padding-right: 8px;
+					}
+				}
+			}
+
+			tbody tr {
+				height: 60px;
+			}
+
+			tbody tr:not(.group-header):hover {
+				background-color: var(--color-background-hover);
+			}
+
+			td {
+				border-bottom: 1px solid var(--color-border) !important;
+    			cursor: pointer;
+				overflow: hidden;
+    			text-overflow: ellipsis;
+
+				&.row-name {
+					padding-inline: 2px 0;
+					padding: 0;
+
+					.file-picker__name-container {
+						cursor: pointer;
+    					display: flex;
+						justify-content: start;
+						align-items: center;
+						height: 100%;
+
+						div{
+							cursor: pointer;
+							min-height: 44px;
+							min-width: 44px;
+							line-height: 44px;
+
+							&.file-picker__file-name {
+								padding-left: .5rem;
+								overflow: hidden;
+								text-overflow: ellipsis;
+							}
+
+							svg {
+								color: var(--nmc-ods-blue-active);
+								height: 44px;
+								width: 44px;
+							}
+						}
+					}
+				}
+
+				&.row-size {
+					text-align: right;
+					padding-inline: 0 14px;
+				}
+
+				&.row-modified {
+					text-align: right;
+					padding-inline: 14px 0;
+
+					span {
+						cursor: pointer;
+    					padding-right: 8px;
+					}
+				}
+			}
+		}
+
+		&__header-preview {
+			width: 52px;
+			height: 32px;
+			flex: 0 0 auto;
+		}
+	}
 }