Fix overlapping Edit buttons on menu sidebar in outside-in

Looks like this issue is exist only for mac users, I have checked it in Linux-Ubuntu, It looks good to me. Buttons are not overlapping with the scrollbar.

This does not seems to be the OS specific rather than browser version specific.
I'm able to reproduce it.
Adding screenshot with the environment detail.

I am not able to see the screenshot @Naveen. Seems like it has nothing.

@naveenvalecha: yeah it has a dot and a red dashed square, hard to tell what you mean by that

Sorry for the wrong snapshot. Seems the Awesome Screenshot chrome extension was not happy that time :P

I investigated the problem more in depth, the problem is not macspecific. its due to the resolution of the screen.See in the screenshots below.I'll dig further with Manjit tomorrow in person.

I have attached patch for the above issue with screenshot. Please review.

Seems like text is still overlapping and not visible properly. see the screenshots.

Seems that there is insufficient space when the row weights are visible.

If you remove the 120px minimum width from the first column and set the table row & column width to 100% it has sufficient space.

Don't suppose you know why we have a minimum width?

please review the patch

Hi,

Could you specify the steps to reproduce the issue. I downloaded and applied the patch on my local instance but, was unable to see menu under block layout.

@moonpeak Have you enabled the Settings Tray module?

If so, hit 'Quick Edit' on the Tools block.

This need bit more testing with the latest patch. @moonpeak It would be good if you can do that.

Added new patch for this with before and after screenshots. @Manjit please look into this.

This is the updated patch. Please review this.

@Vidushi Mehta: why is this better/different, what did you find with the previous one, how is this fixing it better?

@Vidushi: Seems like #19 & #20 have completely different from each other. Seems like, there some mistake while creating the patch file. Can you please look into this. And Please don't forget to attach interdiff file in future.

@Gabor and @Manjit sorry actually by mistake i had uploaded my old patch that is #19 but the new and correct one is #20 and the screenshots that i had attached with #19 are for the patch #20.
So please ignore #19 patch and review #20.

Other changes have resolved this issue by introducing better sandboxing of tray css.

No, I spoke too soon. The problem at #10 still exists, but the patch at #20 does not properly resolve it.

What is needed is a way to make the table 100% but for it to 'flex' when the extra scroll bar appears.

I have fixed text "Operations" overlapping issue and it's working fine. I have attached patch for this please review.

Looks great!

Thanks @amit.mall!

Doesn't this just permanently reduce the width, though? Is there a particular reason 85px is being chosen?

Also, there's this CSS just above:

.ui-dialog-offcanvas td a {
  display: block;
  max-width: 120px;
  overflow: hidden;
}
.ui-dialog.ui-dialog-offcanvas tr td:first-child,
.ui-dialog.ui-dialog-offcanvas tr th:first-child {
  min-width: 120px;
  padding-left: 20px; /* LTR */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

@xjm #32, I found 85px is minimum width to occupy left side content, but since there is a css property- white-space: nowrap; so no need to have min-width, I have removed this in new attached patch, result is same

I reviewed patch #33. Looks fine for me.
Attaching screenshots for the same after applying the patch.

Just a re-roll

Changing to new settings_tray.module component. @drpal thanks for script help! :)