Align selects ranges and modal catalog

packages/ui-react/src/Select.tsx

@@ -75,8 +75,8 @@ export function Select<T extends string>({
         if (variant === "split") {
           return (
             <div className={cn("nodedc-select", triggerClassName)}>
-              <div className="nodedc-select__control">
-                <div ref={setTriggerRef} className="nodedc-select__value">
+              <div ref={setTriggerRef} className="nodedc-select__control">
+                <div className="nodedc-select__value">
                   {selected?.icon ? <span className="nodedc-select__value-icon">{selected.icon}</span> : null}
                   <span>{selected?.label ?? "—"}</span>
                 </div>
@@ -111,7 +111,7 @@ export function Select<T extends string>({
             onClick={toggle}
             onKeyDown={handleKeyDown}
           >
-            {selected?.icon ?? null}
+            {selected?.icon ? <span className="nodedc-select-trigger__icon">{selected.icon}</span> : <span className="nodedc-select-trigger__icon" aria-hidden="true" />}
             <span className="nodedc-select-trigger__label">{selected?.label ?? "—"}</span>
             <span className="nodedc-select-trigger__chevron" aria-hidden="true" />
           </button>