Size group chat window & nav bar list of groups precisely. Update Page margin/padding.

web/components/groups/group-chat.tsx

@@ -22,6 +22,7 @@ import { CommentTipMap, CommentTips } from 'web/hooks/use-tip-txns'
 import { Tipper } from 'web/components/tipper'
 import { sum } from 'lodash'
 import { formatMoney } from 'common/util/format'
+import { useWindowSize } from 'web/hooks/use-window-size'
 
 export function GroupChat(props: {
   messages: Comment[]
@@ -101,11 +102,20 @@ export function GroupChat(props: {
     inputRef?.focus()
   }
 
+  const { width, height } = useWindowSize()
+  const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null)
+  // Subtract bottom bar when it's showing (less than lg screen)
+  const bottomBarHeight = (width ?? 0) < 1024 ? 58 : 0
+  const remainingHeight =
+    (height ?? window.innerHeight) -
+    (containerRef?.offsetTop ?? 0) -
+    bottomBarHeight
+
   return (
-    <Col className={'mt-2 flex-1'}>
+    <Col ref={setContainerRef} style={{ height: remainingHeight }}>
       <Col
         className={
-          'max-h-[65vh] min-h-[65vh] w-full space-y-2 overflow-x-hidden overflow-y-scroll'
+          'w-full flex-1 space-y-2 overflow-x-hidden overflow-y-scroll pt-2'
         }
         ref={setScrollToBottomRef}
       >
@@ -138,7 +148,7 @@ export function GroupChat(props: {
         )}
       </Col>
       {user && group.memberIds.includes(user.id) && (
-        <div className=" flex w-full justify-start gap-2 p-2">
+        <div className="flex w-full justify-start gap-2 p-2">
           <div className="mt-1">
             <Avatar
               username={user?.username}

web/components/nav/nav-bar.tsx

@@ -170,7 +170,7 @@ export function MobileSidebar(props: {
             leaveFrom="translate-x-0"
             leaveTo="-translate-x-full"
           >
-            <div className="relative flex w-full max-w-xs flex-1 flex-col bg-white pt-5 pb-4">
+            <div className="relative flex w-full max-w-xs flex-1 flex-col bg-white">
               <Transition.Child
                 as={Fragment}
                 enter="ease-in-out duration-300"
@@ -191,7 +191,7 @@ export function MobileSidebar(props: {
                   </button>
                 </div>
               </Transition.Child>
-              <div className="mx-2 mt-5 h-0 flex-1 overflow-y-auto">
+              <div className="mx-2 h-0 flex-1 overflow-y-auto">
                 <Sidebar className="pl-2" />
               </div>
             </div>

web/components/nav/sidebar.tsx

@@ -18,7 +18,7 @@ import { ManifoldLogo } from './manifold-logo'
 import { MenuButton } from './menu'
 import { ProfileSummary } from './profile-menu'
 import NotificationsIcon from 'web/components/notifications-icon'
-import React, { useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import { IS_PRIVATE_MANIFOLD } from 'common/envs/constants'
 import { CreateQuestionButton } from 'web/components/create-question-button'
 import { useMemberGroups } from 'web/hooks/use-group'
@@ -29,6 +29,7 @@ import { Spacer } from '../layout/spacer'
 import { useUnseenPreferredNotifications } from 'web/hooks/use-notifications'
 import { setNotificationsAsSeen } from 'web/pages/notifications'
 import { PrivateUser } from 'common/user'
+import { useWindowSize } from 'web/hooks/use-window-size'
 
 function getNavigation() {
   return [
@@ -199,7 +200,7 @@ export default function Sidebar(props: { className?: string }) {
 
   return (
     <nav aria-label="Sidebar" className={className}>
-      <ManifoldLogo className="pb-6" twoLine />
+      <ManifoldLogo className="py-6" twoLine />
 
       <CreateQuestionButton user={user} />
       <Spacer h={4} />
@@ -282,6 +283,11 @@ function GroupsList(props: {
     })
   }, [currentPage, preferredNotifications])
 
+  const { height } = useWindowSize()
+  const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null)
+  const remainingHeight =
+    (height ?? window.innerHeight) - (containerRef?.offsetTop ?? 0)
+
   return (
     <>
       <SidebarItem
@@ -289,7 +295,11 @@ function GroupsList(props: {
         currentPage={currentPage}
       />
 
-      <div className="mt-1 space-y-0.5">
+      <div
+        className="flex-1 space-y-0.5 overflow-y-scroll"
+        style={{ height: remainingHeight }}
+        ref={setContainerRef}
+      >
         {memberItems.map((item) => (
           <a
             key={item.href}

web/components/page.tsx

@@ -7,28 +7,34 @@ import { Toaster } from 'react-hot-toast'
 export function Page(props: {
   rightSidebar?: ReactNode
   suspend?: boolean
+  className?: string
   children?: ReactNode
 }) {
-  const { children, rightSidebar, suspend } = props
+  const { children, rightSidebar, suspend, className } = props
 
+  const bottomBarPadding = 'pb-[58px] lg:pb-0 '
   return (
     <>
       <div
-        className="mx-auto w-full pb-14 lg:grid lg:grid-cols-12 lg:gap-2 lg:pt-6 xl:max-w-7xl xl:gap-8"
+        className={clsx(
+          className,
+          bottomBarPadding,
+          'mx-auto w-full lg:grid lg:grid-cols-12 lg:gap-x-2 xl:max-w-7xl xl:gap-x-8'
+        )}
         style={suspend ? visuallyHiddenStyle : undefined}
       >
         <Toaster />
-        <Sidebar className="sticky top-4 hidden divide-gray-300 self-start pl-2 lg:col-span-2 lg:block" />
+        <Sidebar className="sticky top-0 hidden divide-gray-300 self-start pl-2 lg:col-span-2 lg:block" />
         <main
           className={clsx(
-            'lg:col-span-8',
+            'pt-6 lg:col-span-8',
             rightSidebar ? 'xl:col-span-7' : 'xl:col-span-8'
           )}
         >
           {children}
 
           {/* If right sidebar is hidden, place its content at the bottom of the page. */}
-          <div className="mt-4 block xl:hidden">{rightSidebar}</div>
+          <div className="block xl:hidden">{rightSidebar}</div>
         </main>
         <aside className="hidden xl:col-span-3 xl:block">
           <div className="sticky top-4 space-y-4">{rightSidebar}</div>

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

@@ -215,14 +215,14 @@ export default function GroupPage(props: {
     </Col>
   )
   return (
-    <Page rightSidebar={rightSidebar}>
+    <Page rightSidebar={rightSidebar} className="!pb-0">
       <SEO
         title={group.name}
         description={`Created by ${creator.name}. ${group.about}`}
         url={groupPath(group.slug)}
       />
 
-      <Col className="px-3 lg:px-1">
+      <Col className="px-3">
         <Row className={'items-center justify-between gap-4'}>
           <div className={'sm:mb-1'}>
             <div
@@ -251,7 +251,7 @@ export default function GroupPage(props: {
 
       <Tabs
         currentPageForAnalytics={groupPath(group.slug)}
-        className={'mb-0 sm:mb-2'}
+        className={'mx-3 mb-0'}
         defaultIndex={
           page === 'rankings'
             ? 2

web/pages/notifications.tsx

@@ -47,7 +47,7 @@ export default function Notifications() {
   if (!user) return <Custom404 />
   return (
     <Page>
-      <div className={'p-2 sm:p-4'}>
+      <div className={'px-2 sm:px-4'}>
         <Title text={'Notifications'} className={'hidden md:block'} />
         <div>
           <Tabs