diff --git a/ts_web/elements/dees-table/styles.ts b/ts_web/elements/dees-table/styles.ts index 87aa229..b167676 100644 --- a/ts_web/elements/dees-table/styles.ts +++ b/ts_web/elements/dees-table/styles.ts @@ -93,13 +93,24 @@ export const tableStyles: CSSResult[] = [ .searchGrid { display: grid; grid-gap: 16px; - grid-template-columns: 1fr 200px; + grid-template-columns: 1fr minmax(280px, 420px); padding: 16px 24px; 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%)')}; 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 { height: 0px; opacity: 0;