Search Box horizontal scrollbar is always visible

[B1anky]

This behavior is visible even from your online example: https://jsoneditoronline.org/

The Search Box children elements upon inspection seem to occupy more than the available fixed width of the parent Search Box element. This causes a horizontal scroll bar to always be visible. Is it possible to adjust the search box's .css to be more of an adjustment based on percentages of the page? It will always show, no matter the width of the parent document element. Maybe even allowing the search edit itself to possibly shrink to some minimum width as well would be more visually appealing, as a suggestion.

[josdejong]

Thanks for reporting. I have tried to reproduce on Firefox and Chrome, but so fare without luck. So, to figure this out further, some questions:

• What browser and OS are you using?
• Does it happen in other browsers too?
• Does it happen when in incognito mode?
• Does it happen for specific JSON documents or anyone?

[B1anky]

What browser and OS are you using?

• Google Chrome Version 104.0.5112.101 (Official Build) (64-bit) on 64-bit Ubuntu 20.04.4 LTS.

Does it happen in other browsers too?

• It happens in Mozilla Firefox version 109.0 (64-bit) on 64-bit Ubuntu 20.04.4 LTS.
• I noticed it does not happen on my Windows machine running a slightly different version of Google Chrome.

Does it happen when in incognito mode?

• It does still happen on the Ubuntu machine when in incognito mode.

Does it happen for specific JSON documents or anyone?

• It doesn't seem to matter if the JSON document is populated or not.
• It affects at least 3 other people with a similar environment which is almost everyone who has tested it.

Other note(s):

• My machine is running monitors at 1080p
• jse-search-form has a fixed width of 400px, but the child element jse-search-contents has a width of 420px, causing the scrollbar to appear. It seems like something is going on with the flex. Maybe allowing the jse-search-input to shrink to a minimum width would help, so the scrollbar is less likely to show unless truly necessary?
• The css for the jse-search-form has a specificity of 3 via: .jse-search-box.svelte-18vllqh.svelte-18vllqh with the following contents, which indicates a fixed width:

  .jse-search-box.svelte-18vllqh.svelte-18vllqh {
  border: var(--jse-panel-border);
  border-radius: 3px;
  font-family: var(--jse-font-family);
  font-size: var(--jse-font-size);
  background: var(--jse-panel-background);
  color: var(--jse-panel-color-readonly);
  box-shadow: var(--jse-controls-box-shadow);
  display: inline-block;
  width: 400px;
  max-width: 100%;
  overflow: auto;
  }

[josdejong]

Thanks for debugging this issue further. I still can't reproduce your issue, but I see on a very small screen, the input field isn't shrinking.

Does adding width: 0; min-width: 50px; to the CSS of jse-search-input fix the issue for you?

[B1anky]

Yes, adding those two css properties makes it act properly in my browser configuration. Specifically the width: 0 is what fixes it in the default sizing case, but the min-width: 50px is nice to have when the window is shrunk enough that the jse-search-input would best have some minimum size.

[josdejong]

That's good news!

Yes indeed, the width: 0 is what does do the trick: https://stackoverflow.com/questions/42421361/input-button-elements-not-shrinking-in-a-flex-container

I'll create a fix for this.

[B1anky]

Thanks for the quick turn-around and dialogue!

[josdejong]

teamwork 👊

[B1anky]

Makes the dream work :fist_oncoming:

[B1anky]

Ahh I just realized that the .jse-replace-input css also needs this change. If you hit the arrow in the .jse-search-box to expand down the replace-input, it has the same issue. Adding the same fix to that stylesheet also works properly as a solution though if you want to add it as well.

[josdejong]

Yes true. In d3ffdef I changed the CSS for all input fields in the search box, this matches both the search and the replace inputs:

https://github.com/josdejong/svelte-jsoneditor/blob/main/src/lib/components/modes/treemode/menu/SearchBox.scss#L49-L61

[josdejong]

The fix is published now in svelte-jsoneditor@0.14.4, and also in the web application https://jsoneditoronline.org v6.12.3