design.estate/dees-catalog
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(styles): update searchGrid layout for improved responsiveness and control width

Browse Source
This commit is contained in:
Jürgen Kunz
2025-09-16 15:25:04 +00:00
parent 6427510c98
commit e32b9589a5
1 changed files with 12 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
ts_web/elements/dees-table/styles.ts
View File

@@ -93,13 +93,24 @@ export const tableStyles: CSSResult[] = [
.searchGrid { .searchGrid {
display: grid; display: grid;
grid-gap: 16px; grid-gap: 16px;
grid-template-columns: 1fr 200px; grid-template-columns: 1fr minmax(280px, 420px);
padding: 16px 24px; padding: 16px 24px;
background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(0 0% 3.9%)')}; background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(0 0% 3.9%)')};
border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')}; border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
transition: all 0.2s ease; transition: all 0.2s ease;
} }
@media (max-width: 900px) {
.searchGrid {
grid-template-columns: 1fr;
}
}
/* ensure the control fills its column */
.searchGrid dees-input-multitoggle {
width: 100%;
}
.searchGrid.hidden { .searchGrid.hidden {
height: 0px; height: 0px;
opacity: 0; opacity: 0;