Groups UX on mobile

web/components/create-question-button.tsx

@@ -2,6 +2,8 @@ import Link from 'next/link'
 import clsx from 'clsx'
 import { firebaseLogin, User } from 'web/lib/firebase/users'
 import React from 'react'
+import { PlusIcon } from '@heroicons/react/outline'
+import { Row } from 'web/components/layout/row'
 
 export const createButtonStyle =
   'border-w-0 mx-auto mt-4 -ml-1 w-full rounded-md bg-gradient-to-r py-2.5 text-base font-semibold text-white shadow-sm lg:-ml-0 h-11'

web/components/groups/group-chat.tsx

@@ -97,7 +97,7 @@ export function GroupChat(props: {
   }
 
   return (
-    <Col className={'flex-1'}>
+    <Col className={'mt-2 flex-1'}>
       <Col
         className={
           'max-h-[65vh] w-full space-y-2 overflow-x-hidden overflow-y-scroll'

web/components/layout/tabs.tsx

@@ -16,14 +16,15 @@ export function Tabs(props: {
   defaultIndex?: number
   labelClassName?: string
   onClick?: (tabTitle: string, index: number) => void
+  className?: string
 }) {
-  const { tabs, defaultIndex, labelClassName, onClick } = props
+  const { tabs, defaultIndex, labelClassName, onClick, className } = props
   const [activeIndex, setActiveIndex] = useState(defaultIndex ?? 0)
   const activeTab = tabs[activeIndex] as Tab | undefined // can be undefined in weird case
 
   return (
     <>
-      <div className="mb-4 border-b border-gray-200">
+      <div className={clsx('mb-4 border-b border-gray-200', className)}>
         <nav className="-mb-px flex space-x-8" aria-label="Tabs">
           {tabs.map((tab, i) => (
             <Link href={tab.href ?? '#'} key={tab.title} shallow={!!tab.href}>

web/pages/group/[...slugs]/index.tsx

@@ -53,7 +53,7 @@ import { SiteLink } from 'web/components/site-link'
 import { ContractSearch } from 'web/components/contract-search'
 import clsx from 'clsx'
 import { FollowList } from 'web/components/follow-list'
-import { SearchIcon } from '@heroicons/react/outline'
+import { PlusIcon, SearchIcon } from '@heroicons/react/outline'
 
 export const getStaticProps = fromPropz(getStaticPropz)
 export async function getStaticPropz(props: { params: { slugs: string[] } }) {
@@ -223,10 +223,18 @@ export default function GroupPage(props: {
 
       <Col className="px-3 lg:px-1">
         <Row className={'items-center justify-between gap-4'}>
-          <div className={'mb-1'}>
+          <div className={'sm:mb-1'}>
-            <Title className={'line-clamp-2'} text={group.name} />
+            <div
+              className={
+                'line-clamp-1 my-1 text-lg text-indigo-700 sm:my-3 sm:text-2xl'
+              }
+            >
+              {group.name}
+            </div>
+            <div className={'hidden sm:block'}>
               <Linkify text={group.about} />
             </div>
+          </div>
           <div className="hidden sm:block xl:hidden">
             <JoinOrCreateButton
               group={group}
@@ -241,6 +249,7 @@ export default function GroupPage(props: {
       </Col>
 
       <Tabs
+        className={'mb-0 sm:mb-2'}
         defaultIndex={
           page === 'rankings'
             ? 2
@@ -320,11 +329,19 @@ function JoinOrCreateButton(props: {
 }) {
   const { group, user, isMember } = props
   return user && isMember ? (
-    <Row className={'justify-between sm:flex-col sm:justify-center'}>
+    <Row
+      className={'-mt-2 justify-between sm:mt-0 sm:flex-col sm:justify-center'}
+    >
       <CreateQuestionButton
         user={user}
         overrideText={'Add a new question'}
-        className={'w-48 flex-shrink-0'}
+        className={'hidden w-48 flex-shrink-0 sm:block'}
+        query={`?groupId=${group.id}`}
+      />
+      <CreateQuestionButton
+        user={user}
+        overrideText={'New question'}
+        className={'block w-40 flex-shrink-0 sm:hidden'}
         query={`?groupId=${group.id}`}
       />
       <AddContractButton group={group} user={user} />
@@ -357,8 +374,8 @@ function GroupOverview(props: {
   }
 
   return (
-    <Col>
+    <>
-      <Col className="gap-2 rounded-b bg-white p-4">
+      <Col className="gap-2 rounded-b bg-white p-2">
         <Row className={'flex-wrap justify-between'}>
           <div className={'inline-flex items-center'}>
             <div className="mr-1 text-gray-500">Created by</div>
@@ -370,6 +387,9 @@ function GroupOverview(props: {
           </div>
           {isCreator && <EditGroupButton className={'ml-1'} group={group} />}
         </Row>
+        <div className={'block sm:hidden'}>
+          <Linkify text={group.about} />
+        </div>
         <Row className={'items-center gap-1'}>
           <span className={'text-gray-500'}>Membership</span>
           {user && user.id === creator.id ? (
@@ -406,7 +426,7 @@ function GroupOverview(props: {
           <GroupMemberSearch group={group} />
         </Col>
       </Col>
-    </Col>
+    </>
   )
 }
 
@@ -588,16 +608,25 @@ function AddContractButton(props: { group: Group; user: User }) {
           </div>
         </Col>
       </Modal>
-      <div className={'flex w-48 justify-center'}>
+      <div className={'flex justify-center'}>
         <button
           className={clsx(
             createButtonStyle,
-            'w-48 whitespace-nowrap border border-black text-black hover:bg-black hover:text-white'
+            'hidden w-48 whitespace-nowrap border border-black text-black hover:bg-black hover:text-white sm:block'
           )}
           onClick={() => setOpen(true)}
         >
           Add an old question
         </button>
+        <button
+          className={clsx(
+            createButtonStyle,
+            'block w-40 whitespace-nowrap border border-black text-black hover:bg-black hover:text-white sm:hidden'
+          )}
+          onClick={() => setOpen(true)}
+        >
+          Old question
+        </button>
       </div>
     </>
   )