Tweak note info (#8056)

apps/client/src/stylesheets/theme-next/ribbon.css

@@ -168,12 +168,6 @@ ul.editability-dropdown li.dropdown-item > div {
  * Note info
  */
 
-:root .note-info-widget-table button.calculate-button {
-    min-width: 0;
-    padding: 4px 10px !important;
-    font-size: 0.8em;
-}
-
 /* Narrow width layout */
 .note-info-widget {
     container: info-section / inline-size;

apps/client/src/widgets/layout/StatusBar.css

@@ -60,9 +60,13 @@
             padding: 1em !important;
 
             ul {
+                --row-block-margin: .2em;
+
                 list-style-type: none;
                 padding: 0;
                 margin: 0;
+                margin-top: calc(0px - var(--row-block-margin));
+                margin-bottom: 12px;
                 display: table;
 
                 li {
@@ -70,7 +74,8 @@
 
                     > strong {
                         display: table-cell;
-                        padding: 0.2em 0;
+                        padding: var(--row-block-margin) 0;
+                        opacity: .5;
                     }
 
                     > span {

apps/client/src/widgets/react/LinkButton.tsx

@@ -11,6 +11,12 @@ export default function LinkButton({ onClick, text, triggerCommand }: LinkButton
     return (
         <a class="tn-link" href="#"
            data-trigger-command={triggerCommand}
+           role="button"
+           onKeyDown={(e)=> {
+                if (e.code === "Space") {
+                    onClick?.();
+                }
+           }}
            onClick={(e) => {
                 e.preventDefault();
                 onClick?.();

apps/client/src/widgets/ribbon/NoteInfoTab.tsx

@@ -9,6 +9,7 @@ import LoadingSpinner from "../react/LoadingSpinner";
 import { useTriliumEvent } from "../react/hooks";
 import { isExperimentalFeatureEnabled } from "../../services/experimental_features";
 import FNote from "../../entities/fnote";
+import LinkButton from "../react/LinkButton";
 
 const isNewLayout = isExperimentalFeatureEnabled("new-layout");
 
@@ -53,9 +54,7 @@ export default function NoteInfoTab({ note }: { note: FNote | null | undefined }
 export function NoteSizeWidget({ isLoading, noteSizeResponse, subtreeSizeResponse, requestSizeInfo }: Omit<ReturnType<typeof useNoteMetadata>, "metadata">) {
     return <>
         {!isLoading && !noteSizeResponse && !subtreeSizeResponse && (
-            <Button
-                className="calculate-button"
-                icon="bx bx-calculator"
+            <LinkButton
                 text={t("note_info_widget.calculate")}
                 onClick={requestSizeInfo}
             />

apps/client/src/widgets/ribbon/style.css

@@ -207,9 +207,6 @@ body.experimental-feature-new-layout .classic-toolbar-widget {
     vertical-align: middle !important;
 }
 
-.note-info-widget .calculate-button {
-    padding: 0 10px;
-}
 /* #endregion */
 
 /* #region Similar Notes */