Visual tweaks: spacing, borders

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

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-dark sticky-top bg-primary flex-md-nowrap p-0 shadow">
+<nav class="navbar navbar-dark sticky-top bg-primary flex-md-nowrap p-0 shadow-sm">
   <button class="navbar-toggler d-md-none collapsed border-0" type="button" data-toggle="collapse"
     data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation"
     (click)="isMenuCollapsed = !isMenuCollapsed">

src-ui/src/app/components/common/page-header/page-header.component.html

@@ -1,8 +1,8 @@
-<div class="row pt-3 pb-3 pb-md-1 mb-3 border-bottom align-items-center">
+<div class="row pt-3 pb-3 pb-md-2 align-items-center">
   <div class="col-md text-truncate">
     <h3 class="text-truncate" style="line-height: 1.4">
       {{title}}
-      <span *ngIf="subTitle" class="h6 d-block d-md-inline fw-normal ms-md-3 text-truncate" style="line-height: 1.4">{{subTitle}}</span>
+      <span *ngIf="subTitle" class="h6 mb-0 d-block d-md-inline fw-normal ms-md-3 text-truncate" style="line-height: 1.4">{{subTitle}}</span>
     </h3>
   </div>
   <div class="btn-toolbar col col-md-auto">

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

@@ -1,9 +1,9 @@
 <pngx-page-header title="Dashboard" [subTitle]="subtitle" i18n-title>
-  <pngx-logo extra_classes="d-none d-md-block mt-n2 p-1" height="4.5rem"></pngx-logo>
+  <pngx-logo extra_classes="d-none d-md-block mt-n2 me-1" height="3.5rem"></pngx-logo>
 </pngx-page-header>
 
 <div class="row">
-  <div class="col-12 col-md-8 col-lg-9 mb-4">
+  <div class="col-auto col-lg-8 col-xl-9 mb-4">
     <div class="row row-cols-1 g-4" tourAnchor="tour.dashboard">
       <div *ngIf="savedViewService.loading" class="col">
         <div class="spinner-border spinner-border-sm me-2" role="status"></div>
@@ -23,7 +23,7 @@
       </ng-container>
     </div>
   </div>
-  <div class="col-12 col-md-4 col-lg-3">
+  <div class="col-auto col-lg-4 col-xl-3">
     <div class="row row-cols-1 g-4">
       <div class="col">
         <pngx-statistics-widget></pngx-statistics-widget>

src-ui/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html

@@ -14,14 +14,14 @@
     </thead>
     <tbody *pngxIfPermissions="{ action: PermissionAction.View, type: PermissionType.Document }">
       <tr *ngFor="let doc of documents" (mouseleave)="mouseLeaveCard()">
-        <td class="py-3"><a routerLink="/documents/{{doc.id}}" class="btn-link text-dark text-decoration-none">{{doc.created_date | customDate}}</a></td>
+        <td class="py-2 py-md-3"><a routerLink="/documents/{{doc.id}}" class="btn-link text-dark text-decoration-none">{{doc.created_date | customDate}}</a></td>
-        <td class="py-3">
+        <td class="py-2 py-md-3">
           <a routerLink="/documents/{{doc.id}}" title="Edit" i18n-title class="btn-link text-dark text-decoration-none">{{doc.title | documentTitle}}</a>
         </td>
-        <td class="py-3 d-none d-md-table-cell">
+        <td class="py-2 py-md-3 d-none d-md-table-cell">
           <pngx-tag [tag]="t" *ngFor="let t of doc.tags$ | async" class="ms-1" (click)="clickTag(t, $event)"></pngx-tag>
         </td>
-        <td class="position-relative py-3 d-none d-md-table-cell">
+        <td class="position-relative py-2 py-md-3 d-none d-md-table-cell">
           <a *ngIf="doc.correspondent !== null" class="btn-link" routerLink="/documents" [queryParams]="getCorrespondentQueryParams(doc.correspondent)">{{(doc.correspondent$ | async)?.name}}</a>
           <div class="btn-group position-absolute top-50 end-0 translate-middle-y">
             <a [href]="getPreviewUrl(doc)" title="View Preview" i18n-title target="_blank" class="btn px-4 btn-dark border-dark-subtle"

src-ui/src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html

@@ -9,7 +9,7 @@
     </form>
     <div class="fixed-bottom p-2 p-md-4" [ngClass]="slimSidebarEnabled ? 'col-slim' : 'offset-md-3 offset-lg-2'">
       <div class="row d-flex justify-content-end">
-        <div class="col-12 col-md-4 col-lg-3 d-flex px-4 justify-content-between align-items-center">
+        <div class="col col-lg-4 col-xl-3 d-flex px-4 justify-content-between align-items-center">
           <p class="m-0 small text-muted" *ngIf="getStatus().length > 0">{{getStatusSummary()}}</p>
           <a *ngIf="getStatusCompleted().length > 0" class="btn-link" (click)="dismissCompleted()" [routerLink]="[]" >
             <span class="me-1" i18n="This button dismisses all status messages about processed documents on the dashboard (failed and successful)">Dismiss completed</span>
@@ -41,7 +41,7 @@
 
 <ng-template #consumerAlert let-status>
   <div class="row d-flex justify-content-end">
-    <div class="col-12 col-md-4 col-lg-3">
+    <div class="col col-lg-4 col-xl-3">
       <ngb-alert type="secondary" class="mt-2 mb-0" [dismissible]="isFinished(status)" (closed)="dismiss(status)">
         <h6 class="alert-heading">{{status.filename}}</h6>
         <p class="mb-0 pb-1" *ngIf="!isFinished(status) || (isFinished(status) && !status.documentId)">{{status.message}}</p>

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

@@ -81,7 +81,7 @@
 
 </pngx-page-header>
 
-<div class="row sticky-top pt-3 pt-sm-4 pb-3 pb-lg-4 bg-body">
+<div class="row sticky-top pb-3 bg-body">
   <pngx-filter-editor [hidden]="isBulkEditing" [(filterRules)]="list.filterRules" [unmodifiedFilterRules]="unmodifiedFilterRules" [selectionData]="list.selectionData" #filterEditor></pngx-filter-editor>
   <pngx-bulk-editor [hidden]="!isBulkEditing"></pngx-bulk-editor>
 </div>