expand default permissions table to use full page width

[areychana]

Notes for Reviewers

This PR fixes #1082

The default permissions table box was constrained to ~80% of the content column width due to the tabpane shortcode rendering inside a <ul> element, which had max-width: 80% applied by the theme.

Changes i made:

• Wrapped the tabpane shortcode in a <div class="permissions-tabpane"> to render it outside the ul constraint
• Added CSS to expand the tabpane to full content width
• Centered role indicator columns (✅/❌) in the Categories tab
• Fixed the Roles tab Description column width using table-layout: fixed with a 25/75 split

Signed commits

• Yes, I signed my commits.

[gemini-code-assist]

Code Review

This pull request wraps the permissions tabpane in a new <div class="permissions-tabpane"> container and adds corresponding SCSS styles to format the permissions tables. The reviewer suggests refactoring the newly added SCSS rules to leverage nesting, which improves readability and maintainability.

Important

The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.

[github-actions]

PR Preview Action v1.6.3
Preview removed because the pull request was closed.
2026-06-11 17:54 UTC

[KatalKavya96]

Thanks for working on this @areychana,

I reviewed the PR and compared it with the reported issue.
The changes look good to me:

• The permissions tab pane is now wrapped separately so it is no longer affected by the previous list/max-width constraint
• The table now uses the page width much better
• The role indicator columns in the Categories tab are visually cleaner after being centred
• The Roles tab also looks improved with the fixed table layout and better Description column width
• The follow up SCSS nesting refactor also makes the styling cleaner and easier to maintain

I checked the preview behaviour and the table now makes much better use of the available horizontal space while keeping the content readable

Looks good to me!

[Bhumikagarggg]

@areychana Thank you for your contribution! Let's discuss this during the website call tomorrow at 5:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂

[hortison]

@Bhumikagarggg review this. collaborate with the author until it is merged.

[Bhumikagarggg]

The top section appears to be cut off. The "Categories" and "Roles" tabs are partially hidden/clipped at the top, which affects the UI layout and visibility.

[areychana]

The top section appears to be cut off. The "Categories" and "Roles" tabs are partially hidden/clipped at the top, which affects the UI layout and visibility.

Hi @Bhumikagarggg thanks for the review! i have applied your suggestion and pushed the fix. pls take another look when you get a chance! :)

[Bhumikagarggg]

LGTM 🚀
Thanks @areychana

[areychana]

LGTM 🚀 Thanks @areychana

i have squashed all commits into one clean commit and force pushed. its ready for merge whenever a maintainer is available!!

[welcome]

        Thank you for contributing to the Layer5 community! 🎉 \ \ \ \         ⭐ Please leave a star on the project. 😄