From 580f843e4cca31019ebf018b7b6cd029367cfa32 Mon Sep 17 00:00:00 2001
From: R3D347HR4Y <redeathray@gmail.com>
Date: Mon, 15 Jun 2026 18:02:52 +0200
Subject: [PATCH] feat(drive): enhance paragraph style and font family
 selection in rich text editor

- Updated class names for paragraph style and font family select triggers to improve styling consistency.
- Added new CSS rules for hover and focus states on select triggers, enhancing user interaction feedback.
- Implemented logic to drop trailing empty pages in document metrics calculations, optimizing page count accuracy.
- Enhanced tests to verify new page count behavior when content fits within existing layouts.
---
 .../richtext/docs-paragraph-style-ui.tsx      |  2 +-
 components/drive/richtext/docs-toolbar.tsx    |  2 +-
 lib/drive/docs-page-metrics.test.ts           |  7 +++++
 lib/drive/docs-page-metrics.ts                |  6 +++++
 styles/richtext-editor.css                    | 26 +++++++++++++++++++
 5 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/components/drive/richtext/docs-paragraph-style-ui.tsx b/components/drive/richtext/docs-paragraph-style-ui.tsx
index 19ab946..b0e3a85 100644
--- a/components/drive/richtext/docs-paragraph-style-ui.tsx
+++ b/components/drive/richtext/docs-paragraph-style-ui.tsx
@@ -47,7 +47,7 @@ export function DocsParagraphStyleSelect({
     <Select disabled={disabled} value={value} onValueChange={onValueChange}>
       <SelectTrigger
         className={cn(
-          "docs-toolbar-select h-7 w-[120px] shrink-0 border-0 bg-transparent px-1 shadow-none",
+          "docs-toolbar-select docs-toolbar-select--style h-7 w-[120px] shrink-0 border-0 bg-transparent px-1 shadow-none",
           triggerClassName
         )}
       >
diff --git a/components/drive/richtext/docs-toolbar.tsx b/components/drive/richtext/docs-toolbar.tsx
index e19b3f9..37f5883 100644
--- a/components/drive/richtext/docs-toolbar.tsx
+++ b/components/drive/richtext/docs-toolbar.tsx
@@ -274,7 +274,7 @@ function DocsToolbarInner({
             }}
           >
             <SelectTrigger
-              className="docs-toolbar-select h-7 w-[108px] shrink-0 border-0 bg-transparent px-1 shadow-none"
+              className="docs-toolbar-select docs-toolbar-select--font-family h-7 w-[108px] shrink-0 border-0 bg-transparent px-1 shadow-none"
               style={
                 fontFamilyState.kind === "single"
                   ? {
diff --git a/lib/drive/docs-page-metrics.test.ts b/lib/drive/docs-page-metrics.test.ts
index 2843471..be22595 100644
--- a/lib/drive/docs-page-metrics.test.ts
+++ b/lib/drive/docs-page-metrics.test.ts
@@ -25,6 +25,13 @@ describe("docs-page-metrics", () => {
     assert.equal(computePageCount(metrics.bodyAreaHeight + 1, metrics), 2)
   })
 
+  it("drops a trailing page when content fits the previous page layout", () => {
+    const fourPages = computeProseMinHeight(4, metrics)
+    assert.equal(computePageCount(fourPages, metrics), 4)
+    assert.equal(computePageCount(fourPages - 1, metrics), 4)
+    assert.equal(computePageCount(fourPages + 1, metrics), 5)
+  })
+
   it("computes stack height with page gaps", () => {
     assert.equal(computeStackHeight(2, 1122), 1122 * 2 + 24)
   })
diff --git a/lib/drive/docs-page-metrics.ts b/lib/drive/docs-page-metrics.ts
index d2e52d6..19295c1 100644
--- a/lib/drive/docs-page-metrics.ts
+++ b/lib/drive/docs-page-metrics.ts
@@ -57,6 +57,12 @@ export function computePageCount(contentHeight: number, metrics: DocsPageMetrics
     remaining -= interPageSpacer
     pages += 1
   }
+
+  // Drop a trailing page that would be entirely empty (simulated height overshoot).
+  while (pages > 1 && contentHeight <= computeProseMinHeight(pages - 1, metrics)) {
+    pages -= 1
+  }
+
   return pages
 }
 
diff --git a/styles/richtext-editor.css b/styles/richtext-editor.css
index b80a543..eee8c7c 100644
--- a/styles/richtext-editor.css
+++ b/styles/richtext-editor.css
@@ -1044,6 +1044,31 @@ html.dark .docs-menu-badge {
   box-shadow: none !important;
 }
 
+.docs-toolbar-select--style,
+.docs-toolbar-select--font-family {
+  border-radius: 4px;
+}
+
+.docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--style:hover,
+.docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--style:focus-visible,
+.docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--style[data-state="open"],
+.docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--font-family:hover,
+.docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--font-family:focus-visible,
+.docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--font-family[data-state="open"] {
+  background: #e8eaed !important;
+  box-shadow: none !important;
+}
+
+.dark .docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--style:hover,
+.dark .docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--style:focus-visible,
+.dark .docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--style[data-state="open"],
+.dark .docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--font-family:hover,
+.dark .docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--font-family:focus-visible,
+.dark .docs-toolbar [data-slot="select-trigger"].docs-toolbar-select--font-family[data-state="open"] {
+  background: #444746 !important;
+  box-shadow: none !important;
+}
+
 .docs-toolbar-select [data-slot="select-value"] {
   color: inherit;
 }
@@ -1145,6 +1170,7 @@ html.dark .docs-menu-badge {
   text-align: center;
   padding: 0;
   line-height: 1;
+  font-weight: 700;
 }
 
 .docs-toolbar-select--size svg {