Make action buttons show on hover

src/app/game/berry-dash/chatroom/page.tsx

@@ -160,7 +160,7 @@ export default function BerryDashChatroom () {
           >
             {messages.map(item => {
               return (
-                <div key={item.id} className='sub-box2 flex flex-row gap-1'>
+                <div key={item.id} className='message sub-box2'>
                   <Image
                     src={
                       !item.customIcon

src/app/game/berry-dash/chatroom/styles.css

@@ -1,5 +1,13 @@
 @import "tailwindcss";
 
-.actionbutton {
-  @apply absolute right-0 w-6 h-6 bg-(--col5) hover:bg-(--col7) rounded-full -mt-1.5 flex justify-center items-center cursor-pointer transition-colors;
+.message {
+  @apply flex flex-row gap-1;
+}
+
+.message:hover .actionbutton {
+  @apply flex;
+}
+
+.actionbutton {
+  @apply absolute right-0 w-6 h-6 bg-(--col5) hover:bg-(--col7) rounded-full -mt-1.5 justify-center items-center cursor-pointer transition-colors hidden;
 }

src/app/game/geometry-rays/chatroom/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import './styles.css'
+import '../../berry-dash/chatroom/styles.css'
 import { BackButton } from '@/components/BackButton'
 import { DiscordButton } from '@/components/DiscordButton'
 import axios from 'axios'
@@ -99,7 +99,7 @@ export default function GeometryRaysChatroom () {
         >
           {messages.map((item, i) => {
             return (
-              <div key={i} className='sub-box2 flex flex-row gap-1'>
+              <div key={i} className='message sub-box2'>
                 <div>
                   <p>{item.username}</p>
                   <p className='w-240 max-w-[calc(100vw-136px)] truncate select-text'>

src/app/game/geometry-rays/chatroom/styles.css

@@ -1,5 +0,0 @@
-@import "tailwindcss";
-
-.actionbutton {
-  @apply absolute right-0 w-6 h-6 bg-(--col5) hover:bg-(--col7) rounded-full -mt-1.5 flex justify-center items-center cursor-pointer transition-colors;
-}