dosubot[bot] commented on issue #36904: URL: https://github.com/apache/superset/issues/36904#issuecomment-3710902283
<!-- Greeting --> Hi @theshazkhan! I'm [Dosu](https://go.dosu.dev/dosubot) and I’m helping the superset team. <!-- Answer --> This happens because the modal uses Ant Design's default styling, which collapses newlines, so multiline text like stack traces appears as a single line. While adding `white-space: pre-wrap` to `.ant-modal-body` would fix the issue, it would also affect all modals in Superset, potentially breaking layouts that rely on inline spacing (like forms or multi-column rows) [see example](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/features/databases/DatabaseModal/index.tsx#L48-L2192). A safer fix is to scope the CSS to only the cell content modal. You can do this by adding a custom class to the modal (e.g., `cell-content-modal`) and targeting it in your CSS: ```css .cell-content-modal .ant-modal-body { white-space: pre-wrap; } ``` Or, if you control the modal content, wrap the multiline text in a `<pre>` or a styled component with `white-space: pre-wrap`. This preserves newlines without impacting other modals. Superset's Emotion styling guidelines recommend customizing Ant Design components with styled components for this kind of targeted override [see docs](https://github.com/apache/superset/wiki/Emotion-Styling-Guidelines-and-Best-Practices). Test the fix by opening the cell content modal with multiline text and verifying that line breaks are preserved, while other modals remain unaffected. <!-- 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/6f71f451-befb-4a4d-b4fd-b392505e1c0b?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/6f71f451-befb-4a4d-b4fd-b392505e1c0b?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/6f71f451-befb-4a4d-b4fd-b392505e1c0b?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/6f71f451-befb-4a4d-b4fd-b392505e1c0b?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/6f71f451-befb-4a4d-b4fd-b392505e1c0b?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/6f71f451-befb-4a4d-b4fd-b392505e1c0b?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/6f71f451-befb-4a4d-b4fd-b392505e1c0b?feedback_type=other)</sup> [](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github) [](https://cursor.com/link/prompt?text=This%20happens%20because%20the%20modal%20uses%20Ant%20Design%27s%20default%20styling%2C%20which%20collapses%20newlines%2C%20so%20multiline%20text%20like%20stack%20traces%20appears%20as%20a%20single%20line.%20While%20adding%20%60white-space%3A%20pre-wrap%60%20to%20%60.ant-modal-body%60%20would%20fix%20the%20issue%2C%20it%20would%20also%20affect%20all%20modals%20in%20Superset%2C%20potentially%20breaking%20layouts%20that%20rely%20on%20inline%20spacing%20%28like%20forms%20or%20multi-column%20rows%29%C2%A0%5Bsee%20example%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/src/features/databases/DatabaseModal/index.tsx%23L48-L2192%29.%0A%0AA%20safer%20fix%20is%20to%20scope%20the%20CSS%20to%20only%20t he%20cell%20content%20modal.%20You%20can%20do%20this%20by%20adding%20a%20custom%20class%20to%20the%20modal%20%28e.g.%2C%20%60cell-content-modal%60%29%20and%20targeting%20it%20in%20your%20CSS%3A%0A%0A%60%60%60css%0A.cell-content-modal%20.ant-modal-body%20%7B%0A%20%20white-space%3A%20pre-wrap%3B%0A%7D%0A%60%60%60%0A%0AOr%2C%20if%20you%20control%20the%20modal%20content%2C%20wrap%20the%20multiline%20text%20in%20a%20%60%3Cpre%3E%60%20or%20a%20styled%20component%20with%20%60white-space%3A%20pre-wrap%60.%20This%20preserves%20newlines%20without%20impacting%20other%20modals.%20Superset%27s%20Emotion%20styling%20guidelines%20recommend%20customizing%20Ant%20Design%20components%20with%20styled%20components%20for%20this%20kind%20of%20targeted%20override%C2%A0%5Bsee%20docs%5D%28https%3A//github.com/apache/superset/wiki/Emotion-Styling-Guidelines-and-Best-Practices%29.%0A%0ATest%20the%20fix%20by%20opening%20the%20cell%20content%20modal%20with%20multiline%20text%20and%20verifying%20that%20line%20br eaks%20are%20preserved%2C%20while%20other%20modals%20remain%20unaffected.) [](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/36904) -- 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]
