From 4d1ebd011c2c8de7d406496c8bf0845f87c3dc71 Mon Sep 17 00:00:00 2001
From: contributor <foss.contributor@gmail.com>
Date: Mon, 10 Nov 2025 09:54:53 +0200
Subject: [PATCH 1/2] ribbon Note Info in flex layout instead of table

---
 .../src/stylesheets/theme-next/ribbon.css     |   3 +-
 .../client/src/widgets/ribbon/NoteInfoTab.tsx | 102 +++++++++---------
 apps/client/src/widgets/ribbon/style.css      |  17 +--
 3 files changed, 63 insertions(+), 59 deletions(-)

diff --git a/apps/client/src/stylesheets/theme-next/ribbon.css b/apps/client/src/stylesheets/theme-next/ribbon.css
index dc1465d17..3718602cf 100644
--- a/apps/client/src/stylesheets/theme-next/ribbon.css
+++ b/apps/client/src/stylesheets/theme-next/ribbon.css
@@ -42,7 +42,7 @@ div.promoted-attributes-container {
  */
 
  /* The property label */
-.note-info-widget-table th,
+.note-info-item > span:first-child,
 .file-properties-widget .file-table th,
 .image-properties > div:first-child > span > strong {
     opacity: 0.65;
@@ -50,7 +50,6 @@ div.promoted-attributes-container {
     vertical-align: top;
 }
 
-.note-info-widget-table td,
 .file-properties-widget .file-table td {
     vertical-align: top;
 }
diff --git a/apps/client/src/widgets/ribbon/NoteInfoTab.tsx b/apps/client/src/widgets/ribbon/NoteInfoTab.tsx
index 2e670d51d..8e2cfba0c 100644
--- a/apps/client/src/widgets/ribbon/NoteInfoTab.tsx
+++ b/apps/client/src/widgets/ribbon/NoteInfoTab.tsx
@@ -36,57 +36,59 @@ export default function NoteInfoTab({ note }: TabContext) {
     return (
         <div className="note-info-widget">
             {note && (
-                <table className="note-info-widget-table">
-                    <tbody>
-                        <tr>
-                            <th>{t("note_info_widget.note_id")}:</th>
-                            <td class="note-info-id">{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>
+                <>
+                    <div className="note-info-item">
+                        <span>{t("note_info_widget.note_id")}:</span>
+                        <span className="note-info-id">{note.noteId}</span>
+                    </div>
+                    <div className="note-info-item">
+                        <span>{t("note_info_widget.created")}:</span>
+                        <span>{formatDateTime(metadata?.dateCreated)}</span>
+                    </div>
+                    <div className="note-info-item">
+                        <span>{t("note_info_widget.modified")}:</span>
+                        <span>{formatDateTime(metadata?.dateModified)}</span>
+                    </div>
+                    <div className="note-info-item">
+                        <span>{t("note_info_widget.type")}:</span>
+                        <span>
+                            <span className="note-info-type">{note.type}</span>{' '}
+                            {note.mime && <span className="note-info-mime">({note.mime})</span>}
+                        </span>
+                    </div>
+                    <div className="note-info-item">
+                        <span title={t("note_info_widget.note_size_info")}>{t("note_info_widget.note_size")}:</span>
+                        <span className="note-info-size-col-span">
+                            {!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);
+                                    }}
+                                />
+                            )}
 
-                        <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);
-                                        }}
-                                    />
-                                )}
-
-                                <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>
+                            <span className="note-sizes-wrapper">
+                                <span className="note-size">{formatSize(noteSizeResponse?.noteSize)}</span>
+                                {" "}
+                                {subtreeSizeResponse && subtreeSizeResponse.subTreeNoteCount > 1 &&
+                                    <span className="subtree-size">{t("note_info_widget.subtree_size", { size: formatSize(subtreeSizeResponse.subTreeSize), count: subtreeSizeResponse.subTreeNoteCount })}</span>
+                                }
+                                {isLoading && <LoadingSpinner />}
+                            </span>
+                        </span>
+                    </div>
+                </>
             )}
         </div>
     )
diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css
index 16437d618..5e7b98d3a 100644
--- a/apps/client/src/widgets/ribbon/style.css
+++ b/apps/client/src/widgets/ribbon/style.css
@@ -160,17 +160,20 @@
 /* #region Note info */
 .note-info-widget {
     padding: 12px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
 }
 
-.note-info-widget-table {
-    max-width: 100%;
-    display: block;
-    overflow-x: auto;
-    white-space: nowrap;
+.note-info-item {
+    display: flex;
+    align-items: baseline;
+    padding-inline-end: 15px;
+    padding-block: 5px;
 }
 
-.note-info-widget-table td, .note-info-widget-table th {
-    padding: 5px;
+.note-info-item > span:first-child {
+    padding-inline-end: 5px;
 }
 
 .note-info-mime {

From a1c959aabd7a9168ea067d2f9c87cbe83547dd94 Mon Sep 17 00:00:00 2001
From: contributor <foss.contributor@gmail.com>
Date: Mon, 10 Nov 2025 10:56:05 +0200
Subject: [PATCH 2/2] use class instead of inline style for note info calculate
 button

---
 apps/client/src/widgets/ribbon/NoteInfoTab.tsx | 1 -
 apps/client/src/widgets/ribbon/style.css       | 4 ++++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/widgets/ribbon/NoteInfoTab.tsx b/apps/client/src/widgets/ribbon/NoteInfoTab.tsx
index 8e2cfba0c..2fb9daa80 100644
--- a/apps/client/src/widgets/ribbon/NoteInfoTab.tsx
+++ b/apps/client/src/widgets/ribbon/NoteInfoTab.tsx
@@ -62,7 +62,6 @@ export default function NoteInfoTab({ note }: TabContext) {
                             {!isLoading && !noteSizeResponse && !subtreeSizeResponse && (
                                 <Button
                                     className="calculate-button"
-                                    style={{ padding: "0px 10px 0px 10px" }}
                                     icon="bx bx-calculator"
                                     text={t("note_info_widget.calculate")}
                                     onClick={() => {
diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css
index 5e7b98d3a..f47c6d662 100644
--- a/apps/client/src/widgets/ribbon/style.css
+++ b/apps/client/src/widgets/ribbon/style.css
@@ -189,6 +189,10 @@
     font-size: 0.8em;
     vertical-align: middle !important;
 }
+
+.note-info-widget .calculate-button {
+    padding: 0 10px;
+}
 /* #endregion */
 
 /* #region Similar Notes */