Fix alignment issues of seated users in the auditorium grid

src/components/attendee/UserProfilePicture/UserProfilePicture.scss

@@ -0,0 +1,4 @@
+.UserProfilePicture {
+  margin: 0;
+  padding: 0;
+}

src/components/molecules/UserProfilePicture/UserProfilePicture.tsx → src/components/attendee/UserProfilePicture/UserProfilePicture.tsx

@@ -1,9 +1,7 @@
 import React, { useCallback } from "react";
-import classNames from "classnames";
 
 import { UserId } from "types/id";
 import { User } from "types/User";
-import { ContainerClassName } from "types/utility";
 
 import { WithId } from "utils/id";
 
@@ -17,7 +15,7 @@ import { UserAvatarSize } from "../../atoms/UserAvatar/UserAvatar";
 
 import "./UserProfilePicture.scss";
 
-export interface UserProfilePictureProp extends ContainerClassName {
+interface UserProfilePictureProp {
   user?: WithId<User>;
   isAudioEffectDisabled?: boolean;
   reactionPosition?: "left" | "right";
@@ -33,7 +31,6 @@ export const UserProfilePicture: React.FC<UserProfilePictureProp> = ({
   showStatus = false,
   isVideoEnabled = true,
   size,
-  containerClassName,
 }) => {
   const userId = user?.id;
 
@@ -44,15 +41,10 @@ export const UserProfilePicture: React.FC<UserProfilePictureProp> = ({
     [openUserProfileModal, user?.id]
   );
 
-  const containerClasses = classNames("UserProfilePicture", {
-    "UserProfilePicture--only-icon": !isVideoEnabled,
-    containerClassName,
-  });
-
   return (
     <div
       data-bem="UserProfilePicture"
-      className={containerClasses}
+      className="UserProfilePicture"
       onClick={openProfileModal}
     >
       <UserAvatar user={user} showStatus={showStatus} size={size} />

src/components/templates/Auditorium/components/Section/Section.module.scss

@@ -24,6 +24,7 @@
   > *:nth-child(1) {
     grid-column-start: 2;
   }
+
   > *:nth-last-child(1) {
     margin-left: auto;
   }
@@ -37,17 +38,26 @@
 
 .leaveButton {
   color: theme.$c-subdued-text;
+
   svg {
     margin-left: space.empty(0.5);
   }
 }
 
 .gridContainer {
   display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
   max-width: 100vw;
+
+  gap: space.empty(1);
+
+  > * {
+    margin: 0;
+    padding: 0;
+  }
+
   @media (min-width: breakpoint.$md) {
     max-width: 50vw;
   }
-  flex-wrap: wrap;
-  justify-content: center;
 }

src/components/templates/Auditorium/components/Section/Section.tsx

@@ -5,6 +5,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { UserWithId } from "types/id";
 import { AuditoriumVenue } from "types/venues";
 
+import { createErrorCapture } from "utils/error";
 import { WithId } from "utils/id";
 
 import { useAuditoriumGrid, useAuditoriumSection } from "hooks/auditorium";
@@ -43,7 +44,12 @@ export const Section: React.FC<SectionProps> = ({ user, venue, sectionId }) => {
   // Ensure the user leaves their seat when they leave the section
   useEffect(() => {
     return () => {
-      leaveSeat();
+      leaveSeat().catch(
+        createErrorCapture({
+          message: "Problem leaving seat",
+          where: "Section",
+        })
+      );
     };
   }, [leaveSeat]);
 
@@ -68,7 +74,7 @@ export const Section: React.FC<SectionProps> = ({ user, venue, sectionId }) => {
   if (!auditoriumSection) return <p>The section id is invalid</p>;
 
   return (
-    <div className={styles.section}>
+    <div data-bem="Section" className={styles.section}>
       <div className={styles.sectionHeader}>
         <h2>Auditorium</h2>
         {isUserSeated && (

src/components/templates/ReactionPage/ReactionList.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo } from "react";
 import classNames from "classnames";
+import { UserProfilePicture } from "components/attendee/UserProfilePicture";
 
 import { DEFAULT_PARTY_NAME } from "settings";
 
@@ -11,8 +12,6 @@ import {
   Reaction,
 } from "types/reactions";
 
-import { UserProfilePicture } from "components/molecules/UserProfilePicture";
-
 export interface ReactionListProps {
   reactions: Reaction[];
   chatMessages: ChatMessage[];

src/hooks/auditorium/useAuditoriumGrid.tsx

@@ -1,13 +1,12 @@
 import React, { useCallback, useMemo } from "react";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { UserProfilePicture } from "components/attendee/UserProfilePicture";
 
 import { SECTION_CAPACITY } from "settings";
 
 import { SeatPosition } from "types/grid";
 
-import { UserProfilePicture } from "components/molecules/UserProfilePicture";
-
 import { GetUserByPosition } from "../useGetUserByPosition";
 
 // @debt move the components and its styles in their own directory under ./src/components
@@ -52,7 +51,6 @@ export const useAuditoriumGrid = ({
           <UserProfilePicture
             key={seatIndex}
             user={user}
-            containerClassName={styles.takenSeat}
             isAudioEffectDisabled={isUserAudioMuted}
             size="medium"
           />