:art: https://github.com/siyuan-note/siyuan/issues/13466

app/src/assets/scss/business/_av.scss

@@ -194,13 +194,13 @@
       .av__calc {
         display: flex;
         align-items: center;
-        padding: 5px;
+        padding: 5px 6px 5px 5px;
         border-right: 1px;
         flex-direction: row-reverse;
         box-sizing: border-box;
         opacity: 0;
         overflow: hidden;
-        font-size: 75%;
+        font-size: 87.5%;
         white-space: nowrap;
         line-height: 1.625em;
         cursor: pointer;
@@ -210,7 +210,7 @@
         }
 
         &:first-child {
-          padding-left: 1.625em;
+          padding-left: calc(1.625em - 6px);
           box-sizing: initial;
         }
 
@@ -221,11 +221,10 @@
         svg {
           margin-left: 5px;
           height: 1.625em;
-          width: calc(1.625em - 10px);
+          width: calc(1.625em - 14px);
         }
 
         span {
-          font-size: 116%;
           color: var(--b3-theme-on-background);
           margin-left: 5px;
         }

app/src/protyle/render/av/calc.ts

@@ -418,64 +418,64 @@ export const getCalcValue = (column: IAVColumn) => {
     let value = "";
     switch (column.calc.operator) {
         case "Count all":
-            value = `<span>${resultCalc.formattedContent}</span>${window.siyuan.languages.calcResultCountAll}`;
+            value = `<span>${resultCalc.formattedContent}</span><small>${window.siyuan.languages.calcResultCountAll}</small>`;
             break;
         case "Count values":
-            value = `<span>${resultCalc.formattedContent}</span>${window.siyuan.languages.calcResultCountValues}`;
+            value = `<span>${resultCalc.formattedContent}</span><small>${window.siyuan.languages.calcResultCountValues}</small>`;
             break;
         case "Count unique values":
-            value = `<span>${resultCalc.formattedContent}</span>${window.siyuan.languages.calcResultCountUniqueValues}`;
+            value = `<span>${resultCalc.formattedContent}</span><small>${window.siyuan.languages.calcResultCountUniqueValues}</small>`;
             break;
         case "Count empty":
-            value = `<span>${resultCalc.formattedContent}</span>${window.siyuan.languages.calcResultCountEmpty}`;
+            value = `<span>${resultCalc.formattedContent}</span><small>${window.siyuan.languages.calcResultCountEmpty}</small>`;
             break;
         case "Count not empty":
-            value = `<span>${resultCalc.formattedContent}</span>${window.siyuan.languages.calcResultCountNotEmpty}`;
+            value = `<span>${resultCalc.formattedContent}</span><small>${window.siyuan.languages.calcResultCountNotEmpty}</small>`;
             break;
         case "Percent empty":
-            value = `<span>${resultCalc.formattedContent}</span>${window.siyuan.languages.calcResultPercentEmpty}`;
+            value = `<span>${resultCalc.formattedContent}</span><small>${window.siyuan.languages.calcResultPercentEmpty}</small>`;
             break;
         case "Percent not empty":
-            value = `<span>${resultCalc.formattedContent}</span>${window.siyuan.languages.calcResultPercentNotEmpty}`;
+            value = `<span>${resultCalc.formattedContent}</span><small>${window.siyuan.languages.calcResultPercentNotEmpty}</small>`;
             break;
         case "Percent unique values":
-            value = `<span>${resultCalc.formattedContent}</span>${window.siyuan.languages.calcResultPercentUniqueValues}`;
+            value = `<span>${resultCalc.formattedContent}</span><small>${window.siyuan.languages.calcResultPercentUniqueValues}</small>`;
             break;
         case "Sum":
-            value = `<span>${resultCalc.formattedContent}</span>${window.siyuan.languages.calcResultSum}`;
+            value = `<span>${resultCalc.formattedContent}</span><small>${window.siyuan.languages.calcResultSum}</small>`;
             break;
         case  "Average":
-            value = `<span>${resultCalc.formattedContent}</span>${window.siyuan.languages.calcResultAverage}`;
+            value = `<span>${resultCalc.formattedContent}</span><small>${window.siyuan.languages.calcResultAverage}</small>`;
             break;
         case  "Median":
-            value = `<span>${resultCalc.formattedContent}</span>${window.siyuan.languages.calcResultMedian}`;
+            value = `<span>${resultCalc.formattedContent}</span><small>${window.siyuan.languages.calcResultMedian}</small>`;
             break;
         case  "Min":
-            value = `<span>${resultCalc.formattedContent}</span>${window.siyuan.languages.calcResultMin}`;
+            value = `<span>${resultCalc.formattedContent}</span><small>${window.siyuan.languages.calcResultMin}</small>`;
             break;
         case  "Max":
-            value = `<span>${resultCalc.formattedContent}</span>${window.siyuan.languages.calcResultMax}`;
+            value = `<span>${resultCalc.formattedContent}</span><small>${window.siyuan.languages.calcResultMax}</small>`;
             break;
         case  "Range":
-            value = `<span>${resultCalc.formattedContent}</span>${window.siyuan.languages.calcResultRange}`;
+            value = `<span>${resultCalc.formattedContent}</span><small>${window.siyuan.languages.calcResultRange}</small>`;
             break;
         case  "Earliest":
-            value = `<span>${resultCalc.formattedContent}</span>${window.siyuan.languages.calcOperatorEarliest}`;
+            value = `<span>${resultCalc.formattedContent}</span><small>${window.siyuan.languages.calcOperatorEarliest}</small>`;
             break;
         case  "Latest":
-            value = `<span>${resultCalc.formattedContent}</span>${window.siyuan.languages.calcOperatorLatest}`;
+            value = `<span>${resultCalc.formattedContent}</span><small>${window.siyuan.languages.calcOperatorLatest}</small>`;
             break;
         case  "Checked":
-            value = `<span>${resultCalc.formattedContent}</span>${window.siyuan.languages.checked}`;
+            value = `<span>${resultCalc.formattedContent}</span><small>${window.siyuan.languages.checked}</small>`;
             break;
         case  "Unchecked":
-            value = `<span>${resultCalc.formattedContent}</span>${window.siyuan.languages.unchecked}`;
+            value = `<span>${resultCalc.formattedContent}</span><small>${window.siyuan.languages.unchecked}</small>`;
             break;
         case  "Percent checked":
-            value = `<span>${resultCalc.formattedContent}</span>${window.siyuan.languages.percentChecked}`;
+            value = `<span>${resultCalc.formattedContent}</span><small>${window.siyuan.languages.percentChecked}</small>`;
             break;
         case  "Percent unchecked":
-            value = `<span>${resultCalc.formattedContent}</span>${window.siyuan.languages.percentUnchecked}`;
+            value = `<span>${resultCalc.formattedContent}</span><small>${window.siyuan.languages.percentUnchecked}</small>`;
             break;
     }
     return value;

app/src/protyle/render/av/render.ts

@@ -149,7 +149,7 @@ style="width: ${column.width || "200px"};">
                         calcHTML += `<div data-col-id="${column.id}" data-dtype="${column.type}" class="av__calc" style="width: ${column.width || "200px"}">&nbsp;</div>`;
                     } else {
                         calcHTML += `<div class="av__calc${column.calc && column.calc.operator !== "" ? " av__calc--ashow" : ""}" data-col-id="${column.id}" data-dtype="${column.type}" data-operator="${column.calc?.operator || ""}" 
-style="width: ${column.width || "200px"}">${getCalcValue(column) || '<svg><use xlink:href="#iconDown"></use></svg>' + window.siyuan.languages.calc}</div>`;
+style="width: ${column.width || "200px"}">${getCalcValue(column) || `<svg><use xlink:href="#iconDown"></use></svg><small>${window.siyuan.languages.calc}</small>`}</div>`;
                     }
                     if (column.calc && column.calc.operator !== "") {
                         hasCalc = true;