frontend/src/components/Combobox/Combobox.tsx

@@ -30,10 +30,10 @@ const widthClasses: Record<ComboboxSize, string> = {
 
 const dropdownWrapperClasses = 'absolute top-full left-0 z-50 w-full mt-(--spacing-sm)';
 
-function SearchIcon({ style }: { style?: React.CSSProperties }) {
+function SearchIcon({ className }: { className?: string }) {
     return (
         <svg
-            style={style}
+            className={className}
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
@@ -208,10 +208,10 @@ export default function Combobox({
         : customWidth
           ? 'relative'
           : `relative ${widthClasses[size]}`;
-    const containerStyle = customWidth ? { width: customWidth } : undefined;
+    const widthStyle = customWidth ? { width: customWidth } : undefined;
 
     return (
-        <div ref={containerRef} className={containerClasses} style={containerStyle}>
+        <div ref={containerRef} className={containerClasses} style={widthStyle}>
             <TextInput
                 value={displayValue}
                 onChange={handleInputChange}

frontend/src/components/ListCard/ListCard.tsx

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, CSSProperties } from 'react';
+import type { HTMLAttributes } from 'react';
 
 export interface ListCardProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
     title: string;
@@ -14,15 +14,12 @@ const baseClasses = [
     'focus-visible:border-primary focus-visible:border-[length:var(--border-width-sm)] focus-visible:outline focus-visible:outline-sky-100 focus-visible:outline-[length:var(--border-width-lg)]',
 ].join(' ');
 
-const iconStyles: CSSProperties = {
+const removeIconClasses = 'w-(--font-size-body-md) h-(--font-size-body-md)';
-    width: 'var(--font-size-body-md)',
-    height: 'var(--font-size-body-md)',
-};
 
-function RemoveIcon({ style }: { style?: CSSProperties }) {
+function RemoveIcon() {
     return (
         <svg
-            style={style}
+            className={removeIconClasses}
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
@@ -58,7 +55,7 @@ export default function ListCard({ title, subtitle = '', onRemove, className = '
                     onClick={onRemove}
                     className="shrink-0 ml-(--spacing-sm) text-base-ink-placeholder group-hover:text-base-ink-max group-focus-visible:text-base-ink-max focus-visible:outline-none cursor-pointer"
                 >
-                    <RemoveIcon style={iconStyles} />
+                    <RemoveIcon />
                 </button>
             )}
         </div>

frontend/src/components/ListItem/ListItem.tsx

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, CSSProperties } from 'react';
+import type { HTMLAttributes } from 'react';
 
 export interface ListItemProps extends HTMLAttributes<HTMLDivElement> {
     title: string;
@@ -7,22 +7,18 @@ export interface ListItemProps extends HTMLAttributes<HTMLDivElement> {
     focused?: boolean;
 }
 
-const iconStyles: CSSProperties = {
+const checkmarkIconClasses = 'w-(--font-size-body-md) h-(--font-size-body-md) ml-(--spacing-sm)';
-    width: 'var(--font-size-body-md)',
-    height: 'var(--font-size-body-md)',
-    marginLeft: 'var(--spacing-sm)',
-};
 
 function CheckmarkIcon() {
     return (
         <svg
+            className={checkmarkIconClasses}
             viewBox="0 0 24 24"
             fill="none"
             stroke="currentColor"
             strokeWidth="2"
             strokeLinecap="round"
             strokeLinejoin="round"
-            style={iconStyles}
         >
             <polyline points="20 6 9 17 4 12" />
         </svg>

frontend/src/components/ParticipantPicker/ParticipantPicker.tsx

@@ -44,10 +44,10 @@ export default function ParticipantPicker({
         : customWidth
           ? 'flex flex-col gap-(--spacing-sm)'
           : `flex flex-col gap-(--spacing-sm) ${widthClasses[size]}`;
-    const containerStyle = customWidth ? { width: customWidth } : undefined;
+    const widthStyle = customWidth ? { width: customWidth } : undefined;
 
     return (
-        <div className={containerClasses} style={containerStyle}>
+        <div className={containerClasses} style={widthStyle}>
             <Combobox
                 options={options}
                 value={value}