Fix: standardize some dropdown sizing (#14510)

src-ui/src/app/components/chat/chat/chat.component.html

@@ -6,7 +6,7 @@
   <div ngbDropdownMenu class="dropdown-menu-end shadow p-0 overflow-hidden" aria-labelledby="chatDropdown">
     <div class="d-flex align-items-center border-bottom px-3 py-2">
       <i-bs width="1em" height="1em" name="stars" class="text-primary me-2"></i-bs>
-      <span class="fw-semibold small">
+      <span class="fw-semibold">
         @if (documentId()) {
           <ng-container i18n>Ask about this document</ng-container>
         } @else {
@@ -20,7 +20,7 @@
       }
     </div>
 
-    <div class="chat-messages small px-2">
+    <div class="chat-messages px-2">
       @if (!messages().length) {
         <p class="text-muted text-center py-4 px-3 mb-0" i18n>Answers come from your documents, with links to their sources.</p>
       }

src-ui/src/app/components/common/dates-dropdown/dates-dropdown.component.html

@@ -15,7 +15,7 @@
             </a>
           }
         </div>
-        <div class="input-group input-group-sm small ps-1 pe-2">
+        <div class="input-group input-group-sm ps-1 pe-2">
           <ng-select class="w-100" name="createdRelativeDate"
           [items]="relativeDates" [(ngModel)]="createdRelativeDate"
           bindValue="id"
@@ -92,7 +92,7 @@
             </a>
           }
         </div>
-        <div class="input-group input-group-sm small ps-1 pe-2">
+        <div class="input-group input-group-sm ps-1 pe-2">
           <ng-select class="w-100" name="addedRelativeDate"
             [items]="relativeDates" [(ngModel)]="addedRelativeDate"
             bindValue="id"

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html

@@ -51,20 +51,20 @@
       @if (editing) {
         @if (filteredItems.length === 0 && createRef !== undefined && filterText?.length > 0) {
           <button class="list-group-item list-group-item-action bg-light" (click)="createClicked()" [disabled]="disabled">
-            <small class="ms-2"><ng-container i18n>Create</ng-container> "{{filterText}}"</small>
+            <span class="ms-2"><ng-container i18n>Create</ng-container> "{{filterText}}"</span>
             <i-bs width="1.5em" height="1em" name="plus"></i-bs>
           </button>
         }
         @if (filteredItems.length > 0) {
           <button class="list-group-item list-group-item-action bg-light d-flex align-items-center" (click)="applyClicked()" [disabled]="!modelIsDirty() || disabled">
-            <small class="ms-2" [ngClass]="{'fw-bold': modelIsDirty()}" i18n>Apply</small>
+            <span class="ms-2" [ngClass]="{'fw-bold': modelIsDirty()}" i18n>Apply</span>
             <i-bs width="1.5em" height="1em" name="arrow-right"></i-bs>
           </button>
         }
       }
       @if (extraButtonTitle && (showExtraButtonIfEmpty || filteredItems?.length > 0)) {
         <button class="list-group-item list-group-item-action bg-light d-flex align-items-center" (click)="extraButtonClicked($event)" [disabled]="disabled">
-          <small class="ms-2 fw-bold">{{extraButtonTitle}}</small>
+          <span class="ms-2 fw-bold">{{extraButtonTitle}}</span>
           <i-bs width="1.5em" height="1em" name="arrow-right"></i-bs>
         </button>
       }

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.scss

@@ -29,7 +29,7 @@
   line-height: 1;
 
   small {
-    font-size: 65%;
+    font-size: 0.65rem;
   }
 }
 

src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.html

@@ -23,7 +23,7 @@
       @if (isTag) {
         <pngx-tag [tag]="item" [clickable]="false"></pngx-tag>
       } @else {
-        <small>{{item.name}}</small>
+        {{item.name}}
       }
     </div>
   </div>

src-ui/src/app/components/common/filterable-dropdown/toggleable-dropdown-button/toggleable-dropdown-button.component.scss

@@ -23,4 +23,9 @@
 
   .badge {
     flex-shrink: 0;
+    font-size: 0.75rem;
+  }
+
+  pngx-tag {
+    font-size: 1rem;
   }

src-ui/src/app/components/common/permissions-filter-dropdown/permissions-filter-dropdown.component.html

@@ -12,7 +12,7 @@
           }
         </div>
         <div class="me-1">
-          <small i18n>All</small>
+          <span i18n>All</span>
         </div>
       </button>
       <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.SELF)" [disabled]="disabled">
@@ -22,7 +22,7 @@
           }
         </div>
         <div class="me-1">
-          <small>{{ownerFilterLabel}}</small>
+          {{ownerFilterLabel}}
         </div>
       </button>
       <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.NOT_SELF)" [disabled]="disabled">
@@ -32,7 +32,7 @@
           }
         </div>
         <div class="me-1">
-          <small>{{ownerExclusionFilterLabel}}</small>
+          {{ownerExclusionFilterLabel}}
         </div>
       </button>
       <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.SHARED_BY_ME)" [disabled]="disabled">
@@ -42,7 +42,7 @@
           }
         </div>
         <div class="me-1">
-          <small>{{sharedByFilterLabel}}</small>
+          {{sharedByFilterLabel}}
         </div>
       </button>
       <button class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" (click)="setFilter(OwnerFilterType.UNOWNED)" [disabled]="disabled">
@@ -52,7 +52,7 @@
           }
         </div>
         <div class="me-1">
-          <small i18n>Unowned</small>
+          <span i18n>Unowned</span>
         </div>
       </button>
       <button *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.User }" class="list-group-item list-group-item-action d-flex align-items-center p-2 border-top-0 border-start-0 border-end-0 border-bottom" role="menuitem" [disabled]="disabled">
@@ -67,7 +67,7 @@
         <div class="me-1 w-100">
           <ng-select
             name="user"
-            class="user-select small"
+            class="user-select"
             [ngModel]="selectionModel.includeUsers()"
             (ngModelChange)="selectionModel.includeUsers.set($event)"
             [disabled]="disabled"
@@ -87,7 +87,7 @@
         <div class="list-group-item list-group-item-action d-flex align-items-center p-2 ps-3 border-bottom-0 border-start-0 border-end-0">
           <div class="form-check form-switch w-100">
             <input type="checkbox" class="form-check-input" id="hideUnowned" [ngModel]="selectionModel.hideUnowned()" (ngModelChange)="selectionModel.hideUnowned.set($event)" (change)="onChange()" [disabled]="disabled">
-            <label class="form-check-label w-100" for="hideUnowned"><small i18n>Hide unowned</small></label>
+            <label class="form-check-label w-100" for="hideUnowned"><ng-container i18n>Hide unowned</ng-container></label>
           </div>
         </div>
       }

src-ui/src/app/components/document-detail/document-detail.component.html

@@ -46,24 +46,24 @@
     </button>
     <div ngbDropdownMenu aria-labelledby="actionsDropdown" class="shadow">
       <button ngbDropdownItem (click)="reprocess()" [disabled]="!userCanEdit || !userIsOwner">
-        <i-bs width="1em" height="1em" name="arrow-counterclockwise" class="me-1"></i-bs><span i18n>Reprocess</span>
+        <i-bs width="1em" height="1em" name="arrow-counterclockwise" class="me-2"></i-bs><span i18n>Reprocess</span>
       </button>
 
       <button ngbDropdownItem (click)="printDocument()" [hidden]="useNativePdfViewer || isMobile">
-        <i-bs width="1em" height="1em" name="printer" class="me-1"></i-bs><span i18n>Print</span>
+        <i-bs width="1em" height="1em" name="printer" class="me-2"></i-bs><span i18n>Print</span>
       </button>
 
       <button ngbDropdownItem (click)="moreLike()">
-        <i-bs width="1em" height="1em" name="diagram-3" class="me-1"></i-bs><span i18n>More like this</span>
+        <i-bs width="1em" height="1em" name="diagram-3" class="me-2"></i-bs><span i18n>More like this</span>
       </button>
 
       <button ngbDropdownItem (click)="editPdf()" [disabled]="!userIsOwner || !userCanEdit || originalContentRenderType !== ContentRenderType.PDF">
-        <i-bs name="pencil" class="me-1"></i-bs><ng-container i18n>PDF Editor</ng-container>
+        <i-bs name="pencil" class="me-2"></i-bs><ng-container i18n>PDF Editor</ng-container>
       </button>
 
       @if (userIsOwner && (requiresPassword || password)) {
         <button ngbDropdownItem (click)="removePassword()" [disabled]="!password">
-          <i-bs name="unlock" class="me-1"></i-bs><ng-container i18n>Remove Password</ng-container>
+          <i-bs name="unlock" class="me-2"></i-bs><ng-container i18n>Remove Password</ng-container>
         </button>
       }
     </div>
@@ -75,11 +75,11 @@
     </button>
     <div ngbDropdownMenu aria-labelledby="sendDropdown" class="shadow">
       <button ngbDropdownItem (click)="openShareLinks()" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.ShareLink }">
-        <i-bs name="link" class="me-1"></i-bs><span i18n>Share Links</span>
+        <i-bs name="link" class="me-2"></i-bs><span i18n>Share Links</span>
       </button>
       @if (emailEnabled) {
         <button ngbDropdownItem (click)="openEmailDocument()">
-          <i-bs name="envelope" class="me-1"></i-bs><span i18n>Email</span>
+          <i-bs name="envelope" class="me-2"></i-bs><span i18n>Email</span>
         </button>
       }
     </div>

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html

@@ -87,16 +87,16 @@
         </button>
         <div ngbDropdownMenu aria-labelledby="dropdownSelect" class="shadow">
           <button ngbDropdownItem (click)="reprocessSelected()" [disabled]="!userCanEditAll && !userCanEditAll">
-            <i-bs name="body-text" class="me-1"></i-bs><ng-container i18n>Reprocess</ng-container>
+            <i-bs name="body-text" class="me-2"></i-bs><ng-container i18n>Reprocess</ng-container>
           </button>
           <button ngbDropdownItem (click)="rotateSelected()" [disabled]="!userOwnsAll && !userCanEditAll">
-            <i-bs name="arrow-clockwise" class="me-1"></i-bs><ng-container i18n>Rotate</ng-container>
+            <i-bs name="arrow-clockwise" class="me-2"></i-bs><ng-container i18n>Rotate</ng-container>
           </button>
           <button ngbDropdownItem (click)="mergeSelected()" [disabled]="!userCanAdd || list.allSelected || list.selectedCount < 2">
-            <i-bs name="journals" class="me-1"></i-bs><ng-container i18n>Merge</ng-container>
+            <i-bs name="journals" class="me-2"></i-bs><ng-container i18n>Merge</ng-container>
           </button>
           <button ngbDropdownItem (click)="mergeSelectedAsVersions()" [disabled]="!userOwnsAll || !userCanEditAll || !userCanDelete || list.allSelected || list.selectedCount < 2">
-            <i-bs name="journal-bookmark-fill" class="me-1"></i-bs><ng-container i18n>Merge as versions</ng-container>
+            <i-bs name="journal-bookmark-fill" class="me-2"></i-bs><ng-container i18n>Merge as versions</ng-container>
           </button>
         </div>
       </div>
@@ -116,12 +116,12 @@
       <div ngbDropdownMenu aria-labelledby="dropdownSend" class="shadow">
         @if (permissionService.currentUserCan(PermissionAction.Add, PermissionType.ShareLinkBundle)) {
           <button ngbDropdownItem (click)="createShareLinkBundle()" [disabled]="!canSendSelection">
-            <i-bs name="link" class="me-1"></i-bs><ng-container i18n>Create a share link bundle</ng-container>
+            <i-bs name="link" class="me-2"></i-bs><ng-container i18n>Create a share link bundle</ng-container>
           </button>
         }
         @if (permissionService.currentUserCan(PermissionAction.View, PermissionType.ShareLinkBundle)) {
           <button ngbDropdownItem (click)="manageShareLinkBundles()">
-            <i-bs name="list-ul" class="me-1"></i-bs><ng-container i18n>Manage share link bundles</ng-container>
+            <i-bs name="list-ul" class="me-2"></i-bs><ng-container i18n>Manage share link bundles</ng-container>
           </button>
         }
         @if (
@@ -133,7 +133,7 @@
         }
         @if (emailEnabled) {
           <button ngbDropdownItem (click)="emailSelected()" [disabled]="!canSendSelection">
-            <i-bs name="envelope" class="me-1"></i-bs><ng-container i18n>Email</ng-container>
+            <i-bs name="envelope" class="me-2"></i-bs><ng-container i18n>Email</ng-container>
           </button>
         }
       </div>

src-ui/src/styles.scss

@@ -578,6 +578,7 @@ ul.pagination {
 }
 
 .dropdown-menu {
+  --bs-dropdown-font-size: var(--pngx-body-font-size);
   background-color: var(--bs-body-bg);
 
   .dropdown-divider {