refactor: Replace style prop with utility css classes in frontend/src/lib

frontend/src/lib/components/Cards/InsightCard/InsightCard.stories.tsx

@@ -70,8 +70,7 @@ export const InsightCard: Story = (args) => {
     const [wasItemRemoved, setWasItemRemoved] = useState(false)
 
     return (
-        // eslint-disable-next-line react/forbid-dom-props
-        <div style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(2, 1fr)', minWidth: '50rem' }}>
+        <div className="grid gap-4 grid-cols-2 min-w-[50rem]">
             {!wasItemRemoved && (
                 <InsightCardComponent
                     insight={
@@ -194,8 +193,7 @@ export const InsightCard: Story = (args) => {
 
 export const QueryInsightCard: Story = (args) => {
     return (
-        // eslint-disable-next-line react/forbid-dom-props
-        <div style={{ display: 'grid', gap: '1rem', gridTemplateColumns: 'repeat(2, 1fr)', minWidth: '50rem' }}>
+        <div className="grid gap-4 grid-cols-2 min-w-[50rem]">
             {examples.map((insight) => {
                 // turn into HogQL based insight
                 if (!insight.filters.insight || insight.query) {

frontend/src/lib/components/CommandBar/CommandBar.tsx

@@ -20,16 +20,8 @@ const CommandBarOverlay = forwardRef<HTMLDivElement, CommandBarOverlayProps>(fun
     ref
 ): JSX.Element {
     return (
-        <div
-            className="fixed top-0 left-0 w-full h-full flex flex-col items-center justify-center p-3"
-            // eslint-disable-next-line react/forbid-dom-props
-            style={{
-                zIndex: 'var(--z-command-palette)',
-                backgroundColor: 'var(--modal-backdrop-color)',
-                backdropFilter: 'blur(var(--modal-backdrop-blur))',
-            }}
-        >
-            <div className="w-full h-full max-h-160 max-w-248 overflow-hidden">
+        <div className="CommandBar__overlay fixed">
+            <div className="CommandBar__overlay-content">
                 <div
                     data-attr="command-bar"
                     className={`w-full ${

frontend/src/lib/components/CommandBar/index.scss

@@ -20,3 +20,27 @@
     // offset container height by input
     height: calc(100% - 2.875rem);
 }
+
+.CommandBar__overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: var(--z-command-palette);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    padding: 0.75rem;
+    background-color: var(--modal-backdrop-color);
+    backdrop-filter: blur(var(--modal-backdrop-blur));
+
+    &-content {
+        width: 100%;
+        max-width: 62rem;
+        height: 100%;
+        max-height: 40rem;
+        overflow: hidden;
+    }
+}

frontend/src/lib/components/CompactList/CompactList.stories.tsx

@@ -21,8 +21,7 @@ export default meta
 export function CompactList_({ loading }: { loading: boolean }): JSX.Element {
     return (
         <div className="flex">
-            {/* eslint-disable-next-line react/forbid-dom-props */}
-            <div style={{ width: 350 }}>
+            <div className="w-80">
                 <CompactList
                     loading={loading}
                     title="Recent persons"
@@ -44,8 +43,7 @@ export function CompactList_({ loading }: { loading: boolean }): JSX.Element {
                     )}
                 />
             </div>
-            {/* eslint-disable-next-line react/forbid-dom-props */}
-            <div style={{ width: 350, marginLeft: 30 }}>
+            <div className="w-80 ml-8">
                 <CompactList
                     loading={loading}
                     title="Recordings"

frontend/src/lib/components/DateFilter/RollingDateRangeFilter.tsx

@@ -61,9 +61,7 @@ export function RollingDateRangeFilter({
             <p className="RollingDateRangeFilter__label">{dateRangeFilterLabel}</p>
             <div className="RollingDateRangeFilter__counter" onClick={(e): void => e.stopPropagation()}>
                 <span
-                    className="RollingDateRangeFilter__counter__step cursor-pointer"
-                    // eslint-disable-next-line react/forbid-dom-props
-                    style={{ background: 'none' }}
+                    className="RollingDateRangeFilter__counter__step cursor-pointer bg-transparent"
                     onClick={decreaseCounter}
                     title="Decrease rolling date range"
                 >
@@ -79,9 +77,7 @@ export function RollingDateRangeFilter({
                     onChange={(value) => setCounter(value)}
                 />
                 <span
-                    className="RollingDateRangeFilter__counter__step cursor-pointer"
-                    // eslint-disable-next-line react/forbid-dom-props
-                    style={{ background: 'none' }}
+                    className="RollingDateRangeFilter__counter__step cursor-pointer bg-transparent"
                     onClick={increaseCounter}
                     title="Increase rolling date range"
                 >

frontend/src/lib/components/DebugNotice.tsx

@@ -57,11 +57,7 @@ export function DebugNotice(): JSX.Element | null {
         )
     }
     return (
-        <div
-            className="border rounded bg-bg-3000 overflow-hidden mb-1.5 w-full font-mono max-w-60"
-            // eslint-disable-next-line react/forbid-dom-props
-            style={{ fontSize: 13 }} // utility classes don't have a 13px variant
-        >
+        <div className="border rounded bg-bg-3000 overflow-hidden mb-1.5 w-full font-mono max-w-60 text-[13px]">
             <div className="flex items-center gap-2 px-2 h-8 border-l-4 border-brand-blue justify-between">
                 <b>DEBUG mode</b>
                 <LemonButton

frontend/src/lib/components/HedgehogBuddy/HedgehogBuddy.stories.tsx

@@ -11,8 +11,7 @@ export default meta
 
 export const TheHedgehog: StoryFn<typeof MyHedgehogBuddy> = () => {
     return (
-        // eslint-disable-next-line react/forbid-dom-props
-        <div style={{ height: 200 }}>
+        <div className="h-52">
             <MyHedgehogBuddy
                 onClose={() => {
                     // eslint-disable-next-line no-console

frontend/src/lib/lemon-ui/LemonCalendar/LemonCalendarSelect.stories.tsx

@@ -23,8 +23,7 @@ const BasicTemplate: StoryFn<typeof LemonCalendarSelect> = (props: LemonCalendar
     const [granularity, setGranularity] = useState<LemonCalendarSelectProps['granularity']>(props.granularity)
 
     return (
-        // eslint-disable-next-line react/forbid-dom-props
-        <div style={{ paddingBottom: 500 }}>
+        <div className="pb-[30rem]">
             <Popover
                 actionable
                 overlay={

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

@@ -22,8 +22,7 @@ const BasicTemplate: StoryFn<typeof LemonCalendarRange> = (props: LemonCalendarR
     const [visible, setVisible] = useState(true)
 
     return (
-        // eslint-disable-next-line react/forbid-dom-props
-        <div style={{ paddingBottom: 500 }}>
+        <div className="pb-[30rem]">
             <Popover
                 actionable
                 overlay={