dosubot[bot] commented on issue #37286: URL: https://github.com/apache/superset/issues/37286#issuecomment-3773961808
<!-- Answer --> You're right—PR #36531 only addressed some general UI clipping by tweaking CSS, but it doesn't fix the root cause of the Zoom Data control not fitting in the panel. The main issue is that the zoom slider (dataZoom) in time-series charts uses fixed bottom padding and offset constants for its placement, with no dynamic or responsive adjustment if the panel is too small or extra controls are present. There's also no explicit overflow or width handling for the control, so it can overflow or get clipped in cramped layouts. A common workaround for similar UI issues is to set container heights to 100vh instead of 100% or enable scrollbars, but this may not fully solve the zoom control problem in all cases. The relevant code is in the EchartsTimeseries.tsx and transformProps.ts files, where the zoom slider's space is reserved using fixed constants like TIMESERIES_CONSTANTS.zoomBottom and gridOffsetBottomZoomable, and no responsive logic is applied if the available space is insufficient. A more robust fix would involve making the zoom control's placement and sizing responsive to the actual panel size, possibly by dynamically adjusting the bottom offset or enabling overflow handling in the chart container. For reference, see the [EchartsTimeseries component](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx#L67-L281) and [transformProps logic](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts#L476-L688). No recent PRs or threads directly address this, so a code change targeting these areas would be needed for a complete solution. <!-- Dosu Comment Footer --> *To reply, just mention [@dosu](https://go.dosu.dev/dosubot).* --- <sup>How did I do? [Good](https://app.dosu.dev/response-feedback/1d9b2fda-7b23-4de1-a7c9-6c64e1c1b561?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/1d9b2fda-7b23-4de1-a7c9-6c64e1c1b561?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/1d9b2fda-7b23-4de1-a7c9-6c64e1c1b561?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/1d9b2fda-7b23-4de1-a7c9-6c64e1c1b561?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/1d9b2fda-7b23-4de1-a7c9-6c64e1c1b561?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/1d9b2fda-7b23-4de1-a7c9-6c64e1c1b561?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/1d9b2fda-7b23-4de1-a7c9-6c64e1c1b561?feedback_type=other)</sup> [](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github) [](https://cursor.com/link/prompt?text=You%27re%20right%E2%80%94PR%20%2336531%20only%20addressed%20some%20general%20UI%20clipping%20by%20tweaking%20CSS%2C%20but%20it%20doesn%27t%20fix%20the%20root%20cause%20of%20the%20Zoom%20Data%20control%20not%20fitting%20in%20the%20panel.%20The%20main%20issue%20is%20that%20the%20zoom%20slider%20%28dataZoom%29%20in%20time-series%20charts%20uses%20fixed%20bottom%20padding%20and%20offset%20constants%20for%20its%20placement%2C%20with%20no%20dynamic%20or%20responsive%20adjustment%20if%20the%20panel%20is%20too%20small%20or%20extra%20controls%20are%20present.%20There%27s%20also%20no%20explicit%20overflow%20or%20width%20handling%20for%20the%20control%2C%20so%20it%20can%20overflow%20or%20get%20clipped%20in%20cramped%20layouts.%20%0A%0AA%20common%20workaround% 20for%20similar%20UI%20issues%20is%20to%20set%20container%20heights%20to%20100vh%20instead%20of%20100%25%20or%20enable%20scrollbars%2C%20but%20this%20may%20not%20fully%20solve%20the%20zoom%20control%20problem%20in%20all%20cases.%20The%20relevant%20code%20is%20in%20the%20EchartsTimeseries.tsx%20and%20transformProps.ts%20files%2C%20where%20the%20zoom%20slider%27s%20space%20is%20reserved%20using%20fixed%20constants%20like%20TIMESERIES_CONSTANTS.zoomBottom%20and%20gridOffsetBottomZoomable%2C%20and%20no%20responsive%20logic%20is%20applied%20if%20the%20available%20space%20is%20insufficient.%20%0A%0AA%20more%20robust%20fix%20would%20involve%20making%20the%20zoom%20control%27s%20placement%20and%20sizing%20responsive%20to%20the%20actual%20panel%20size%2C%20possibly%20by%20dynamically%20adjusting%20the%20bottom%20offset%20or%20enabling%20overflow%20handling%20in%20the%20chart%20container.%20For%20reference%2C%20see%20the%20%5BEchartsTimeseries%20component%5D%28https%3A//github.com/apache/supe rset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/EchartsTimeseries.tsx%23L67-L281%29%20and%20%5BtransformProps%20logic%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts%23L476-L688%29.%20%0A%0ANo%20recent%20PRs%20or%20threads%20directly%20address%20this%2C%20so%20a%20code%20change%20targeting%20these%20areas%20would%20be%20needed%20for%20a%20complete%20solution.) [](https://go.dosu.dev/discord-bot) [](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/apache/superset/issues/37286) -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
