feat: enhance non-responsive content styles in default-base.css

- Reintroduced the .content--non-responsive class to maintain a minimum width for complex page templates.
- Updated styles for definition lists to ensure proper layout and responsiveness.
- Added specific input field max-widths to improve usability in non-responsive contexts.

This change aims to ensure that non-responsive layouts are styled correctly while maintaining usability across various input types. No further changes are pending for this task.
This commit is contained in:
Zack Spear
2025-07-02 13:51:41 -07:00
parent ab0475cdc1
commit 39814d439f

View File

@@ -1312,11 +1312,6 @@ a.list {
}
}
/* Necessary evil to prevent rewrites of complex page templates for responsive layout - i.e. VMedit.php */
.content--non-responsive {
min-width: 1200px;
}
.tabs {
display: flex;
align-items: center;
@@ -1576,6 +1571,49 @@ dd {
}
}
/* Necessary evil to prevent rewrites of complex page templates for responsive layout - i.e. VMedit.php */
.content--non-responsive {
min-width: 1200px;
/* override the dl > dt + dd responsive styles, inheriting the "desktop" styles defined below */
dl {
grid-template-columns: 35% 1fr;
gap: 1.5rem 2rem;
}
dt {
text-align: right;
}
dd {
display: flex;
flex-direction: column;
gap: 0.5rem;
/* white-space: nowrap; */
input[type="text"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="email"],
input[type="date"],
input[type="file"],
input:not([type="submit"]),
input:not([type="button"]),
input:not([type="checkbox"]),
input:not([type="radio"]),
input:not([class*="narrow"]),
textarea,
.textarea,
select,
.ui-dropdownchecklist-selector-wrapper {
max-width: 400px;
}
.narrow {
max-width: 150px !important;
}
}
}
/* Responsive styles for definition lists */
@media (min-width: 769px) {
dl {