added embed fix

web/components/contract/contract-details.tsx

@@ -30,6 +30,7 @@ import { Tooltip } from 'web/components/tooltip'
 import { useWindowSize } from 'web/hooks/use-window-size'
 import { ExtraContractActionsRow } from './extra-contract-actions-row'
 import { PlusCircleIcon } from '@heroicons/react/solid'
+import { GroupLink } from 'common/group'
 
 export type ShowTime = 'resolve-date' | 'close-date'
 
@@ -115,6 +116,35 @@ export function useIsMobile() {
 export function ContractDetails(props: {
   contract: Contract
   disabled?: boolean
+}) {
+  const { contract, disabled } = props
+  const isMobile = useIsMobile()
+
+  return (
+    <Col>
+      <Row className="justify-between">
+        <MarketSubheader contract={contract} disabled={disabled} />
+        <div className="mt-0">
+          <ExtraContractActionsRow contract={contract} />
+        </div>
+      </Row>
+      {/* GROUPS */}
+      {isMobile && (
+        <div className="mt-2">
+          <MarketGroups
+            contract={contract}
+            isMobile={isMobile}
+            disabled={disabled}
+          />
+        </div>
+      )}
+    </Col>
+  )
+}
+
+export function MarketSubheader(props: {
+  contract: Contract
+  disabled?: boolean
 }) {
   const { contract, disabled } = props
   const { creatorName, creatorUsername, creatorId, creatorAvatarUrl } = contract
@@ -122,9 +152,7 @@ export function ContractDetails(props: {
   const user = useUser()
   const isCreator = user?.id === creatorId
   const isMobile = useIsMobile()
-
   return (
-    <Col>
     <Row>
       <Avatar
         username={creatorUsername}
@@ -166,21 +194,7 @@ export function ContractDetails(props: {
           )}
         </Row>
       </Col>
-        <div className="mt-0">
-          <ExtraContractActionsRow contract={contract} />
-        </div>
     </Row>
-      {/* GROUPS */}
-      {isMobile && (
-        <div className="mt-2">
-          <MarketGroups
-            contract={contract}
-            isMobile={isMobile}
-            disabled={disabled}
-          />
-        </div>
-      )}
-    </Col>
   )
 }
 
@@ -231,43 +245,13 @@ export function MarketGroups(props: {
   const user = useUser()
   const { contract, isMobile, disabled } = props
   const groupToDisplay = getGroupLinkToDisplay(contract)
-  const groupInfo = groupToDisplay ? (
+
-    <Link prefetch={false} href={groupPath(groupToDisplay.slug)}>
-      <a
-        className={clsx(
-          'flex flex-row items-center truncate pr-1',
-          isMobile ? 'max-w-[140px]' : 'max-w-[250px]'
-        )}
-      >
-        <div className="bg-greyscale-4 hover:bg-greyscale-3 text-2xs items-center truncate rounded-full px-2 text-white sm:text-xs">
-          {groupToDisplay.name}
-        </div>
-      </a>
-    </Link>
-  ) : (
-    <Row
-      className={clsx(
-        'cursor-default select-none items-center truncate pr-1',
-        isMobile ? 'max-w-[140px]' : 'max-w-[250px]'
-      )}
-    >
-      <div
-        className={clsx(
-          'bg-greyscale-4 text-2xs items-center truncate rounded-full px-2 text-white sm:text-xs'
-        )}
-      >
-        No Group
-      </div>
-    </Row>
-  )
   return (
     <>
       <Row className="align-middle">
-        {disabled ? (
+        <GroupDisplay groupToDisplay={groupToDisplay} isMobile={isMobile} />
-          { groupInfo }
+        {!disabled && (
-        ) : (
           <Row>
-            {groupInfo}
             {user && (
               <button
                 className="text-greyscale-4 hover:text-greyscale-3"
@@ -354,6 +338,45 @@ export function ExtraMobileContractDetails(props: {
   )
 }
 
+export function GroupDisplay(props: {
+  groupToDisplay: GroupLink
+  isMobile: boolean
+}) {
+  const { groupToDisplay, isMobile } = props
+  if (groupToDisplay) {
+    return (
+      <Link prefetch={false} href={groupPath(groupToDisplay.slug)}>
+        <a
+          className={clsx(
+            'flex flex-row items-center truncate pr-1',
+            isMobile ? 'max-w-[140px]' : 'max-w-[250px]'
+          )}
+        >
+          <div className="bg-greyscale-4 hover:bg-greyscale-3 text-2xs items-center truncate rounded-full px-2 text-white sm:text-xs">
+            {groupToDisplay.name}
+          </div>
+        </a>
+      </Link>
+    )
+  } else
+    return (
+      <Row
+        className={clsx(
+          'cursor-default select-none items-center truncate pr-1',
+          isMobile ? 'max-w-[140px]' : 'max-w-[250px]'
+        )}
+      >
+        <div
+          className={clsx(
+            'bg-greyscale-4 text-2xs items-center truncate rounded-full px-2 text-white sm:text-xs'
+          )}
+        >
+          No Group
+        </div>
+      </Row>
+    )
+}
+
 function EditableCloseDate(props: {
   closeTime: number
   contract: Contract

web/pages/embed/[username]/[contractSlug].tsx

@@ -11,7 +11,7 @@ import {
   NumericResolutionOrExpectation,
   PseudoNumericResolutionOrExpectation,
 } from 'web/components/contract/contract-card'
-import { ContractDetails } from 'web/components/contract/contract-details'
+import { MarketSubheader } from 'web/components/contract/contract-details'
 import { ContractProbGraph } from 'web/components/contract/contract-prob-graph'
 import { NumericGraph } from 'web/components/contract/numeric-graph'
 import { Col } from 'web/components/layout/col'
@@ -102,15 +102,29 @@ export function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
 
   return (
     <Col className="h-[100vh] w-full bg-white">
-      <div className="relative flex flex-col pt-2">
+      <Row className="justify-between gap-4 px-2">
-        <div className="px-3 text-xl text-indigo-700 md:text-2xl">
+        <div className="text-xl text-indigo-700 md:text-2xl">
           <SiteLink href={href}>{question}</SiteLink>
         </div>
+        {isBinary && (
+          <BinaryResolutionOrChance contract={contract} probAfter={probAfter} />
+        )}
 
+        {isPseudoNumeric && (
+          <PseudoNumericResolutionOrExpectation contract={contract} />
+        )}
+
+        {outcomeType === 'FREE_RESPONSE' && (
+          <FreeResponseResolutionOrChance contract={contract} truncate="long" />
+        )}
+
+        {outcomeType === 'NUMERIC' && (
+          <NumericResolutionOrExpectation contract={contract} />
+        )}
+      </Row>
       <Spacer h={3} />
-
       <Row className="items-center justify-between gap-4 px-2">
-          <ContractDetails contract={contract} disabled />
+        <MarketSubheader contract={contract} disabled />
 
         {(isBinary || isPseudoNumeric) &&
           tradingAllowed(contract) &&
@@ -119,33 +133,9 @@ export function ContractEmbed(props: { contract: Contract; bets: Bet[] }) {
               Predict
             </Button>
           )}
-
-          {isBinary && (
-            <BinaryResolutionOrChance
-              contract={contract}
-              probAfter={probAfter}
-              className="items-center"
-            />
-          )}
-
-          {isPseudoNumeric && (
-            <PseudoNumericResolutionOrExpectation contract={contract} />
-          )}
-
-          {outcomeType === 'FREE_RESPONSE' && (
-            <FreeResponseResolutionOrChance
-              contract={contract}
-              truncate="long"
-            />
-          )}
-
-          {outcomeType === 'NUMERIC' && (
-            <NumericResolutionOrExpectation contract={contract} />
-          )}
       </Row>
 
       <Spacer h={2} />
-      </div>
 
       {(isBinary || isPseudoNumeric) && betPanelOpen && (
         <BetInline