Loading a sample reduces the editor menu and content width by 15px up until a minimum of 85px

[alkhatib-shopify]

I noticed the editor menu and content window would get smaller every time I navigated through the samples.

I tried to figure out why, and added a few logs. Noticed that the value of width being passed in to the resize method here:

https://github.com/jeremysmithco/railsinspire/blob/29ad98ef95cb4e5606105083ba58934b10515d75/app/javascript/controllers/resize_width_controller.js#L14-L16 Was always 15px different from the current value, and would always result in an update.

I could not figure out why that width is off by 15 all the time though.

This change fixes it locally, but I am interested in finding out why it was off by 15px:

Here: https://github.com/jeremysmithco/railsinspire/blob/29ad98ef95cb4e5606105083ba58934b10515d75/app/views/sample_files/_editor.html.erb#L7-L12

    #editor-menu {
      width: <%= menu_width_or_default.to_i + 15 %>px;
    }

    #editor-contents {
      width: <%= contents_width_or_default.to_i + 15 %>px;

Somewhere between setting it in that _editor.html.erb and where the resize_width_controller.js is called the width value is changed.

Screenshots of the sample page and the cookie values:

1. Cleared cookies, loaded a sample: https://railsinspire.com/samples/8

2. Reload the page/Visit another Sample or Click on a filename:

3. After many reloads:

The min width is min-w-[100px] for both elements, and 100-15 = 85 which is why I think it stops there.

[jeremysmithco]

@alkhatib-shopify Hey Anas, thanks so much for the detailed bug report! And sorry for the trouble!

I'm trying to figure out why there are gaps between the editor panes in your screenshots. My intention was that there wouldn't be any space between the panes. Here's how it renders for me:

It looks like you're using Chrome. But do you happen to know if you have any extensions that make scrollbars persistent, or override styling in other ways?

Thanks!

[alkhatib-shopify]

Good catch, It is related to this setting in mac OS

If I change that to when scrolling

Then the scroll bar disappears and the page loads fine without changing the size.

This behaviour is the same in both Chrome and Safari.

[jeremysmithco]

Ahh, thanks @alkhatib-shopify! I didn't even think about the OS-level option. I'm hoping to work on a fix for this in the next couple days. 👍