[4.0] fix error of styling issue with save and close button

[Subhang23]

Pull Request for Issue #26771

Summary of Changes

Fixed styling issue with Save & Close button on mobile on article page

Testing Instructions

Expected result

The content in "Save and Close" button should be aligned properly.

Actual result

Documentation Changes Required

[richard67]

@Subhang23 Our Pull Request (PR) template provides 2 pre-defined section, "Expected result" and "Actual result". "Expected result" shall describe what is the right, expected behavior which is approached with the PR, i.e. the result after having applied the PR. "Actual result" shall describe the current, actual behavior of Joomla (3 or 4, depending on which version the PR is made for, in case of this PR: 4).

Now you used "Present result" and "Actual result" in this PR.

Due to a certain ambiguity of the English language for that word, "Present" can be a verb and mean "to show something to someone", but it also can be an adjective and mean (almost) same as "current" or "actual". So for a quick reader it is not really clear which of your screenshots shows the situation before and which one shows the sitation after applying your PR.

Of course one could test to find it out, but for readers it would be better if it would be more clear.

Could you correct the section headings above your screenshots so that it is like I described above, "Actual result" for what we have in Joomla 4 now, and "Expected result" for how it with your PR aplied?

Thanks in advance.

[brianteeman]

The intended design is for all those buttons to be 100% width on a mobile

[Subhang23]

@richard67 I have changed it and am sorry for the improper message.

[Subhang23]

@brianteeman Would this be good?

[brianteeman]

yes that is the intended design

[infograf768]

Looks good but has to be tested in RTL and with other pages.

[brianteeman]

Unfortunately this breaks the action button

[brianteeman]

I should note that I dont understand why these two dropdown buttons are coded differently #27767

[Subhang23]

@brianteeman @richard67 @infograf768 Is this fine?

[Quy]

Issue with RTL language. Install Persian to test.

[richard67]

@richard67 I have changed it and am sorry for the improper message.

No need to say sorry. I've explained how we normally do it, you followed that, so all is fine.

[Subhang23]

@Quy Is this good?

[infograf768]

Almost there.
Remains to modify line 383 of /administrator/templates/atum/scss/blocks/_toolbar.scss
from

     @include media-breakpoint-down(sm) {
        [dir=rtl] & {
          margin-left: 0.75rem;
          margin-right: 0 !important;
        }
      }

to

     @include media-breakpoint-down(sm) {
        [dir=rtl] & {
          margin-left: 0.75rem !important;         // Added !important
          margin-right: 0 !important;
        }
      }

before this modification, we get

after this modification, we get

[infograf768]

I have tested this item ✅ successfully on 50c28d3

Looks OK now to me.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/27816.}

[Quy]

Remove right margin.

[infograf768]

@Quy
Not sure we can change that margin, comparing with other views.
In any case, I think it is unrelated to the original reason of this PR.
I suggest to go with what we have here and then see what we can do, if possible, in another PR.

[Quy]

I have tested this item ✅ successfully on 50c28d3

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/27816.}

[Quy]

RTC

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/27816.}

[infograf768]

tks

[infograf768]

Please test #27841 solving all alignments