From c38bf09af09c544b16af4aad6d389c72025f3473 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Tue, 26 Aug 2025 11:53:58 +0300
Subject: [PATCH] chore(client): fix a table nesting issue

---
 .../client/src/widgets/ribbon/NoteInfoTab.tsx | 90 ++++++++++---------
 1 file changed, 46 insertions(+), 44 deletions(-)

diff --git a/apps/client/src/widgets/ribbon/NoteInfoTab.tsx b/apps/client/src/widgets/ribbon/NoteInfoTab.tsx
index aa4cb7db5..f2add08a4 100644
--- a/apps/client/src/widgets/ribbon/NoteInfoTab.tsx
+++ b/apps/client/src/widgets/ribbon/NoteInfoTab.tsx
@@ -37,53 +37,55 @@ export default function NoteInfoTab({ note }: TabContext) {
         <div className="note-info-widget">
             {note && (
                 <table className="note-info-widget-table">
-                    <tr>
-                        <th>{t("note_info_widget.note_id")}:</th>
-                        <td>{note.noteId}</td>
-                        <th>{t("note_info_widget.created")}:</th>
-                        <td>{formatDateTime(metadata?.dateCreated)}</td>
-                        <th>{t("note_info_widget.modified")}:</th>
-                        <td>{formatDateTime(metadata?.dateModified)}</td>
-                    </tr>
+                    <tbody>
+                        <tr>
+                            <th>{t("note_info_widget.note_id")}:</th>
+                            <td>{note.noteId}</td>
+                            <th>{t("note_info_widget.created")}:</th>
+                            <td>{formatDateTime(metadata?.dateCreated)}</td>
+                            <th>{t("note_info_widget.modified")}:</th>
+                            <td>{formatDateTime(metadata?.dateModified)}</td>
+                        </tr>
 
-                    <tr>
-                        <th>{t("note_info_widget.type")}:</th>
-                        <td>
-                            <span class="note-info-type">{note.type}</span>{' '}
-                            { note.mime && <span class="note-info-mime">({note.mime})</span> }
-                        </td>
+                        <tr>
+                            <th>{t("note_info_widget.type")}:</th>
+                            <td>
+                                <span class="note-info-type">{note.type}</span>{' '}
+                                { note.mime && <span class="note-info-mime">({note.mime})</span> }
+                            </td>
 
-                        <th title={t("note_info_widget.note_size_info")}>{t("note_info_widget.note_size")}:</th>
-                        <td colSpan={3}>
-                            {!isLoading && !noteSizeResponse && !subtreeSizeResponse && (
-                                <Button
-                                    className="calculate-button"
-                                    style={{ padding: "0px 10px 0px 10px" }}
-                                    icon="bx bx-calculator"
-                                    text={t("note_info_widget.calculate")}
-                                    onClick={() => {
-                                        setIsLoading(true);
-                                        setTimeout(async () => {                      
-                                            await Promise.allSettled([
-                                                server.get<NoteSizeResponse>(`stats/note-size/${note.noteId}`).then(setNoteSizeResponse),
-                                                server.get<SubtreeSizeResponse>(`stats/subtree-size/${note.noteId}`).then(setSubtreeSizeResponse)
-                                            ]);  
-                                            setIsLoading(false);
-                                        }, 0);
-                                    }}
-                                />
-                            )}
+                            <th title={t("note_info_widget.note_size_info")}>{t("note_info_widget.note_size")}:</th>
+                            <td colSpan={3}>
+                                {!isLoading && !noteSizeResponse && !subtreeSizeResponse && (
+                                    <Button
+                                        className="calculate-button"
+                                        style={{ padding: "0px 10px 0px 10px" }}
+                                        icon="bx bx-calculator"
+                                        text={t("note_info_widget.calculate")}
+                                        onClick={() => {
+                                            setIsLoading(true);
+                                            setTimeout(async () => {                      
+                                                await Promise.allSettled([
+                                                    server.get<NoteSizeResponse>(`stats/note-size/${note.noteId}`).then(setNoteSizeResponse),
+                                                    server.get<SubtreeSizeResponse>(`stats/subtree-size/${note.noteId}`).then(setSubtreeSizeResponse)
+                                                ]);  
+                                                setIsLoading(false);
+                                            }, 0);
+                                        }}
+                                    />
+                                )}
 
-                            <span className="note-sizes-wrapper">
-                                <span class="note-size">{formatSize(noteSizeResponse?.noteSize)}</span>
-                                {" "}
-                                {subtreeSizeResponse && subtreeSizeResponse.subTreeNoteCount > 1 &&
-                                    <span class="subtree-size">{t("note_info_widget.subtree_size", { size: formatSize(subtreeSizeResponse.subTreeSize), count: subtreeSizeResponse.subTreeNoteCount })}</span>
-                                }
-                                {isLoading && <LoadingSpinner />}
-                            </span>
-                        </td>
-                    </tr>
+                                <span className="note-sizes-wrapper">
+                                    <span class="note-size">{formatSize(noteSizeResponse?.noteSize)}</span>
+                                    {" "}
+                                    {subtreeSizeResponse && subtreeSizeResponse.subTreeNoteCount > 1 &&
+                                        <span class="subtree-size">{t("note_info_widget.subtree_size", { size: formatSize(subtreeSizeResponse.subTreeSize), count: subtreeSizeResponse.subTreeNoteCount })}</span>
+                                    }
+                                    {isLoading && <LoadingSpinner />}
+                                </span>
+                            </td>
+                        </tr>
+                    </tbody>
                 </table>
             )}            
         </div>