From e2387f8a007c512df88d617faf9a59bbd79dcd09 Mon Sep 17 00:00:00 2001
From: David Newell <david@posthog.com>
Date: Tue, 31 Oct 2023 17:47:24 +0000
Subject: [PATCH] drop eslint back to warn

---
 .eslintrc.js                                      |  2 +-
 .../CohortFilters/CohortCriteriaGroups.tsx        |  2 +-
 .../CohortFilters/CohortCriteriaRowBuilder.tsx    |  2 +-
 .../scenes/dashboard/DashboardCollaborators.tsx   |  7 +------
 .../scenes/dashboard/dashboards/NoDashboards.tsx  |  4 ++--
 .../ExperimentImplementationDetails.tsx           |  2 +-
 .../src/scenes/experiments/ExperimentPreview.tsx  |  2 +-
 frontend/src/scenes/feature-flags/FeatureFlag.tsx |  2 +-
 .../scenes/funnels/FunnelBarGraph/MetricRow.tsx   |  2 +-
 .../scenes/insights/views/Histogram/Histogram.tsx |  1 +
 .../instance/DeadLetterQueue/MetricsTab.tsx       |  7 +------
 .../instance/SystemStatus/KafkaInspectorTab.tsx   |  6 ++----
 .../instance/SystemStatus/StaffUsersTab.tsx       | 15 ++++-----------
 .../src/scenes/organization/Settings/Invites.tsx  |  2 +-
 .../Settings/Permissions/Permissions.tsx          |  2 +-
 .../Settings/Permissions/Roles/Roles.tsx          |  2 +-
 .../Settings/VerifiedDomains/VerifiedDomains.tsx  |  2 +-
 frontend/src/scenes/plugins/edit/PluginField.tsx  |  2 +-
 .../src/scenes/plugins/plugin/PluginImage.tsx     |  1 +
 frontend/src/scenes/plugins/plugin/PluginLogs.tsx | 12 ++++++------
 .../src/scenes/plugins/source/PluginSource.tsx    |  4 ++--
 .../tabs/apps/InstalledAppsReorderModal.tsx       |  1 +
 .../scenes/project/Settings/ExtraTeamSettings.tsx |  2 +-
 frontend/src/scenes/project/Settings/index.tsx    |  2 +-
 .../player/controller/Seekbar.tsx                 |  2 +-
 .../scenes/session-recordings/player/icons.tsx    |  2 +-
 frontend/src/scenes/surveys/SurveyEdit.tsx        | 10 ++--------
 frontend/src/scenes/surveys/SurveyView.tsx        |  2 +-
 28 files changed, 40 insertions(+), 62 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index a8cab4bc51100..4fddbfc6a37f2 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -86,7 +86,7 @@ module.exports = {
             },
         ],
         'react/forbid-dom-props': [
-            'error',
+            'warn',
             {
                 forbid: [
                     {
diff --git a/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaGroups.tsx b/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaGroups.tsx
index 2b224341715ae..85696488784ae 100644
--- a/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaGroups.tsx
+++ b/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaGroups.tsx
@@ -48,7 +48,7 @@ export function CohortCriteriaGroups(logicProps: CohortLogicProps): JSX.Element
                                                 onChange={(value) => setInnerGroupType(value, groupIndex)}
                                                 value={group.type}
                                             />
-                                            <div style={{ flex: 1, minWidth: '0.5rem' }} />
+                                            <div className="flex-1 min-w-2" />
                                             <LemonButton
                                                 icon={<IconCopy />}
                                                 status="primary-alt"
diff --git a/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.tsx b/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.tsx
index 07a5db01a4dbf..f767a78fb4b03 100644
--- a/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.tsx
+++ b/frontend/src/scenes/cohorts/CohortFilters/CohortCriteriaRowBuilder.tsx
@@ -121,7 +121,7 @@ export function CohortCriteriaRowBuilder({
                             />
                         )}
                     </Row>
-                    <div style={{ display: 'flex' }}>
+                    <div className="flex">
                         <Col>
                             <span className="CohortCriteriaRow__Criteria__arrow">&#8627;</span>
                         </Col>
diff --git a/frontend/src/scenes/dashboard/DashboardCollaborators.tsx b/frontend/src/scenes/dashboard/DashboardCollaborators.tsx
index 2c91d4ff3000c..4f13b597f8fee 100644
--- a/frontend/src/scenes/dashboard/DashboardCollaborators.tsx
+++ b/frontend/src/scenes/dashboard/DashboardCollaborators.tsx
@@ -88,12 +88,7 @@ export function DashboardCollaboration({ dashboardId }: { dashboardId: Dashboard
                                 </div>
                             )}
                             <h5 className="mt-4">Project members with access</h5>
-                            <div
-                                className="mt-2 pb-2 rounded overflow-y-auto"
-                                style={{
-                                    maxHeight: 300,
-                                }}
-                            >
+                            <div className="mt-2 pb-2 rounded overflow-y-auto" style={{ maxHeight: 300 }}>
                                 {allCollaborators.map((collaborator) => (
                                     <CollaboratorRow
                                         key={collaborator.user.uuid}
diff --git a/frontend/src/scenes/dashboard/dashboards/NoDashboards.tsx b/frontend/src/scenes/dashboard/dashboards/NoDashboards.tsx
index d238d6276f645..e7a29f4cfa63b 100644
--- a/frontend/src/scenes/dashboard/dashboards/NoDashboards.tsx
+++ b/frontend/src/scenes/dashboard/dashboards/NoDashboards.tsx
@@ -21,7 +21,7 @@ export const NoDashboards = (): JSX.Element => {
                         })
                     }
                 >
-                    <div style={{ textAlign: 'center', fontSize: 40 }}>
+                    <div className="text-4xl text-center">
                         <AppstoreAddOutlined />
                     </div>
                 </Card>
@@ -36,7 +36,7 @@ export const NoDashboards = (): JSX.Element => {
                         })
                     }
                 >
-                    <div style={{ textAlign: 'center', fontSize: 40 }}>
+                    <div className="text-4xl text-center">
                         <AppstoreAddOutlined />
                     </div>
                 </Card>
diff --git a/frontend/src/scenes/experiments/ExperimentImplementationDetails.tsx b/frontend/src/scenes/experiments/ExperimentImplementationDetails.tsx
index 9653d430b1682..8582017bb7bcb 100644
--- a/frontend/src/scenes/experiments/ExperimentImplementationDetails.tsx
+++ b/frontend/src/scenes/experiments/ExperimentImplementationDetails.tsx
@@ -111,7 +111,7 @@ export function ExperimentImplementationDetails({ experiment }: ExperimentImplem
             title={<span className="card-secondary">Feature flag usage and implementation</span>}
             className="experiment-implementation-details"
         >
-            <div style={{ justifyContent: 'space-between' }} className="flex mb-2">
+            <div className="flex mb-2 justify-between">
                 <div>
                     <span className="mr-2">Variant group</span>
                     <Select
diff --git a/frontend/src/scenes/experiments/ExperimentPreview.tsx b/frontend/src/scenes/experiments/ExperimentPreview.tsx
index 928d4e6d3a97f..ce953235e00de 100644
--- a/frontend/src/scenes/experiments/ExperimentPreview.tsx
+++ b/frontend/src/scenes/experiments/ExperimentPreview.tsx
@@ -225,7 +225,7 @@ export function ExperimentPreview({
                         </Col>
                         <Col span={12}>
                             <div className="card-secondary">Participants</div>
-                            <div style={{ display: 'inline-block' }}>
+                            <div className="inline-block">
                                 {targetingProperties ? (
                                     <>
                                         {groupFilters(targetingProperties, undefined, aggregationLabel)}
diff --git a/frontend/src/scenes/feature-flags/FeatureFlag.tsx b/frontend/src/scenes/feature-flags/FeatureFlag.tsx
index 8de7aa6162fed..3ad12a2d39109 100644
--- a/frontend/src/scenes/feature-flags/FeatureFlag.tsx
+++ b/frontend/src/scenes/feature-flags/FeatureFlag.tsx
@@ -890,7 +890,7 @@ function FeatureFlagRollout({ readOnly }: { readOnly?: boolean }): JSX.Element {
                             <Col span={4}>Variant key</Col>
                             <Col span={6}>Description</Col>
                             <Col span={8}>
-                                <div style={{ display: 'flex', flexDirection: 'column', fontWeight: 'normal' }}>
+                                <div className="flex flex-col" style={{ fontWeight: 'normal' }}>
                                     <b>Payload</b>
                                     <span className="text-muted">
                                         Specify return payload when the variant key matches
diff --git a/frontend/src/scenes/funnels/FunnelBarGraph/MetricRow.tsx b/frontend/src/scenes/funnels/FunnelBarGraph/MetricRow.tsx
index c99395631187e..7863e7770d3b3 100644
--- a/frontend/src/scenes/funnels/FunnelBarGraph/MetricRow.tsx
+++ b/frontend/src/scenes/funnels/FunnelBarGraph/MetricRow.tsx
@@ -1,6 +1,6 @@
 export function MetricRow({ title, value }: { title: string; value: string | number }): JSX.Element {
     return (
-        <div style={{ width: '100%', display: 'flex', justifyContent: 'space-between' }}>
+        <div className="flex justify-between w-full">
             <div>{title}</div>
             <div>
                 <strong style={{ paddingLeft: 6 }}>{value}</strong>
diff --git a/frontend/src/scenes/insights/views/Histogram/Histogram.tsx b/frontend/src/scenes/insights/views/Histogram/Histogram.tsx
index d3abb1548470c..11671e289ecae 100644
--- a/frontend/src/scenes/insights/views/Histogram/Histogram.tsx
+++ b/frontend/src/scenes/insights/views/Histogram/Histogram.tsx
@@ -260,5 +260,6 @@ export function Histogram({
 
     /* minWidth required to enforce d3's width calculations on the div wrapping the svg
      so that scrolling horizontally works */
+    //  eslint-disable-next-line react/forbid-dom-props
     return <div className="histogram-container" ref={ref} style={{ minWidth: config.width }} />
 }
diff --git a/frontend/src/scenes/instance/DeadLetterQueue/MetricsTab.tsx b/frontend/src/scenes/instance/DeadLetterQueue/MetricsTab.tsx
index 6a2a344c78ef9..901500d92a6c4 100644
--- a/frontend/src/scenes/instance/DeadLetterQueue/MetricsTab.tsx
+++ b/frontend/src/scenes/instance/DeadLetterQueue/MetricsTab.tsx
@@ -71,12 +71,7 @@ export function MetricsTab(): JSX.Element {
                         }}
                         embedded
                     />
-                    <div
-                        style={{
-                            margin: '1rem',
-                            textAlign: 'center',
-                        }}
-                    >
+                    <div className="m-4 text-center">
                         <Button
                             disabled={rowsPerMetric[row.key].length % ROWS_LIMIT !== 0}
                             onClick={() => loadMoreRows(row.key)}
diff --git a/frontend/src/scenes/instance/SystemStatus/KafkaInspectorTab.tsx b/frontend/src/scenes/instance/SystemStatus/KafkaInspectorTab.tsx
index 7094709a14eaa..a61d9eb7e20cb 100644
--- a/frontend/src/scenes/instance/SystemStatus/KafkaInspectorTab.tsx
+++ b/frontend/src/scenes/instance/SystemStatus/KafkaInspectorTab.tsx
@@ -10,13 +10,11 @@ export function KafkaInspectorTab(): JSX.Element {
 
     return (
         <div>
-            <h3 className="l3" style={{ marginTop: 16 }}>
-                Kafka Inspector
-            </h3>
+            <h3 className="l3 mt-4">Kafka Inspector</h3>
             <div className="mb-4">Debug Kafka messages using the inspector tool.</div>
             <Divider style={{ margin: 0, marginBottom: 16 }} />
             <section>
-                <div style={{ display: 'flex', marginBottom: '0.75rem' }}>
+                <div className="flex mb-3">
                     <Form
                         logic={kafkaInspectorLogic}
                         formKey="fetchKafkaMessage"
diff --git a/frontend/src/scenes/instance/SystemStatus/StaffUsersTab.tsx b/frontend/src/scenes/instance/SystemStatus/StaffUsersTab.tsx
index d7d0b71988eaa..cfcada8219bcd 100644
--- a/frontend/src/scenes/instance/SystemStatus/StaffUsersTab.tsx
+++ b/frontend/src/scenes/instance/SystemStatus/StaffUsersTab.tsx
@@ -67,16 +67,11 @@ export function StaffUsersTab(): JSX.Element {
                                 okType: 'primary',
                                 okButtonProps: { className: 'btn-danger' },
                                 content: (
-                                    <div style={{ border: '' }}>
+                                    <div className="border-none">
                                         {myself?.uuid === user.uuid ? (
                                             <>
                                                 Please confirm you want to <b>remove yourself</b> as a staff user.
-                                                <div
-                                                    style={{
-                                                        fontWeight: 'normal',
-                                                        color: 'var(--muted-alt)',
-                                                    }}
-                                                >
+                                                <div className="font-normal" style={{ color: 'var(--muted-alt)' }}>
                                                     Only another staff user will be able to add you again.
                                                 </div>
                                             </>
@@ -99,9 +94,7 @@ export function StaffUsersTab(): JSX.Element {
 
     return (
         <div>
-            <h3 className="l3" style={{ marginTop: 16 }}>
-                Staff Users
-            </h3>
+            <h3 className="l3 mt-4">Staff Users</h3>
             <div className="mb-4">
                 Users who have permissions to manage instance-wide settings. Staff user permissions are set at the{' '}
                 <b>instance-level and are independent of any organization or project permissions.</b>{' '}
@@ -113,7 +106,7 @@ export function StaffUsersTab(): JSX.Element {
             <Divider style={{ margin: 0, marginBottom: 16 }} />
             <section>
                 <div className="flex gap-2 mb-4">
-                    <div style={{ flex: 1 }}>
+                    <div className="flex-1">
                         <LemonSelectMultiple
                             placeholder="Add staff users here…"
                             loading={allUsersLoading}
diff --git a/frontend/src/scenes/organization/Settings/Invites.tsx b/frontend/src/scenes/organization/Settings/Invites.tsx
index 4fe50084b5b95..ada95fcca7147 100644
--- a/frontend/src/scenes/organization/Settings/Invites.tsx
+++ b/frontend/src/scenes/organization/Settings/Invites.tsx
@@ -98,7 +98,7 @@ export function Invites(): JSX.Element {
 
     return (
         <div>
-            <h2 id="invites" className="subtitle" style={{ justifyContent: 'space-between' }}>
+            <h2 id="invites" className="subtitle justify-between">
                 Pending Invites
                 <LemonButton type="primary" onClick={showInviteModal} data-attr="invite-teammate-button">
                     Invite team member
diff --git a/frontend/src/scenes/organization/Settings/Permissions/Permissions.tsx b/frontend/src/scenes/organization/Settings/Permissions/Permissions.tsx
index 65213ed128481..7adcbed6a3621 100644
--- a/frontend/src/scenes/organization/Settings/Permissions/Permissions.tsx
+++ b/frontend/src/scenes/organization/Settings/Permissions/Permissions.tsx
@@ -54,7 +54,7 @@ export function Permissions({ isRestricted }: RestrictedComponentProps): JSX.Ele
     return (
         <>
             <div className="flex items-center">
-                <div style={{ flexGrow: 1 }}>
+                <div className="grow">
                     <h2 id="roles" className="subtitle">
                         Permission Defaults
                     </h2>
diff --git a/frontend/src/scenes/organization/Settings/Permissions/Roles/Roles.tsx b/frontend/src/scenes/organization/Settings/Permissions/Roles/Roles.tsx
index 50ca6b37b6214..915433298a2d3 100644
--- a/frontend/src/scenes/organization/Settings/Permissions/Roles/Roles.tsx
+++ b/frontend/src/scenes/organization/Settings/Permissions/Roles/Roles.tsx
@@ -58,7 +58,7 @@ export function Roles({ isRestricted }: RestrictedComponentProps): JSX.Element {
     return (
         <>
             <div className="flex items-center">
-                <div style={{ flexGrow: 1 }}>
+                <div className="grow">
                     <h2 id="roles" className="subtitle">
                         Roles
                     </h2>
diff --git a/frontend/src/scenes/organization/Settings/VerifiedDomains/VerifiedDomains.tsx b/frontend/src/scenes/organization/Settings/VerifiedDomains/VerifiedDomains.tsx
index 885fd6d4ccfda..75c814e69ce4f 100644
--- a/frontend/src/scenes/organization/Settings/VerifiedDomains/VerifiedDomains.tsx
+++ b/frontend/src/scenes/organization/Settings/VerifiedDomains/VerifiedDomains.tsx
@@ -27,7 +27,7 @@ export function VerifiedDomains(): JSX.Element {
     return (
         <>
             <div className="flex items-center">
-                <div style={{ flexGrow: 1 }}>
+                <div className="grow">
                     <div id="domain-whitelist" /> {/** For backwards link compatibility. Remove after 2022-06-01. */}
                     <h2 id="authentication-domains" className="subtitle">
                         Authentication domains
diff --git a/frontend/src/scenes/plugins/edit/PluginField.tsx b/frontend/src/scenes/plugins/edit/PluginField.tsx
index b57d47e1da5b2..af6438f790e06 100644
--- a/frontend/src/scenes/plugins/edit/PluginField.tsx
+++ b/frontend/src/scenes/plugins/edit/PluginField.tsx
@@ -77,7 +77,7 @@ export function PluginField({
             ))}
         </Select>
     ) : (
-        <strong style={{ color: 'var(--danger)' }}>
+        <strong className="text-danger">
             Unknown field type "<code>{fieldConfig.type}</code>".
             <br />
             You may need to upgrade PostHog!
diff --git a/frontend/src/scenes/plugins/plugin/PluginImage.tsx b/frontend/src/scenes/plugins/plugin/PluginImage.tsx
index 67120a11074d8..9fec8b6275e9e 100644
--- a/frontend/src/scenes/plugins/plugin/PluginImage.tsx
+++ b/frontend/src/scenes/plugins/plugin/PluginImage.tsx
@@ -42,6 +42,7 @@ export function PluginImage({
     ) : (
         <div
             className="plugin-image shrink-0"
+            // eslint-disable-next-line react/forbid-dom-props
             style={{
                 width: pixelSize,
                 height: pixelSize,
diff --git a/frontend/src/scenes/plugins/plugin/PluginLogs.tsx b/frontend/src/scenes/plugins/plugin/PluginLogs.tsx
index 445bc13974fb2..a8e482233a7cc 100644
--- a/frontend/src/scenes/plugins/plugin/PluginLogs.tsx
+++ b/frontend/src/scenes/plugins/plugin/PluginLogs.tsx
@@ -11,24 +11,24 @@ function PluginLogEntryTypeDisplay(type: PluginLogEntryType): JSX.Element {
     let color: string | undefined
     switch (type) {
         case PluginLogEntryType.Debug:
-            color = 'var(--muted)'
+            color = 'text-muted'
             break
         case PluginLogEntryType.Log:
-            color = 'var(--default)'
+            color = 'text-default'
             break
         case PluginLogEntryType.Info:
-            color = 'var(--blue)'
+            color = 'text-primary'
             break
         case PluginLogEntryType.Warn:
-            color = 'var(--warning)'
+            color = 'text-warning'
             break
         case PluginLogEntryType.Error:
-            color = 'var(--danger)'
+            color = 'text-danger'
             break
         default:
             break
     }
-    return <span style={{ color }}>{type}</span>
+    return <span className={color}>{type}</span>
 }
 
 const columns: ResizableColumnType<PluginLogEntry>[] = [
diff --git a/frontend/src/scenes/plugins/source/PluginSource.tsx b/frontend/src/scenes/plugins/source/PluginSource.tsx
index f7a9e283bcef9..248d5f13b385b 100644
--- a/frontend/src/scenes/plugins/source/PluginSource.tsx
+++ b/frontend/src/scenes/plugins/source/PluginSource.tsx
@@ -79,7 +79,7 @@ export function PluginSource({
             title={pluginSourceLoading ? 'Loading...' : `Edit App: ${name}`}
             placement={placement ?? 'left'}
             footer={
-                <div style={{ textAlign: 'right' }}>
+                <div className="text-right">
                     <Button onClick={closePluginSource} style={{ marginRight: 16 }}>
                         Close
                     </Button>
@@ -125,7 +125,7 @@ export function PluginSource({
                                                 }}
                                             />
                                             {!value && createDefaultPluginSource(name)[currentFile] ? (
-                                                <div style={{ marginTop: '0.5rem' }}>
+                                                <div className="mt-2">
                                                     <LemonButton
                                                         type="primary"
                                                         onClick={() =>
diff --git a/frontend/src/scenes/plugins/tabs/apps/InstalledAppsReorderModal.tsx b/frontend/src/scenes/plugins/tabs/apps/InstalledAppsReorderModal.tsx
index 1e5e0ad81b897..382a157bbbf6f 100644
--- a/frontend/src/scenes/plugins/tabs/apps/InstalledAppsReorderModal.tsx
+++ b/frontend/src/scenes/plugins/tabs/apps/InstalledAppsReorderModal.tsx
@@ -16,6 +16,7 @@ const MinimalAppView = ({ plugin, order }: { plugin: PluginTypeWithConfig; order
         <div
             ref={setNodeRef}
             className="flex gap-2 cursor-move border rounded p-2 items-center bg-bg-light"
+            // eslint-disable-next-line react/forbid-dom-props
             style={{
                 position: 'relative',
                 transform: CSS.Transform.toString(transform),
diff --git a/frontend/src/scenes/project/Settings/ExtraTeamSettings.tsx b/frontend/src/scenes/project/Settings/ExtraTeamSettings.tsx
index 7c8be42a75ede..c9c71ca17daf7 100644
--- a/frontend/src/scenes/project/Settings/ExtraTeamSettings.tsx
+++ b/frontend/src/scenes/project/Settings/ExtraTeamSettings.tsx
@@ -43,7 +43,7 @@ function ExtraSettingInput({
     const [value, setValue] = useState(defaultValue)
 
     return (
-        <div className="space-y-4" style={{ maxWidth: '40rem' }}>
+        <div className="space-y-4 max-w-160">
             <LemonInput value={value as any} onChange={setValue} disabled={currentTeamLoading} type={type as any} />
             <LemonButton
                 type="primary"
diff --git a/frontend/src/scenes/project/Settings/index.tsx b/frontend/src/scenes/project/Settings/index.tsx
index 927d296c47f94..dcf5c15091d50 100644
--- a/frontend/src/scenes/project/Settings/index.tsx
+++ b/frontend/src/scenes/project/Settings/index.tsx
@@ -56,7 +56,7 @@ function DisplayName(): JSX.Element {
     }
 
     return (
-        <div className="space-y-4" style={{ maxWidth: '40rem' }}>
+        <div className="space-y-4 max-w-160">
             <LemonInput value={name} onChange={setName} disabled={currentTeamLoading} />
             <LemonButton
                 type="primary"
diff --git a/frontend/src/scenes/session-recordings/player/controller/Seekbar.tsx b/frontend/src/scenes/session-recordings/player/controller/Seekbar.tsx
index c2ed3c6ef3bc1..56e771c9531d7 100644
--- a/frontend/src/scenes/session-recordings/player/controller/Seekbar.tsx
+++ b/frontend/src/scenes/session-recordings/player/controller/Seekbar.tsx
@@ -63,9 +63,9 @@ export function Seekbar(): JSX.Element {
                             ))}
                         </div>
 
-                        {/* eslint-disable-next-line react/forbid-dom-props */}
                         <div
                             className="PlayerSeekbar__currentbar"
+                            // eslint-disable-next-line react/forbid-dom-props
                             style={{ width: `${Math.max(thumbLeftPos, 0)}px` }}
                         />
                         {/* eslint-disable-next-line react/forbid-dom-props */}
diff --git a/frontend/src/scenes/session-recordings/player/icons.tsx b/frontend/src/scenes/session-recordings/player/icons.tsx
index 6fff14ba753b5..fa8a79d631150 100644
--- a/frontend/src/scenes/session-recordings/player/icons.tsx
+++ b/frontend/src/scenes/session-recordings/player/icons.tsx
@@ -10,7 +10,7 @@ export function IconWindowOld({ value, className = '', size = 'medium' }: IconWi
     const shortValue = typeof value === 'number' ? value : String(value).charAt(0)
     return (
         <div className={clsx('flex justify-center items-center relative shrink-0', className)}>
-            <span className="absolute font-semibold" style={{ fontSize: size === 'medium' ? 8 : 6, marginTop: 2 }}>
+            <span className="absolute font-semibold mt-0.5" style={{ fontSize: size === 'medium' ? 8 : 6 }}>
                 {shortValue}
             </span>
             <svg
diff --git a/frontend/src/scenes/surveys/SurveyEdit.tsx b/frontend/src/scenes/surveys/SurveyEdit.tsx
index 6918ab3a7c9ae..76f1140c09e95 100644
--- a/frontend/src/scenes/surveys/SurveyEdit.tsx
+++ b/frontend/src/scenes/surveys/SurveyEdit.tsx
@@ -699,13 +699,7 @@ export default function SurveyEdit(): JSX.Element {
                                                     description="Use the PostHog API to show/hide your survey programmatically"
                                                     value={SurveyType.API}
                                                 >
-                                                    <div
-                                                        style={{
-                                                            position: 'absolute',
-                                                            left: '1rem',
-                                                            width: 350,
-                                                        }}
-                                                    >
+                                                    <div className="absolute left-4" style={{ width: 350 }}>
                                                         <SurveyAPIEditor survey={survey} />
                                                     </div>
                                                 </PresentationTypeCard>
@@ -929,7 +923,7 @@ export default function SurveyEdit(): JSX.Element {
                 />
             </div>
             <LemonDivider vertical />
-            <div className="flex flex-col items-center h-full w-full sticky top-0 pt-8" style={{ maxWidth: 320 }}>
+            <div className="max-w-80 flex flex-col items-center h-full w-full sticky top-0 pt-8">
                 <SurveyFormAppearance
                     activePreview={selectedQuestion || 0}
                     survey={survey}
diff --git a/frontend/src/scenes/surveys/SurveyView.tsx b/frontend/src/scenes/surveys/SurveyView.tsx
index 0f3e3d8416aab..334027e67ba0d 100644
--- a/frontend/src/scenes/surveys/SurveyView.tsx
+++ b/frontend/src/scenes/surveys/SurveyView.tsx
@@ -213,7 +213,7 @@ export function SurveyView({ id }: { id: string }): JSX.Element {
                                                 </div>
                                             )}
                                             {survey.type !== SurveyType.API ? (
-                                                <div className="mt-6" style={{ maxWidth: 320 }}>
+                                                <div className="mt-6 max-w-80">
                                                     <SurveyFormAppearance
                                                         activePreview={selectedQuestion || 0}
                                                         survey={survey}