pporto/opportunities-extension
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 10 Wiki Activity

Minor layout responsiveness adjustments

Browse Source
This commit is contained in:
Paulo Porto
2026-09-23 23:54:22 -03:00
parent b92d75f558
commit b8c493fc20
10 changed files with 216 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
src/features/opportunities/styles.css
View File

@@ -1,3 +1,112 @@
/* Compact filters use available CSS width, including Windows display scaling. */
.opportunities-extension-form {
display: grid;
grid-template-columns: max-content minmax(110px, 1fr) minmax(110px, 1fr) minmax(145px, 180px) max-content max-content;
align-items: end;
gap: 12px;
min-height: 0;
padding: 12px;
}
.opportunities-extension-form > * {
min-width: 0;
width: 100%;
max-width: none;
grid-template-rows: auto 32px;
gap: 4px;
font-size: 12px;
}
.opportunities-extension-form > * > span:first-child {
font-size: 12px;
line-height: 16px;
}
.opportunities-extension-form .opportunities-extension-select-wrap {
width: 100%;
}
.opportunities-extension-form .opportunities-extension-field select,
.opportunities-extension-form .opportunities-extension-customer-filter-trigger,
.opportunities-extension-form .opportunities-extension-table-search-field input {
box-sizing: border-box;
width: 100%;
min-width: 0;
height: 32px;
min-height: 32px;
padding: 4px 8px;
font-size: 12px;
line-height: 20px;
}
.opportunities-extension-form .opportunities-extension-field select,
.opportunities-extension-form .opportunities-extension-customer-filter-trigger {
padding-right: 26px;
}
.opportunities-extension-form .opportunities-extension-select-wrap::after,
.opportunities-extension-form .opportunities-extension-customer-filter-trigger::after {
right: 10px;
border-left-width: 4px;
border-right-width: 4px;
border-top-width: 5px;
}
.opportunities-extension-form .opportunities-extension-stage-filter-controls,
.opportunities-extension-form .opportunities-extension-status-filter-controls {
flex-wrap: nowrap;
gap: 4px;
}
.opportunities-extension-form .opportunities-extension-stage-filter-button,
.opportunities-extension-form .opportunities-extension-status-filter-button {
min-height: 28px;
padding: 4px 7px;
font-size: 11px;
line-height: 18px;
white-space: nowrap;
}
/* Native select intrinsic sizing includes its longest option, not just the selection. */
@media (min-width: 1151px) {
.opportunities-extension-form > .opportunities-extension-field,
.opportunities-extension-form .opportunities-extension-select-wrap,
.opportunities-extension-form .opportunities-extension-field select {
width: max-content;
max-width: none;
}
}
@media (max-width: 1150px) {
.opportunities-extension-form {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.opportunities-extension-form > .opportunities-extension-status-filter,
.opportunities-extension-form > .opportunities-extension-stage-filter {
grid-column: span 2;
}
}
@media (max-width: 700px) {
.opportunities-extension-form {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.opportunities-extension-form .opportunities-extension-stage-filter-controls,
.opportunities-extension-form .opportunities-extension-status-filter-controls {
flex-wrap: wrap;
}
.opportunities-extension-form > .opportunities-extension-status-filter,
.opportunities-extension-form > .opportunities-extension-stage-filter {
grid-template-rows: auto auto;
}
}
@media (max-width: 420px) {
.opportunities-extension-form { grid-template-columns: minmax(0, 1fr); }
.opportunities-extension-form > .opportunities-extension-status-filter,
.opportunities-extension-form > .opportunities-extension-stage-filter { grid-column: auto; }
}
/* Keep layout rules on the outer table, never on expanded product tables. */
.opportunities-extension-table[data-opportunities-layout="inline-actions"] {
width: 100%;