fix(mobile): compact FormGenerator header on connector page
All checks were successful
Deploy Nyla Frontend to Integration / deploy (push) Successful in 1m34s
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:
parent
7a914ce2d9
commit
49c3cf7290
2 changed files with 71 additions and 17 deletions
|
|
@ -313,13 +313,19 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 6px;
|
gap: 6px;
|
||||||
padding: 6px 8px;
|
padding: 6px 8px;
|
||||||
|
max-height: 80px;
|
||||||
|
overflow: hidden;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchContainer {
|
||||||
|
flex: 0 1 auto;
|
||||||
|
min-width: 120px;
|
||||||
|
max-width: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.filtersContainer {
|
.filtersContainer {
|
||||||
flex-direction: row;
|
display: none;
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.filterGroup {
|
.filterGroup {
|
||||||
|
|
@ -344,6 +350,10 @@
|
||||||
.filterGroup .floatingLabelInput {
|
.filterGroup .floatingLabelInput {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.csvExportButton {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Pagination Controls */
|
/* Pagination Controls */
|
||||||
|
|
@ -499,32 +509,36 @@
|
||||||
/* Responsive Design for Pagination */
|
/* Responsive Design for Pagination */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
.paginationControls {
|
.paginationControls {
|
||||||
flex-direction: column;
|
flex-direction: row;
|
||||||
align-items: stretch;
|
flex-wrap: wrap;
|
||||||
gap: 10px;
|
align-items: center;
|
||||||
margin-left: 0;
|
gap: 6px;
|
||||||
width: 100%;
|
margin-left: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pageSizeSelector {
|
.pageSizeSelector {
|
||||||
order: -1;
|
display: none;
|
||||||
justify-content: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.paginationInfo {
|
.paginationInfo {
|
||||||
text-align: center;
|
font-size: 11px;
|
||||||
font-size: 13px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pageNumbers {
|
.pageNumbers {
|
||||||
max-width: 100%;
|
max-width: 60vw;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pageNumber {
|
.pageNumber {
|
||||||
min-width: 24px;
|
min-width: 22px;
|
||||||
height: 24px;
|
height: 22px;
|
||||||
font-size: 11px;
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.paginationButton {
|
||||||
|
width: 26px;
|
||||||
|
height: 26px;
|
||||||
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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 */
|
/* Role Permissions Page Styles */
|
||||||
/* ============================================== */
|
/* ============================================== */
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue