Styling of buttons breaks in Blocks UI whilst using Bartik as an administration theme

Adding display: inline-block fixes the issue, patch attached.

Thanks @Miranda Jose for spotting this bug and thanks @Sagar Ramgade for the patch. I can confirm the patch fixes the visual issue.

The patch in #2 fixes this issue

@Miranda, issue mentioned in #8 seems unrelated. Could you please recheck this?

Yup #8 is unrelated.

I tested this with Firefox, Chrome and Safari, looks good.

ohh! good to know, I will run the tests again just to be sure

Thanks!

I think we're missing something here. With this change the height of the button changes which makes things inconsistent, for example on the node edit form (in 8.1.x) the delete button is too large with this patch applied.

Before

After

I added the tag Novice.

Fixed sizes of .button class

Results here

Hey kostyashupenko, I reviewed and # 18 get's it wright except for 1px, see images attached
If you add to the class .button a margin-top: 1px; it will get completely aligned.

So it sounds like this needs more work…

Sorry, @ceaucari, my bad. Now it looks ok on my side. Check screens below in FF and Chrome

@kostyashupenko Buttons are seems ok now ;) but the text is not inline. Please check the screenshot.

After:

I tested this in Firefox and Chrome. without applying this patch itself for me "place block" looking good in Firefox. In chrome only am facing this problem. After applying this patch issue is not occurred. Looks good.

Anybody facing problem the issues that i have mentioned above. This is in Mac - chrome

After applying patch text is in inline for me.. Looks good. @Manjit.Singh which browser are you facing this problem??

Oh in Mac... Let me check..

Thanks

Hi Manjit.Singh,

I tested this in Mac am not facing this issue. for me it works good.

I tested this as well and I couldn't reproduces the problem either, this works ok for me.

The issue summary does not show the original bug of the issue.

This issue needs "Before" screenshots added to the Issue summary. The "Place block" buttons look broken and we do not have any screenshots - #24 has before screenshots that you can add to the summary.

Then we need manual testing on the patch in #24 with clear screenshots to show the issue is fixed and not caused any more errors.

Then this issue can be marked RTBC.

From the recent git pull, we checked the issue. We recreate the problem and find the problem exist only in Chrome.We took a couple of screenshots before and after the patch both from Chrome and Firefox. After the patch, It seems that the issue is fixed.

before #21

after #21

Slight tidy to issue summary.

Also - hokkieweb should really be mentioned in the commit - done a lot of work today on her first (of many!) ventures into the issue queue.

Looks good now for me as well. RTBC ++
screenshots attached.

Before

After

@emma Just one query from after screenshot that dotted line is slightly outside from the container :P

Is that ok ? or Is it already reported somewhere ?

Looks to be the same location for the dotted line in both before and after screenshots to me. Maybe a new issue to raise?

Yeah, the dotted line should have its own issue.

Removing some tags.

Hi,
I have patched for Fixing the issue overflow dotted line in comment #35.

Before Applying patch

After Applying patch

Thanks
Sakthivel

As discussed in #36 and agreed in #37, work on the dotted line should be in a new issue. We should continue this issue from the patch at #21.

Setting this back to RTBC and making the correct patch file appear.

Sakthivel - I have already created a new issue for you to attach your patch to. (If I do it, you might not get recognised!) - see https://www.drupal.org/node/2683433

Sorry to be picky but this issue still needs to show the original bug in the issue summary.

Then it should be super clear that we are only fixing the button and nothing else.
I want this to be clear to everyone and especially the core committer who needs to wade through a lot of sidetracking during this issue.

Also the patch to review and potentially commit is #21.

Yup let's keep this focused, please and thanks :)

Further sorting of the Issue Summary

@Rachel_norfolk have you create an issue that i have mention in #35 ? or may i create ?

The aim of this issue was to fix the button's padding collapsing and the styling looking broken as a result.

The bug

The padding change included in the patch causes a visual regression on the current sizing of buttons in Bartik. The buttons end up bigger and also bigger than the things they sit next to, for eg. look at the Save, Preview and Delete buttons.

Before at HEAD.

Buttons are all 24.5px tall...

With patch

Buttons are 26px tall...

With patch #21 - the buttons are 26px tall everywhere.

Patch without the padding change

 
Buttons are again 24px tall...
 

Next steps

This issue should not introduce any visual regressions to elements indirectly involved in the issue. Therefore the padding change should not be applied to fix this bug.

Please can a follow up patch be created from #21 with the padding style *removed*? And then this issue will finally be RTBC! Thanks!

Done. Please review.

Thanks @snehi for the final patch.
 

 
Buttons in the block UI are fixed, no regressions on other buttons. RTBC!

Suggested commit message:

git commit -m 'Issue #2582911 by kostyashupenko, snehi, Sagar Ramgade, emma.maria, MRPRAVIN, rokkieweb, rachel_norfolk: Styling of buttons breaks in Blocks UI whilst using Bartik as an administration theme'

This looks good, bumping to 8.2.x (UI change that could potentially have other effects, Bartik as admin theme should be rare) and will commit soon :)

Committed 3e13553 and pushed to 8.2.x. Thanks!