React Pages Hierarchy SPFx - changing the style of button styles

[thosjo95]

Disclaimer

Yes

Sample

https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-pages-hierarchy

Question

I want to modify the styling of buttons in the "children pages" layout to allow the text to wrap and remove the ellipsis (...) that appears when the text is too long. The goal is to ensure that text is fully visible, and the container expands dynamically to accommodate it.

I'm doing this by eiditing this ybder the the "Layouts.module.scss" under webparts>pagehierarchy>components>Layout

.listLayoutItemButton {
    @include ms-font-m-plus;
    @include ms-fontWeight-regular;
    display: block;

    :global .ms-Button-textContainer {
      width: calc(100% - 10px);
    }

    :global .ms-Button-label {
        text-align: left;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 18px;
    }
};

Error Logs: The build fails with warnings related to linting and TypeScript, but no errors that directly point to the CSS change. Warnings include @typescript-eslint/no-explicit-any, no-unused-vars, and other TypeScript linting issues.

Reversion: Reverting the text-align property back to left resolves the build issues, and the web part works as expected. Browser Console: After changing the alignment to right, the browser console does not show any additional meaningful errors when inspecting the running web part.

Reverting the changes and reuploading fixes the app again.

Current Setup: Node.js version: v16.20.2 SPFx build tools version: 3.18.1 React version: 16.9.0 TypeScript version: 4.7.4

Are there any additional debugging steps or configurations I should try to diagnose why a simple CSS change would result in build issues?

Any guidance or suggestions would be greatly appreciated!

[thosjo95]

Here's the design change I want btw. I dont want these ..., but rather a wrap of the text that dynamically makes the button bigger.

[AriGunawan]

I can update the CSS without any issues, so I'm unable to replicate the problem. Do you have a public branch with the changes available for testing?

[github-actions[bot]]

This issue has been marked as stale due to no progress in over 90 days. If you are still experiencing this issue, please provide additional information so we can help you resolve it.

[github-actions[bot]]

Closing this issue due to lack of activity. If you are still encountering this issue, please do not hesitate to open a new issue. Make sure to follow the guidance on how to create good issues to increase your chances of getting the help you deserve.