Remove some divs and so on

web/components/avatar.tsx

@@ -47,14 +47,21 @@ export function Avatar(props: {
   )
 }
 
-export function EmptyAvatar(props: { size?: number; multi?: boolean }) {
+export function EmptyAvatar(props: {
-  const { size = 8, multi } = props
+  className?: string
+  size?: number
+  multi?: boolean
+}) {
+  const { className, size = 8, multi } = props
   const insize = size - 3
   const Icon = multi ? UsersIcon : UserIcon
 
   return (
     <div
-      className={`flex flex-shrink-0 h-${size} w-${size} items-center justify-center rounded-full bg-gray-200`}
+      className={clsx(
+        `flex flex-shrink-0 h-${size} w-${size} items-center justify-center rounded-full bg-gray-200`,
+        className
+      )}
     >
       <Icon className={`h-${insize} w-${insize} text-gray-500`} aria-hidden />
     </div>

web/components/feed/feed-bets.tsx

@@ -36,38 +36,33 @@ export function FeedBet(props: {
   const isSelf = user?.id === userId
 
   return (
-    <>
+    <Row className={'flex w-full gap-2 pt-3'}>
-      <Row className={'flex w-full gap-2 pt-3'}>
+      {isSelf ? (
-        {isSelf ? (
+        <Avatar
-          <Avatar
+          className={clsx(smallAvatar && 'ml-1')}
-            className={clsx(smallAvatar && 'ml-1')}
+          size={smallAvatar ? 'sm' : undefined}
-            size={smallAvatar ? 'sm' : undefined}
+          avatarUrl={user.avatarUrl}
-            avatarUrl={user.avatarUrl}
+          username={user.username}
-            username={user.username}
+        />
-          />
+      ) : bettor ? (
-        ) : bettor ? (
+        <Avatar
-          <Avatar
+          className={clsx(smallAvatar && 'ml-1')}
-            className={clsx(smallAvatar && 'ml-1')}
+          size={smallAvatar ? 'sm' : undefined}
-            size={smallAvatar ? 'sm' : undefined}
+          avatarUrl={bettor.avatarUrl}
-            avatarUrl={bettor.avatarUrl}
+          username={bettor.username}
-            username={bettor.username}
+        />
-          />
+      ) : (
-        ) : (
+        <EmptyAvatar className="mx-1" />
-          <div className="relative px-1">
+      )}
-            <EmptyAvatar />
+      <BetStatusText
-          </div>
+        bet={bet}
-        )}
+        contract={contract}
-        <div className={'min-w-0 flex-1 py-1.5'}>
+        isSelf={isSelf}
-          <BetStatusText
+        bettor={bettor}
-            bet={bet}
+        hideOutcome={hideOutcome}
-            contract={contract}
+        className="min-w-0 flex-1 py-1.5"
-            isSelf={isSelf}
+      />
-            bettor={bettor}
+    </Row>
-            hideOutcome={hideOutcome}
-          />
-        </div>
-      </Row>
-    </>
   )
 }
 
@@ -77,8 +72,9 @@ export function BetStatusText(props: {
   isSelf: boolean
   bettor?: User
   hideOutcome?: boolean
+  className?: string
 }) {
-  const { bet, contract, bettor, isSelf, hideOutcome } = props
+  const { bet, contract, bettor, isSelf, hideOutcome, className } = props
   const { outcomeType } = contract
   const isPseudoNumeric = outcomeType === 'PSEUDO_NUMERIC'
   const isFreeResponse = outcomeType === 'FREE_RESPONSE'
@@ -123,7 +119,7 @@ export function BetStatusText(props: {
       : formatPercent(bet.limitProb ?? bet.probAfter)
 
   return (
-    <div className="text-sm text-gray-500">
+    <div className={clsx('text-sm text-gray-500', className)}>
       {bettor ? (
         <UserLink name={bettor.name} username={bettor.username} />
       ) : (