handle data joining and leaving office room

components/Dashboard/Office.tsx

@@ -1,3 +1,4 @@
+import { Tooltip } from "antd";
 import {
   collection,
   getFirestore,
@@ -81,15 +82,21 @@ export default function Office() {
   // if there are none, then show user button to create initial office rooms and then create them
 
   return (
-    <section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md w-96 shrink-0 flex-1">
-      <span className="flex flex-row justify-start items-center pb-5">
-        <span className="flex flex-col">
-          <span className="text-white uppercase">Office</span>
+    <section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md w-96 shrink-0 flex-1 overflow-auto">
+      <Tooltip
+        title={
+          "Tell teammates above to chat in the 'kitchen' or other places in the office."
+        }
+      >
+        <span className="flex flex-row justify-start items-center pb-5">
+          <span className="flex flex-col">
+            <span className="text-white uppercase">Office</span>
+          </span>
         </span>
-      </span>
+      </Tooltip>
 
       {/* all office rooms  */}
-      <span className="flex flex-col space-y-5 overflow-auto">
+      <span className="flex flex-col overflow-auto pr-2 space-y-2">
         {allOfficeRooms.map((officeRoom) => (
           <OfficeCard key={officeRoom.id} officeRoom={officeRoom} />
         ))}

components/Dashboard/Rooms.tsx

@@ -362,7 +362,7 @@ export default function DashboardRoom() {
   }
 
   return (
-    <section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md flex-1">
+    <section className="p-5 flex flex-col bg-gray-100 bg-opacity-25 rounded-lg shadow-md flex-1 overflow-auto">
       {/*  modal for creating room */}
       <CreateOrUpdateRoom
         show={showModalType == ShowModalType.createRoom}