fix bug with reaction images overflowing

src/components/event-reactions.tsx

@@ -1,4 +1,4 @@
-import { Button, ButtonGroup, ButtonGroupProps, ButtonProps, IconButton, Image, useDisclosure } from "@chakra-ui/react";
+import { Button, ButtonProps, IconButton, Image, useDisclosure } from "@chakra-ui/react";
 import { useCallback, useMemo } from "react";
 import { NostrEvent } from "../types/nostr-event";
 import useEventReactions from "../hooks/use-event-reactions";
@@ -9,11 +9,12 @@ import { useSigningContext } from "../providers/signing-provider";
 import clientRelaysService from "../services/client-relays";
 import NostrPublishAction from "../classes/nostr-publish-action";
 import eventReactionsService from "../services/event-reactions";
+import { useCurrentAccount } from "../hooks/use-current-account";
 
 export function ReactionIcon({ emoji, url }: { emoji: string; url?: string }) {
   if (emoji === "+") return <LikeIcon />;
   if (emoji === "-") return <DislikeIcon />;
-  if (url) return <Image src={url} title={emoji} alt={emoji} />;
+  if (url) return <Image src={url} title={emoji} alt={emoji} w="1em" h="1em" display="inline" />;
   return <span>{emoji}</span>;
 }
 
@@ -27,16 +28,14 @@ function ReactionGroupButton({
     return <IconButton icon={<ReactionIcon emoji={emoji} url={url} />} aria-label="Reaction" {...props} />;
   }
   return (
-    <Button leftIcon={<ReactionIcon emoji={emoji} url={url} />} {...props}>
+    <Button leftIcon={<ReactionIcon emoji={emoji} url={url} />} title={emoji} {...props}>
       {count > 1 && count}
     </Button>
   );
 }
 
-export default function EventReactions({
-  event,
-  ...props
-}: Omit<ButtonGroupProps, "children"> & { event: NostrEvent }) {
+export default function EventReactionButtons({ event, ...props }: { event: NostrEvent }) {
+  const account = useCurrentAccount();
   const detailsModal = useDisclosure();
   const reactions = useEventReactions(event.id) ?? [];
   const grouped = useMemo(() => groupReactions(reactions), [reactions]);
@@ -57,18 +56,17 @@ export default function EventReactions({
 
   return (
     <>
-      <ButtonGroup wrap="wrap" {...props}>
-        {grouped.map((group) => (
-          <ReactionGroupButton
-            key={group.emoji}
-            emoji={group.emoji}
-            url={group.url}
-            count={group.count}
-            onClick={() => addReaction(group.emoji, group.url)}
-          />
-        ))}
-        <Button onClick={detailsModal.onOpen}>Show all</Button>
-      </ButtonGroup>
+      {grouped.map((group) => (
+        <ReactionGroupButton
+          key={group.emoji}
+          emoji={group.emoji}
+          url={group.url}
+          count={group.count}
+          onClick={() => addReaction(group.emoji, group.url)}
+          colorScheme={account && group.pubkeys.includes(account?.pubkey) ? "brand" : undefined}
+        />
+      ))}
+      <Button onClick={detailsModal.onOpen}>Show all</Button>
       {detailsModal.isOpen && <ReactionDetailsModal isOpen onClose={detailsModal.onClose} reactions={reactions} />}
     </>
   );

src/components/layout/index.tsx

@@ -14,15 +14,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
       <ReloadPrompt mb="2" />
       <Container size="lg" display="flex" padding="0" gap="4" alignItems="flex-start">
         {!isMobile && <DesktopSideNav position="sticky" top="0" />}
-        <Flex
-          flexGrow={1}
-          direction="column"
-          w="full"
-          overflowX="hidden"
-          overflowY="visible"
-          pb={isMobile ? "14" : 0}
-          minH="50vh"
-        >
+        <Flex flexGrow={1} direction="column" w="full" overflow="hidden" pb={isMobile ? "14" : 0} minH="50vh">
           <ErrorBoundary>{children}</ErrorBoundary>
         </Flex>
         {isMobile && (

src/components/note/components/note-reactions.tsx

@@ -0,0 +1,21 @@
+import { ButtonGroup, ButtonGroupProps, Divider } from "@chakra-ui/react";
+import { NostrEvent } from "../../../types/nostr-event";
+import ReactionButton from "./reaction-button";
+import EventReactionButtons from "../../event-reactions";
+import useEventReactions from "../../../hooks/use-event-reactions";
+
+export default function NoteReactions({ event, ...props }: Omit<ButtonGroupProps, "children"> & { event: NostrEvent }) {
+  const reactions = useEventReactions(event.id) ?? [];
+
+  return (
+    <ButtonGroup spacing="1" {...props}>
+      <ReactionButton event={event} />
+      {reactions.length > 0 && (
+        <>
+          <Divider orientation="vertical" h="1.5rem" />
+          <EventReactionButtons event={event} />
+        </>
+      )}
+    </ButtonGroup>
+  );
+}

src/components/note/index.tsx

@@ -8,7 +8,6 @@ import {
   CardFooter,
   CardHeader,
   CardProps,
-  Divider,
   Flex,
   IconButton,
   Link,
@@ -21,7 +20,6 @@ import { NoteMenu } from "./note-menu";
 import { EventRelays } from "./note-relays";
 import { UserLink } from "../user-link";
 import { UserDnsIdentityIcon } from "../user-dns-identity-icon";
-import ReactionButton from "./components/reaction-button";
 import NoteZapButton from "./note-zap-button";
 import { ExpandProvider } from "./expanded";
 import useSubject from "../../hooks/use-subject";
@@ -35,8 +33,9 @@ import { TrustProvider } from "../../providers/trust";
 import { NoteLink } from "../note-link";
 import { useRegisterIntersectionEntity } from "../../providers/intersection-observer";
 import BookmarkButton from "./components/bookmark-button";
-import EventReactions from "../event-reactions";
+import EventReactionButtons from "../event-reactions";
 import { useCurrentAccount } from "../../hooks/use-current-account";
+import NoteReactions from "./components/note-reactions";
 
 export type NoteProps = {
   event: NostrEvent;
@@ -55,6 +54,8 @@ export const Note = React.memo(({ event, variant = "outline" }: NoteProps) => {
 
   const showReactionsOnNewLine = useBreakpointValue({ base: true, md: false });
 
+  const reactionButtons = showReactions && <NoteReactions event={event} flexWrap="wrap" variant="ghost" size="xs" />;
+
   return (
     <TrustProvider event={event}>
       <ExpandProvider>
@@ -75,22 +76,14 @@ export const Note = React.memo(({ event, variant = "outline" }: NoteProps) => {
             <NoteContentWithWarning event={event} />
           </CardBody>
           <CardFooter padding="2" display="flex" gap="2" flexDirection="column" alignItems="flex-start">
-            {showReactions && showReactionsOnNewLine && (
-              <EventReactions event={event} variant="ghost" size="xs" spacing="1" />
-            )}
+            {showReactionsOnNewLine && reactionButtons}
             <Flex gap="2" w="full" alignItems="center">
               <ButtonGroup size="xs" variant="ghost" isDisabled={account?.readonly ?? true}>
                 <RepostButton event={event} />
                 <QuoteRepostButton event={event} />
                 <NoteZapButton event={event} />
-                <ReactionButton event={event} />
               </ButtonGroup>
-              {showReactions && !showReactionsOnNewLine && (
-                <>
-                  <Divider orientation="vertical" h="1.5rem" />
-                  <EventReactions event={event} variant="ghost" size="xs" spacing="1" />
-                </>
-              )}
+              {!showReactionsOnNewLine && reactionButtons}
               <Box flexGrow={1} />
               {externalLink && (
                 <IconButton