Tkl/dev/layout

css/_layout.css

@@ -0,0 +1,15 @@
+#body-user {
+	div.files-list {
+		--row-height: 55px;
+
+		@media only screen and (max-width: 1023px) {
+			--row-height: 65px;
+		}
+	}
+}
+
+#content-vue {
+	margin: 0;
+	width: 100%;
+	border-radius: 0;
+}

css/buttons.css

@@ -159,7 +159,7 @@
 			}
 
 			/* mobile and tablet */
-			@media only screen and (max-width: 1199px) {
+			@media only screen and (max-width: 1023px) {
 				min-height: 48px;
 			}
 		}
@@ -212,7 +212,7 @@
 			}
 
 			/* mobile and tablet */
-			@media only screen and (max-width: 1199px) {
+			@media only screen and (max-width: 1023px) {
 				min-height: 48px;
 			}
 		}
@@ -234,22 +234,34 @@
 					}
 				}
 
-				&:hover:not(:disabled):not(.button-vue--disabled):not(&.modal-container__close):not(.icon-collapse) {
+				&:hover:not(:disabled):not(.button-vue--disabled):not(&.modal-container__close):not(.icon-collapse):not(.files-list__header-grid-button) {
 					background-color: var(--ion-button--icon-only-background-hover);
 
 					.button-vue__icon span[role=img]>svg {
 						color: var(--ion-button--icon-only-text-hover);
 					}
 				}
 
-				&:active:not(:disabled):not(.button-vue--disabled):not(&.modal-container__close):not(.icon-collapse) {
+				&:active:not(:disabled):not(.button-vue--disabled):not(&.modal-container__close):not(.icon-collapse):not(.files-list__header-grid-button) {
 					background-color: var(--ion-button--icon-only-background-active);
 
 					.button-vue__icon span[role=img]>svg {
 						color: var(--ion-button--icon-only-text-hover);
 					}
 				}
 
+				&.files-list__header-grid-button {
+					&:hover {
+						.button-vue__icon span[role=img]>svg {
+							color: var(--ion-color-blue-b5);
+						}
+					}
+					&:active {
+						.button-vue__icon span[role=img]>svg {
+							color: var(--ion-color-typo-mild);
+						}
+					}
+				}
 				&.modal-container__close {
 					margin: 4px;
 					.button-vue__icon span[role=img]>svg {
@@ -327,6 +339,10 @@
 					}
 				}
 			}
+
+			&.files-list__row-size span.button-vue__wrapper {
+				flex-direction: row-reverse;
+			}
 		}
 	}
 

css/files.css

@@ -22,7 +22,52 @@
 	}
 	.files-list__thead, .files-list__thead-overlay {
 		top: 0;
+		.files-list__row-head .files-list__column--sortable .button-vue__text {
+			@media only screen and (max-width: 1023px) {
+				font-size: 16px;
+			}
+		}
+	}
+
+	.files-list__header {
+		margin-top: 20px;
+		margin-right: 16px;
+		margin-bottom: 14px;
+		@media only screen and (max-width: 1023px) {
+			margin-top: 15px;
+		}
+	}
+
+	thead.files-list__thead tr,
+	tbody.files-list__tbody.files-list__tbody--list tr,
+	tfoot.files-list__tfoot tr {
+		padding-right: 44px;
+		padding-left: 4px;
+	}
+
+	.files-list__header-grid-button {
+		position: absolute;
+		top: 88px;
+		right: 20px;
+		z-index: 33;
 	}
+
+	.files-list__refresh-icon {
+		position: absolute;
+		right: 50%;
+	}
+
+	.breadcrumb nav {
+		flex-grow: 1;
+	}
+
+	.files-list__column-sort-button-icon {
+		svg {
+			width: 18px;
+			height: 18px;
+		}
+	}
+
 	div.files-list__header:has(div.files-list__breadcrumbs), .file-picker {
 		div.files-list__breadcrumbs, .file-picker__breadcrumbs {
 			ul.breadcrumb__crumbs {
@@ -81,6 +126,27 @@
 				}
 			}
 		}
+
+		@media only screen and (max-width: 767px) {
+			margin-inline: 0;
+
+			div.breadcrumb {
+				flex-direction: column-reverse;
+				align-items: flex-start;
+
+				nav {
+					margin-left: 8px;
+				}
+
+				div.breadcrumb__actions {
+					align-self: flex-end;
+
+					&:has(div.v-popper) {
+						position: sticky;
+					}
+				}
+			}
+		}
 	}
 
 	div[data-cy-files-list].files-list {
@@ -112,6 +178,19 @@
 		}
 	}
 
+	tfoot.files-list__tfoot tr td.files-list__column.files-list__row-size,
+	td[data-cy-files-list-row-size].files-list__row-size {
+		justify-content: normal;
+		padding-left: 12px;
+		@media only screen and (max-width: 1199px) {
+			padding-left: 23px;
+		}
+	}
+
+	tbody.files-list__tbody--grid .files-list__row-icon {
+		transform: scale(.7);
+	}
+
 	/* Context Menu */
 	div.v-popper--theme-dropdown.v-popper__popper:has(.v-popper__wrapper) {
 		border-radius: 16px;

css/navigation.css

@@ -7,6 +7,11 @@
 	.app-navigation__search {
 		display: none;
 	}
+
+	.app-navigation-list {
+		padding: 20px;
+	}
+
 	div[data-cy-files-navigation].app-navigation:has(nav#app-navigation-vue) {
 		background-color: var(--ion-surface-secondary);
 		.app-navigation-entry {
@@ -52,8 +57,11 @@
 
 		/* Navigation Toggle Button */
 		div.app-navigation-toggle-wrapper button {
-			margin: 6px 0;
+			margin: 18px 0;
 			background-color: var(--ion-button-sidebar-background);
+			@media only screen and (max-width: 1023px) {
+				margin: 12px 0;
+			}
 			span[role=img]>svg {
 				color: var(--ion-button-sidebar--icon-only-text);
 			}