Clear Button misplaced in SearchWithin

[Harbs]

Description

Clear Button misplaced in SearchWithin

Steps to reproduce

1. Build the docs from the main branch.
2. Go to http://localhost:3000/docs/searchwithin.html
3. Look at the Default (Changed Selection) example
4. Observe the clear button is to far to the left.

Expected behavior

The position should match the other examples

Screenshots

Environment

• Spectrum CSS version: (latest)
• Browser(s) and OS(s): Firefox on Mac (didn't check other browsers)

[Harbs]

FYI, I just checked in Chromium and the problem does not appear there.

[Harbs]

To be completely clear, the text field border is drawing wider than the actual input in Firefox, but in chromium it's drawing to the true input border. The clear button appears to be in the correct location in all cases.

[Harbs]

Further inspection seems to indicate that it has something to do with the input min-width. The default value in FIrefox is auto which sets the width too wide. (Interestingly enough, explicitly setting it to auto in Chromium does not cause issues.) I have no idea why the difference between browsers, but explicitly setting the input min-width to inherit makes the problem go away.

HTH...

[lazd]

Gotcha, seems like we need to change the min-width. Go ahead and send a PR with your fix and we'll merge!

[misterbrownlee]

Thanks for breaking CSS, @Harbs 🤣

[misterbrownlee]

Oh... correction. Thanks for fixing CSS ;)

[Harbs]

inherit helps in that case, but if the dropdown selected text is wide, things get wonky...

[Harbs]

The following CSS solves this case:

.spectrum-SearchWithin > .spectrum-Textfield {
  flex-grow: 1;
}

My proposed fix to both of these issues is to change:

.spectrum-SearchWithin-input {
  -ms-flex: 1;
      flex: 1;
}

to:

.spectrum-SearchWithin-input {
  -ms-flex: 1;
      flex: 1;
  min-width: inherit;
}
.spectrum-SearchWithin > .spectrum-Textfield {
  flex-grow: 1;
}

If that makes sense to you, I'll create a PR.

[Harbs]

I also propose adding the following to .spectrum-SearchWithin-picker

max-width: calc(100% - 100px);

Currently, a very wide dropdown/picker will shrink the search field down to 48 pixels which IMO is much too narrow:

With the above change, it looks like this:

[Harbs]

Possible, a css variable is better than a hard-coded 100px. Not sure which one is appropriate.

[Harbs]

I'm guessing it should be --spectrum-global-dimension-size-1200 (96px) or --spectrum-global-dimension-size-1250 (100px).

Although I'm not sure how localized Search placeholders will look with hard-coded dimensions.

I can create the PR without the last change, or with direction on the correct way to implement that last change.

Please let me know which is better. 😄

[lazd]

Hmm, I think we can accomplish this without the width: calc() business, which I think is why we had a min-width on the input to begin with...

[Harbs]

I tried using min-width on the input, but the clear button ended up in the wrong place. calc worked better. But you guys probably have better css-foo than I do... 😉

[Harbs]

(Notice the clear button in the top image where the min-width of the input is 48px.)