FE: Fix message row height shift on hover (#1784)

Co-authored-by: Roman Zabaluev <gpg@haarolean.dev>

Author: HurSungYun

frontend/src/components/Topics/Topic/Messages/Message.tsx

@@ -157,7 +157,7 @@ const Message: React.FC<Props> = ({ message, keyFilters, contentFilters }) => {
           </S.Metadata>
         </S.DataCell>
         <td style={{ width: '5%' }}>
-          {vEllipsisOpen && (
+          <div style={{ visibility: vEllipsisOpen ? 'visible' : 'hidden' }}>
             <Dropdown>
               <DropdownItem
                 aria-label="Copy to clipboard"
@@ -182,7 +182,7 @@ const Message: React.FC<Props> = ({ message, keyFilters, contentFilters }) => {
                 Reproduce message
               </ActionDropdownItem>
             </Dropdown>
-          )}
+          </div>
         </td>
       </S.ClickableRow>
       {isOpen && (

frontend/src/components/Topics/Topic/Messages/__test__/Message.spec.tsx

@@ -150,9 +150,9 @@ describe('Message component', () => {
 
   it('should check open Message Content functionality', async () => {
     renderComponent();
-    const messageToggleIcon = screen.getByRole('button', { hidden: true });
+    const messageRow = screen.getByRole('row');
     expect(screen.queryByText(mockMessageContentText)).not.toBeInTheDocument();
-    await act(() => userEvent.click(messageToggleIcon));
+    await act(() => userEvent.click(messageRow));
     expect(screen.getByText(mockMessageContentText)).toBeInTheDocument();
   });