@C-Lodder please review this

Yup, this fixes the inconsistency with the row class

@C-Lodder could you please help me? which container need to be 100%

Actually it's due to the row class on the <joomla-field-permissions> custom element (no idea why it's there).

Then you'll need to replace your current coding changes with:

<div class="row">
    <div class="col-md-12">
    </div>
</div>

EDIT: Aaah, sorry! I skipped #23687 (comment)

Already said above:

Is there a reason why you don't remove row class here: https://github.com/joomla/joomla-cms/blob/4.0-dev/layouts/joomla/form/field/rules.php#L78

plus

<div id="page-permissions" class="tab-pane">
  <div class="row">
    <div class="col-md-12">
....

in default.php.

Thus you could make the code inside default.php more consistent.

I've tested my proposal a bit in the back-end and I think the row class for joomla-field-permissions is wrong(?).

@ReLater Yes, the row class on the custom element is incorrect. It shouldn't be there at all.

@amitranjan2 Your latest commit is incorrect.

@C-Lodder was previous one right?
I'm working on this issue for a quite long time, still not getting the 100% width

@amitranjan2 Re-add this: <joomla-field-permissions class="row mb-2" data-uri="<?php echo $ajaxUri; ?>">

but remove row from it.

Then for the width, this will need to be fixed in the SCSS file.

@amitranjan2 You did not do the changes as proposed by C-Lodder.

@Quy I revert the changes according to @C-Lodder

@C-Lodder is scss file changes already done in your PR ? #23729

@amitranjan2 No, my PR was purely for code improvements

@C-Lodder I made changes in joomla-tab.css and this is the result

https://github.com/joomla-projects/custom-elements/blob/a0cb122751530fb093b74319899fef5fe377a808/src/scss/tab/tab.scss#L69

Here added width:100%

Is this correct ?

Good start. It should align with the Permissions blue blox. And I think the tabs on ther left need sorting out. If I righgtly remember, they 30% width which may look somewhat odd, higher resolution monitors

@C-Lodder I made changes in joomla-tab.css and this is the result
here I changed to min-width:15%
https://github.com/joomla-projects/custom-elements/blob/a0cb122751530fb093b74319899fef5fe377a808/src/scss/tab/tab.scss#L78

is this all correct now?
alignment and 100% width both

@C-Lodder is anything left to be fixed?
please tell me.
in my opinion, your both issue(alignment and 100% width) is working fine now.
please review

Code changes seem fine

@C-Lodder So, have I to create another PR for that changes of width in Joomla project/Custom elements?

You can incorporate them here or do a separate one. Your choice

@C-Lodder Please close the Issue #23627
as now both alignment and width 100% is working fine

Set to "closed" on behalf of @Quy by The JTracker Application at issues.joomla.org/joomla-cms/23687

This is no longer an issue with the new backend template.