Fix regression with action button height with icon

[silverwind]

One of the recent changes seems to have removed this needed CSS rule, resulting in this regression where the input element is stretched too high because of the SVG:

Before (search bar too high):

After (search roughly equal in height to buttons on left):

[delvh]

@wxiaoguang

[wxiaoguang]

Thank you, didn't find it. Maybe it need a comment about which page uses it

[wxiaoguang]

Tested, I think the style could be replaced by padding-top/bottom: 0:

Maybe:

/* let the button's flex layout the icon, no need extra y-padding */
.ui.action.input .ui.icon.button {
    padding-top: 0;
    padding-bottom: 0;
}

[silverwind]

I guess we can simplify the selector and call it out in the CSS. Maybe I'll also try a general solution to buttons with svg.

[wxiaoguang]

I have a feeling that the padding-top/bottom: 0 could be added to .ui.action.input .button (line 487)

Now the buttons all have display: flex/inline-flex and align-items: center, the action input button doesn't need padding-top/bottom any more, they could just share the container's height and layout correctly.

[wxiaoguang]

-> Remove CSS has selector and improve various styles #26891

[silverwind]

I'm skeptical whether :has could be removed in all cases, but we'll see.

[wxiaoguang]

I have tested all the related UI, except one:

/* fix fomantic's border-radius via :first-child with hidden elements */
.collapsible-comment-box:has(.gt-hidden) {
  border-radius: var(--border-radius) !important;
}

Actually I didn't see difference after removing it. If it doesn't look good, feel free to let me know.

[silverwind]

It is this box and yes, it has regressed:

https://try.gitea.io/silverwind/symlink-test/pulls/2

Notice the background bleeding into the border on bottom. The hiding mechanism is crude and just hides all children with gt-hidden, so ::last-child does not work. It could be fixed by adding decicated classname when collapsed.

[wxiaoguang]

I think this style is good enough, no trick.

class="collapsible-comment-box gt-p-3 gt-df gt-ac gt-sb"

[wxiaoguang]

Or, keep using "ui segment" for consistency, and use:

class="ui segment collapsible-comment-box gt-my-3 gt-py-0 gt-df gt-ac gt-sb"

[wxiaoguang]

Or, make it (collapsible-comment-box) have background: transparent;

class="ui segment collapsible-comment-box gt-bg-transparent gt-py-3 gt-df gt-ac gt-sb"

[silverwind]

Works for me, I wouldn't mind removal of ui segment, the less fomantic, the better.

[silverwind]

I guess the use case kind of screams for a details element which wouldn't need JS to toggle.