Fix: random styling fixes

src-ui/src/app/components/admin/settings/settings.component.html

@@ -144,7 +144,7 @@
               <div class="col-md-3 col-form-label pt-0">
                 <span i18n>Theme Color</span>
               </div>
-              <div class="col col-md-3">
+              <div class="col col-md-4">
                 <pngx-input-color i18n-title formControlName="themeColor" [error]="error?.color"></pngx-input-color>
               </div>
               <div class="col-2">

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

@@ -1,6 +1,6 @@
 <pngx-page-header [title]="getTitle()">
 
-  <div ngbDropdown class="d-flex">
+  <div ngbDropdown class="btn-group flex-fill">
     <button class="btn btn-sm btn-outline-primary" id="dropdownSelect" ngbDropdownToggle>
       <i-bs name="text-indent-left"></i-bs>
       <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Select</ng-container></div>
@@ -11,7 +11,7 @@
       <button ngbDropdownItem (click)="list.selectAll()" i18n>Select all</button>
     </div>
   </div>
-  <div ngbDropdown class="d-flex">
+  <div ngbDropdown class="btn-group flex-fill">
     <button class="btn btn-sm btn-outline-primary" id="dropdownDisplayFields" ngbDropdownToggle>
       <i-bs name="card-heading"></i-bs>
       <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Show</ng-container></div>
@@ -43,7 +43,10 @@
   </div>
 
   <div ngbDropdown class="btn-group flex-fill">
-    <button class="btn btn-outline-primary btn-sm" id="dropdownBasic1" ngbDropdownToggle i18n>Sort</button>
+    <button class="btn btn-outline-primary btn-sm" id="dropdownBasic1" ngbDropdownToggle>
+      <i-bs name="arrow-down-up"></i-bs>
+      <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Sort</ng-container></div>
+    </button>
     <div ngbDropdownMenu aria-labelledby="dropdownBasic1" class="shadow dropdown-menu-right">
       <div class="w-100 d-flex pb-2 mb-1 border-bottom">
         <input type="radio" class="btn-check" [value]="false" [(ngModel)]="listSortReverse" id="listSortReverseFalse">
@@ -67,7 +70,8 @@
 
   <div class="btn-group flex-fill" *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.SavedView }" ngbDropdown role="group">
     <button class="btn btn-sm btn-outline-primary dropdown-toggle flex-fill" tourAnchor="tour.documents-views" ngbDropdownToggle>
-      <ng-container i18n>Views</ng-container>
+      <i-bs class="me-1" name="window-stack"></i-bs>
+      <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Views</ng-container></div>
       @if (savedViewIsModified) {
         <div class="position-absolute top-0 start-100 p-2 translate-middle badge bg-secondary border border-light rounded-circle">
           <span class="visually-hidden">selected</span>

src-ui/src/main.ts

@@ -27,6 +27,7 @@ import {
   arrowClockwise,
   arrowCounterclockwise,
   arrowDown,
+  arrowDownUp,
   arrowLeft,
   arrowRepeat,
   arrowRight,
@@ -224,6 +225,7 @@ const icons = {
   arrowClockwise,
   arrowCounterclockwise,
   arrowDown,
+  arrowDownUp,
   arrowLeft,
   arrowRepeat,
   arrowRight,

src-ui/src/styles.scss

@@ -25,6 +25,9 @@ $form-file-button-hover-bg: var(--pngx-bg-alt);
 .mb-n2 {
   margin-bottom: -0.5rem;
 }
+.ms-n1 {
+  margin-left: -0.25rem;
+}
 .ms-n2 {
   margin-left: -0.5rem;
 }