fix(mobile): compact FormGenerator header on connector page
All checks were successful
Deploy Nyla Frontend to Integration / deploy (push) Successful in 1m34s

Reduce page padding, hide subtitle and filters on mobile, keep pagination horizontal. Prevents controls from consuming all viewport height on small screens.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
ValueOn AG 2026-06-07 08:04:03 +02:00
parent 7a914ce2d9
commit 49c3cf7290
2 changed files with 71 additions and 17 deletions

View file

@ -313,13 +313,19 @@
align-items: center;
gap: 6px;
padding: 6px 8px;
max-height: 80px;
overflow: hidden;
flex-shrink: 0;
}
.searchContainer {
flex: 0 1 auto;
min-width: 120px;
max-width: 200px;
}
.filtersContainer {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 6px;
display: none;
}
.filterGroup {
@ -344,6 +350,10 @@
.filterGroup .floatingLabelInput {
width: 100%;
}
.csvExportButton {
display: none;
}
}
/* Pagination Controls */
@ -499,32 +509,36 @@
/* Responsive Design for Pagination */
@media (max-width: 768px) {
.paginationControls {
flex-direction: column;
align-items: stretch;
gap: 10px;
margin-left: 0;
width: 100%;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-left: auto;
}
.pageSizeSelector {
order: -1;
justify-content: center;
display: none;
}
.paginationInfo {
text-align: center;
font-size: 13px;
font-size: 11px;
}
.pageNumbers {
max-width: 100%;
max-width: 60vw;
justify-content: center;
}
.pageNumber {
min-width: 24px;
height: 24px;
font-size: 11px;
min-width: 22px;
height: 22px;
font-size: 10px;
}
.paginationButton {
width: 26px;
height: 26px;
font-size: 13px;
}
}

View file

@ -750,6 +750,46 @@
}
}
@media (max-width: 768px) {
.adminPage {
padding: 0.75rem;
}
.pageHeader {
flex-direction: row;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
.pageTitle {
font-size: 1.1rem;
}
.pageSubtitle {
display: none;
}
.headerActions {
gap: 0.4rem;
margin-left: auto;
}
.primaryButton,
.secondaryButton,
.dangerButton {
font-size: 0.75rem;
padding: 0.4rem 0.6rem;
min-height: 32px;
gap: 0.3rem;
}
.tableContainer {
min-height: 0;
}
}
/* ============================================== */
/* Role Permissions Page Styles */
/* ============================================== */