text overlap

[ghost]

Hey Just a heads up, with the static width I'm getting some overlap, so I'm just throwing a small adjustment in my project

.jse-group-button {
    @apply !w-auto !px-1;
}

[ghost]

Here is after, not a big deal at all

[josdejong]

Thanks Luke for your input. How can I reproduce this issue? Does your project have specific CSS causing this issue?

[ghost]

Hey,

Yes, this is absolutely a side effect of global styles on my side, I’m using the styling system and theme formats from a component library I contribute a little to here and there, link is here if you want to take a look. https://www.skeleton.dev/guides/themes

Luke Hagar Cloud Support Engineer @. @.> Join the #SailPointCrew https://www.sailpoint.com/company/careers/

[https://i.xink.io/Images/Get/N9791/s18.png]

From: Jos de Jong @.> Date: Monday, December 12, 2022 at 6:58 AM To: josdejong/svelte-jsoneditor @.> Cc: Luke Hagar @.>, Author @.> Subject: Re: [josdejong/svelte-jsoneditor] text overlap (Issue #206) Thanks Luke for your input. How can I reproduce this issue? Does your project have specific CSS causing this issue? — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread. Message ZjQcmQRYFpfptBannerStart This Message Is From an External Sender This message came from outside your organization. ZjQcmQRYFpfptBannerEnd

Thanks Luke for your input. How can I reproduce this issue? Does your project have specific CSS causing this issue?

— Reply to this email directly, view it on GitHubhttps://urldefense.com/v3/__https:/github.com/josdejong/svelte-jsoneditor/issues/206*issuecomment-1346450350__;Iw!!MsNKLpFGsw!MpL76hRzWaB5qviXzOz7LFnb2OuHcSHMaEbXg2cxMJ9zDgipDwGFYf9tc3WHQBKW55uEA21SdvTCg7tnOUvFsa0r6pU$, or unsubscribehttps://urldefense.com/v3/__https:/github.com/notifications/unsubscribe-auth/AXSFHH4XL3BL464B3QK3RW3WM4OQPANCNFSM6AAAAAASZU7IBI__;!!MsNKLpFGsw!MpL76hRzWaB5qviXzOz7LFnb2OuHcSHMaEbXg2cxMJ9zDgipDwGFYf9tc3WHQBKW55uEA21SdvTCg7tnOUvFOh35q0Q$. You are receiving this because you authored the thread.Message ID: @.***>

[josdejong]

Ah ok, We we can make the library more robust that would be nice.

Is it possible to write fix with a CSS rule that does not use framework specific variables like w-auto and px-1?

[ghost]

Absolutely,

Those are tailwind classes, so they always equate to standard CSS values.

w-auto is equal to: width: auto;

And px-1 is equal to: padding-left: 0.25rem; padding-right: 0.25rem;

I love tailwind personally; it just makes styling easier for me. In general, for those kinds of things, I would avoid hardcoded h/w values, if you can base things like button sizing on padding or margin instead it usually plays better with different text sizes.

Really loving what you have built here.

Thank you,

Luke Hagar Cloud Support Engineer @. @.> Join the #SailPointCrew https://www.sailpoint.com/company/careers/

[https://i.xink.io/Images/Get/N9791/s18.png]

From: Jos de Jong @.> Date: Monday, December 12, 2022 at 7:49 AM To: josdejong/svelte-jsoneditor @.> Cc: Luke Hagar @.>, Author @.> Subject: Re: [josdejong/svelte-jsoneditor] text overlap (Issue #206) Ah ok, We we can make the library more robust that would be nice. Is it possible to write fix with a CSS rule that does not use framework specific variables like w-auto and px-1? — Reply to this email directly, view it on GitHub, or unsubscribe. You ZjQcmQRYFpfptBannerStart This Message Is From an External Sender This message came from outside your organization. ZjQcmQRYFpfptBannerEnd

Ah ok, We we can make the library more robust that would be nice.

Is it possible to write fix with a CSS rule that does not use framework specific variables like w-auto and px-1?

— Reply to this email directly, view it on GitHubhttps://urldefense.com/v3/__https:/github.com/josdejong/svelte-jsoneditor/issues/206*issuecomment-1346546809__;Iw!!MsNKLpFGsw!I20Zinq4Xd_zRZGn3koEYzu3YTAKBDNtFkxkzbrUl8f9zFv6BOpKNiEMNfNCPej3qLKdTD7MnQ-VikF0LNsjQmcEKtQ$, or unsubscribehttps://urldefense.com/v3/__https:/github.com/notifications/unsubscribe-auth/AXSFHHZYJTAGPDEEDFVLIQDWM4UOBANCNFSM6AAAAAASZU7IBI__;!!MsNKLpFGsw!I20Zinq4Xd_zRZGn3koEYzu3YTAKBDNtFkxkzbrUl8f9zFv6BOpKNiEMNfNCPej3qLKdTD7MnQ-VikF0LNsjliQeDLg$. You are receiving this because you authored the thread.Message ID: @.***>

[josdejong]

Ahh, now I see I gave the buttons a fixed width of 40px for some reason, that should indeed be auto. Fixed via https://github.com/josdejong/svelte-jsoneditor/commit/8e0cda3c1c91e97b1c41ff28c5b0ac80cf8c26ab.

The editor uses a configurable padding (defaulting to 10px) in many places. It would be interesting to see if we can make the padding relative to the font size in more places, but better to address that in a separate refactoring.

[josdejong]

Fixed now in v0.11.3