Merge branch 'fix/select-button-gap' into feat/comments-2

# Conflicts:
#	frontend/__snapshots__/scenes-app-insights--funnel-top-to-bottom-edit--webkit.png

frontend/src/lib/components/TaxonomicPopover/TaxonomicPopover.tsx

@@ -75,47 +75,45 @@ export function TaxonomicPopover<ValueType extends TaxonomicFilterValue = Taxono
     }, [value])
 
     return (
-        <div className="LemonButtonWithSideAction">
-            <LemonDropdown
-                overlay={
-                    <TaxonomicFilter
-                        groupType={groupType}
-                        value={value}
-                        onChange={({ type }, payload, item) => {
-                            onChange?.(payload as ValueType, type, item)
-                            setVisible(false)
-                        }}
-                        taxonomicGroupTypes={groupTypes ?? [groupType]}
-                        eventNames={eventNames}
-                        hogQLTable={hogQLTable}
-                        excludedProperties={excludedProperties}
-                    />
-                }
-                sameWidth={false}
-                actionable
-                visible={visible}
-                onClickOutside={() => {
-                    setVisible(false)
-                }}
-            >
-                {isClearButtonShown ? (
-                    <LemonButton
-                        sideAction={{
-                            icon: <IconClose />,
-                            tooltip: 'Clear selection',
-                            onClick: (e) => {
-                                e.stopPropagation()
-                                onChange?.('' as ValueType, groupType, null)
-                                setLocalValue('' as ValueType)
-                            },
-                            divider: false,
-                        }}
-                        {...buttonPropsFinal}
-                    />
-                ) : (
-                    <LemonButton {...buttonPropsFinal} />
-                )}
-            </LemonDropdown>
-        </div>
+        <LemonDropdown
+            overlay={
+                <TaxonomicFilter
+                    groupType={groupType}
+                    value={value}
+                    onChange={({ type }, payload, item) => {
+                        onChange?.(payload as ValueType, type, item)
+                        setVisible(false)
+                    }}
+                    taxonomicGroupTypes={groupTypes ?? [groupType]}
+                    eventNames={eventNames}
+                    hogQLTable={hogQLTable}
+                    excludedProperties={excludedProperties}
+                />
+            }
+            sameWidth={false}
+            actionable
+            visible={visible}
+            onClickOutside={() => {
+                setVisible(false)
+            }}
+        >
+            {isClearButtonShown ? (
+                <LemonButton
+                    sideAction={{
+                        icon: <IconClose />,
+                        tooltip: 'Clear selection',
+                        onClick: (e) => {
+                            e.stopPropagation()
+                            onChange?.('' as ValueType, groupType, null)
+                            setLocalValue('' as ValueType)
+                        },
+                        divider: false,
+                    }}
+                    {...buttonPropsFinal}
+                />
+            ) : (
+                <LemonButton {...buttonPropsFinal} />
+            )}
+        </LemonDropdown>
     )
 }

frontend/src/lib/lemon-ui/LemonButton/LemonButton.scss

@@ -164,6 +164,11 @@
 
 .LemonButtonWithSideAction {
     position: relative;
+    width: fit-content;
+
+    &--full-width {
+        width: 100%;
+    }
 }
 
 .LemonButtonWithSideAction__spacer {

frontend/src/lib/lemon-ui/LemonButton/LemonButton.tsx

@@ -246,7 +246,12 @@ export const LemonButton: React.FunctionComponent<LemonButtonProps & React.RefAt
                 const SideComponent = sideDropdown ? LemonButtonWithDropdown : LemonButton
 
                 workingButton = (
-                    <div className="LemonButtonWithSideAction">
+                    <div
+                        className={clsx(
+                            'LemonButtonWithSideAction',
+                            fullWidth && 'LemonButtonWithSideAction--full-width'
+                        )}
+                    >
                         {workingButton}
                         <div className="LemonButtonWithSideAction__side-button">
                             <SideComponent

frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.stories.tsx

@@ -21,7 +21,7 @@ export default meta
 const Template: StoryFn<typeof LemonSelect> = (props: LemonSelectProps<any>) => {
     return (
         <div className="flex flex-row items-center w-full border p-4 gap-2">
-            {(['small', undefined] as const).map((size, index) => (
+            {(['small', 'medium', 'large', undefined] as const).map((size, index) => (
                 <div className="flex flex-col" key={index}>
                     <h5>size={capitalizeFirstLetter(size || 'unspecified')}</h5>
                     <LemonSelect {...props} size={size} />

frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.tsx

@@ -1,5 +1,3 @@
-import './LemonSelect.scss'
-
 import clsx from 'clsx'
 import React, { useMemo } from 'react'
 
@@ -143,12 +141,21 @@ export function LemonSelect<T extends string | number | boolean | null>({
             closeParentPopoverOnClickInside={menu?.closeParentPopoverOnClickInside}
         >
             <LemonButton
-                className={clsx(className, 'LemonSelect', isClearButtonShown && 'LemonSelect--clearable')}
+                className={clsx(className, 'LemonSelect')}
                 icon={activeLeaf?.icon}
-                // so that the pop-up isn't shown along with the close button
-                sideIcon={isClearButtonShown ? <></> : undefined}
                 type="secondary"
                 status="stealth"
+                sideAction={
+                    isClearButtonShown
+                        ? {
+                              icon: <IconClose />,
+                              divider: false,
+                              onClick: () => {
+                                  onChange?.(null as T)
+                              },
+                          }
+                        : null
+                }
                 {...buttonProps}
             >
                 <span className="flex flex-1">
@@ -158,19 +165,6 @@ export function LemonSelect<T extends string | number | boolean | null>({
                         ? activeLeaf.label
                         : value ?? <span className="text-muted">{placeholder}</span>}
                 </span>
-                {isClearButtonShown && (
-                    <LemonButton
-                        className="LemonSelect--button--clearable"
-                        type="tertiary"
-                        status="stealth"
-                        noPadding
-                        icon={<IconClose />}
-                        tooltip="Clear selection"
-                        onClick={() => {
-                            onChange?.(null as T)
-                        }}
-                    />
-                )}
             </LemonButton>
         </LemonMenu>
     )