Flip people menu for first person

ui/src/components/sidebar/MediaSidebar/MediaSidebarPeople.tsx

@@ -50,9 +50,11 @@ type PersonMoreMenuProps = {
   face: sidebarMediaQuery_media_faces
   setChangeLabel: React.Dispatch<React.SetStateAction<boolean>>
   className?: string
+  menuFlipped: boolean
 }
 
 const PersonMoreMenu = ({
+  menuFlipped,
   face,
   setChangeLabel,
   className,
@@ -119,7 +121,7 @@ const PersonMoreMenu = ({
           <PeopleDotsIcon className="text-gray-500" />
         </Menu.Button>
         <Menu.Items className="">
-          <ArrowPopoverPanel width={120}>
+          <ArrowPopoverPanel width={120} flipped={menuFlipped}>
             <PersonMoreMenuItem
               onClick={() => setChangeLabel(true)}
               className="border-b"
@@ -152,9 +154,10 @@ const PersonMoreMenu = ({
 
 type MediaSidebarFaceProps = {
   face: sidebarMediaQuery_media_faces
+  menuFlipped: boolean
 }
 
-const MediaSidebarPerson = ({ face }: MediaSidebarFaceProps) => {
+const MediaSidebarPerson = ({ face, menuFlipped }: MediaSidebarFaceProps) => {
   const [changeLabel, setChangeLabel] = useState(false)
 
   return (
@@ -172,6 +175,7 @@ const MediaSidebarPerson = ({ face }: MediaSidebarFaceProps) => {
         />
         {!changeLabel && (
           <PersonMoreMenu
+            menuFlipped={menuFlipped}
             className="pl-0.5"
             face={face}
             setChangeLabel={setChangeLabel}
@@ -189,8 +193,8 @@ type MediaSidebarFacesProps = {
 const MediaSidebarPeople = ({ media }: MediaSidebarFacesProps) => {
   const { t } = useTranslation()
 
-  const faceElms = (media.faces ?? []).map(face => (
-    <MediaSidebarPerson key={face.id} face={face} />
+  const faceElms = (media.faces ?? []).map((face, i) => (
+    <MediaSidebarPerson key={face.id} face={face} menuFlipped={i == 0} />
   ))
 
   if (faceElms.length == 0) return null

ui/src/components/sidebar/Sharing.tsx

@@ -108,18 +108,36 @@ const DELETE_SHARE_MUTATION = gql`
 
 export const ArrowPopoverPanel = styled.div.attrs({
   className:
-    'absolute right-6 -top-3 bg-white rounded shadow-md border border-gray-200',
-})<{ width: number }>`
+    'absolute -top-3 bg-white rounded shadow-md border border-gray-200 z-10',
+})<{ width: number; flipped?: boolean }>`
   width: ${({ width }) => width}px;
 
+  ${({ flipped }) =>
+    flipped
+      ? `
+      left: 32px;
+        `
+      : `
+      right: 24px;
+    `}
+
   &::after {
     content: '';
     position: absolute;
     top: 18px;
-    right: -7px;
     width: 8px;
     height: 14px;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpolyline stroke-width='1' stroke='%23E2E2E2' fill='%23FFFFFF' points='1 0 7 7 1 14'%3E%3C/polyline%3E%3C/svg%3E");
+
+    ${({ flipped }) =>
+      flipped
+        ? `
+      left: -7px;
+      transform: rotate(180deg);
+        `
+        : `
+      right: -7px;
+    `}
   }
 `