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.

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
         )}
       >

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"
                   ? {

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)
   })

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
 }
 

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 {