Strange gaps occur when using the [sp-label] tag

[hideo]

こんにちは。

PhotoshopのUXPを使用したScriptUIにおいて、
Spectrumのsp-labelを使用すると、良く分からない隙間が発生します。

-プラグインSample-

uxp-photoshop-plugin-samples/ui-kitchen-sink at main ·...

sp-labelを使用すると後ろに変な隙間が出来ます。
文字数が短いと発生しているようですが、
CSSでマージンやパディングの調整を行ってもこの隙間が解決できませんでした。

sp-labelを使用しないと正しい幅で表示されます。

個別に幅の設定をするしかないのでしょうか？
どなたか解決策をご存じありませんか？

---

Hello.

In ScriptUI using Photoshop’s UXP.
Spectrum’s sp-label causes a gap that I don’t understand.

-Plugin Sample-

uxp-photoshop-plugin-samples/ui-kitchen-sink at main ·...

When I use sp-label, there is a strange gap behind it.
It seems to occur when the number of characters is short.
I have tried adjusting the margins and padding in CSS, but could not resolve this gap.

Without sp-label, the correct width is displayed.

Is the only way to set the width individually?
Does anyone know of a solution?

Translated with DeepL

[Karmalakas]

You should try inspecting sp-label inside the div.sp-tab.selected - not the div itself

[Majji]

@hideo Try removing the min-width set on the sp-label. It has a min-width of 40px.

[hideo]

Thanks for the reply.

I also checked inside sp-label.
The size does not change when I set the margins and padding to zero.
It does not change when the parent factor is also included and set to zero.

[hideo]

Thanks for the reply.

min-width of 40px.

Where does this refer to what is specified?

[Karmalakas]

So did you check in the right window what styles you have for that sp-label (you excluded that from your screenshot)? Is there a specific reason why you think margins or paddings should change the behaviour (even after there was a reply about the width)?

[hideo]

Thanks for the reply.

Sorry, I did not have enough diagrams.
This is how I am checking.

I’m checking by changing the [Nateve] part.
I’ve set all margins, padding, etc. to zero.
I don’t seem to have specified any widths.
Only the gap on the right side remains empty.

[shuji]

sp-label is Web Components.
Web Components has shadow DOM which is separated from outside scope.
according to MDN, Web Component have closed mode or open mode.
but in case of closed mode, accessing from outside is impossible.
and It seems like it has closed mode (because shadowRoot property returns null).
probably I suppose so.

Web Components

ShadowRoot

[hideo]

Thank you for your valuable information.
I have read your Blog before.

My knowledge of the API and DOM is not good enough.
I have not been able to find a solution to this kind of problem.
It takes me a lot of time to investigate.

I did not know that I could check the internal access in the logs like this.
I would like to try it once.

I will leave the UI part for now and make the contents first.

[Karmalakas]

You’re checking the div again and not label

[hideo]

Thanks, I guess my understanding has not caught up.
I will study it again.

[Karmalakas]

Inspect label and not div. In your last screenshot I see you’re inspecting the div, which is highlighted. Label should be highlighted. Then you will see label styles on the right

[hideo]

Thanks again.
I understand what you are saying.

I had checked the contents of my sp-label many times as well.
There is no parlameter that leaves a gap on the right and I can’t figure out why.

Thanks for reading this so many times.

[Karmalakas]

OK, so most likely this Spectrum element has some stuff going inside of it. That’s why I don’t really like them, but they are good with theme support. Spectrum elements are basically wrappers of something more as I understand them. And that something is not exposed to the outside in any way. Also it’s not possible to change these inner styles in any way.

@Majji seems to be on to something, that there’s a 40px width somewhere, but it’s not the label. I didn’t dig deep, but what @shuji explains seems reasonable and confirms my thoughts.

This is just another limitation/bug on Adobes side I suppose

[hideo]

There still seems to be a lot of bugs and other problems.
I will take a look and make as much as I can.

Thanks again and again for the confirmation.

[sttk3]

Spectrum UXPのコンポーネントの見た目は上書きできないことが多いです。

ただ，隣接セレクタを使って無理やりマージンをマイナスにしたり，transformを使って移動するような汚いハックは通用することがあります。

The appearance of Spectrum UXP components often cannot be overridden.

However, dirty hacks like forcing negative margins using adjacent sibling combinator or moving them using transform may work.

[Majji]

@hideo Inspection of styles applied on sp-label is not possible. But I can assure you that removing the min-width from the sp-label can resolve the current issue.
<sp-label style="min-width: none">HTML</sp-label>

[hideo]

ありがとうございます。
制限のある中でUIを詰めたいので細かいところがもう少し分かりやすいと良いのですが…。

@Majji さんの教えてくれた方法で対応できました。

Thank you.
I would like to fill in the UI with the restrictions, so it would be nice if the details were a little clearer…

I was able to handle it with the method @Majji showed me.

[hideo]

Thank you very much!!
I was able to do it the way you taught me.

[Karmalakas]

I tried with min-width: 0 and auto, but it didn’t work Wonder why