Make add group button same height as group names (#890)

web/components/contract/contract-details.tsx

@@ -127,11 +127,7 @@ export function ContractDetails(props: {
       {/* GROUPS */}
       {isMobile && (
         <div className="mt-2">
-          <MarketGroups
-            contract={contract}
-            isMobile={isMobile}
-            disabled={disabled}
-          />
+          <MarketGroups contract={contract} disabled={disabled} />
         </div>
       )}
     </Col>
@@ -182,11 +178,7 @@ export function MarketSubheader(props: {
             isCreator={isCreator}
           />
           {!isMobile && (
-            <MarketGroups
-              contract={contract}
-              isMobile={isMobile}
-              disabled={disabled}
-            />
+            <MarketGroups contract={contract} disabled={disabled} />
           )}
         </Row>
       </Col>
@@ -233,31 +225,26 @@ export function CloseOrResolveTime(props: {
 
 export function MarketGroups(props: {
   contract: Contract
-  isMobile: boolean | undefined
-  disabled: boolean | undefined
+  disabled?: boolean
 }) {
   const [open, setOpen] = useState(false)
   const user = useUser()
-  const { contract, isMobile, disabled } = props
+  const { contract, disabled } = props
   const groupToDisplay = getGroupLinkToDisplay(contract)
 
   return (
     <>
-      <Row className="align-middle">
-        <GroupDisplay groupToDisplay={groupToDisplay} isMobile={isMobile} />
-        {!disabled && (
-          <Row>
-            {user && (
+      <Row className="items-center gap-1">
+        <GroupDisplay groupToDisplay={groupToDisplay} />
+        {!disabled && user && (
           <button
             className="text-greyscale-4 hover:text-greyscale-3"
-                onClick={() => setOpen(!open)}
+            onClick={() => setOpen(true)}
           >
-                <PlusCircleIcon className="mb-0.5 mr-0.5 inline h-4 w-4 shrink-0" />
+            <PlusCircleIcon className="h-[18px]" />
           </button>
         )}
       </Row>
-        )}
-      </Row>
       <Modal open={open} setOpen={setOpen} size={'md'}>
         <Col
           className={
@@ -333,42 +320,21 @@ export function ExtraMobileContractDetails(props: {
   )
 }
 
-export function GroupDisplay(props: {
-  groupToDisplay?: GroupLink | null
-  isMobile?: boolean
-}) {
-  const { groupToDisplay, isMobile } = props
+export function GroupDisplay(props: { groupToDisplay?: GroupLink | null }) {
+  const { groupToDisplay } = 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">
+        <a className="bg-greyscale-4 hover:bg-greyscale-3 max-w-[140px] truncate rounded-full px-2 text-xs text-white sm:max-w-[250px]">
           {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'
-          )}
-        >
+      <div className="bg-greyscale-4 truncate rounded-full px-2 text-xs text-white">
         No Group
       </div>
-      </Row>
     )
 }
 

web/hooks/use-is-mobile.ts

@@ -1,6 +1,7 @@
 import { useWindowSize } from 'web/hooks/use-window-size'
 
+// matches talwind sm breakpoint
 export function useIsMobile() {
   const { width } = useWindowSize()
-  return (width ?? 0) < 600
+  return (width ?? 0) < 640
 }