toggle and legend for small size screens

smaht-dac · Oct 16, 2024 · d22327e · d22327e
1 parent d63b21c
commit d22327e
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/src/encoded/static/components/viz/AreaChart.js b/src/encoded/static/components/viz/AreaChart.js
@@ -632,7 +632,7 @@ export class HorizontalD3ScaleLegend extends React.Component {
 
     renderColorItem([term, color], idx, all){
         return (
-            <div className="col-sm-4 col-md-3 col-lg-3 mb-03 text-truncate" key={term} data-tip={term.length > 25 ? term : null}>
+            <div className="col-sm-12 col-md-6 col-lg-6 col-xl-3 mb-03 text-truncate" key={term} data-tip={term.length > 25 ? term : null}>
                 <div className="color-patch" style={{ 'backgroundColor': color }} data-term={term} />
                 { term }
             </div>
@@ -1306,7 +1306,7 @@ export class AreaChartContainer extends React.Component {
         switch(typeKey) {
             case 'expanded':
                 const gridState = layout.responsiveGridState(windowWidth);
-                if (gridState && gridState !== 'xl') return false;
+                if (gridState && ['lg', 'xl', 'xxl'].indexOf(gridState) === -1) return false;
                 return !!value;
             default:
                 return !!value
@@ -1380,7 +1380,7 @@ export class AreaChartContainer extends React.Component {
             );
         }
         const gridState = layout.responsiveGridState(windowWidth);
-        if (['xs', 'sm'].indexOf(gridState) === -1) {
+        if (['xs', 'sm', 'md'].indexOf(gridState) === -1) {
             const toggled = AreaChartContainer.isToggled(this.props, 'expanded');
             const className = "btn btn-sm mr-05 " + (toggled ? "btn-primary" : "btn-outline-dark");
             buttons.push(