From 75c3b1afc4e2062f7761014476e8257c478bb657 Mon Sep 17 00:00:00 2001
From: Ryan Carpenter <ryan.carpenter@omnifederal.com>
Date: Wed, 29 Apr 2026 21:54:13 -0600
Subject: [PATCH 01/19] Fix Teams Dropdown

---
 .../admin/admin-users/dashboard/user-dashboard.component.ts   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/web-app/admin/src/app/admin/admin-users/dashboard/user-dashboard.component.ts b/web-app/admin/src/app/admin/admin-users/dashboard/user-dashboard.component.ts
index dfdea1c0e..6ea1d1c13 100644
--- a/web-app/admin/src/app/admin/admin-users/dashboard/user-dashboard.component.ts
+++ b/web-app/admin/src/app/admin/admin-users/dashboard/user-dashboard.component.ts
@@ -137,8 +137,8 @@ export class UserDashboardComponent implements OnInit, OnDestroy {
       })
       .pipe(takeUntil(this.destroy$))
       .subscribe((results: any) => {
-        const items = Array.isArray(results) ? results : results?.items;
-        this.teams = (items || []) as Team[];
+        const page = Array.isArray(results) ? results[0] : results;
+        this.teams = (page?.items ?? []) as Team[];
       });
   }
 

From c1bc7835c718ab8380749826d72dc145ae087bbf Mon Sep 17 00:00:00 2001
From: Ryan Carpenter <ryan.carpenter@omnifederal.com>
Date: Thu, 30 Apr 2026 07:38:36 -0600
Subject: [PATCH 02/19] style fixes

---
 .../create-device.component.scss              |   5 +
 ...n-event-form-preview-dialog.component.html |  29 +-
 ...n-event-form-preview-dialog.component.scss |  60 +++-
 .../field-dialog/field-dialog.component.html  | 240 +++++++++++----
 .../field-dialog/field-dialog.component.scss  | 288 +++++++++++-------
 .../form-details/form-details.component.scss  |   6 +-
 .../create-event/create-event.component.scss  |   5 +
 .../event-details.component.html              |  12 +-
 .../event-details.component.scss              |  92 +++++-
 .../admin-service.component.html              |  61 ++--
 .../admin-service.component.scss              | 200 ++++++++----
 .../create-layer/create-layer.component.scss  |   5 +
 .../create-team/create-team.component.scss    |   5 +
 .../team-details/team-details.component.html  |   6 +-
 .../team-details/team-details.component.scss  |  17 +-
 .../create-user/create-user.component.scss    |   9 +-
 .../search-modal/search-modal.component.scss  |  25 +-
 web-app/admin/src/styles.scss                 |  57 ----
 18 files changed, 780 insertions(+), 342 deletions(-)

diff --git a/web-app/admin/src/app/admin/admin-devices/create-device/create-device.component.scss b/web-app/admin/src/app/admin/admin-devices/create-device/create-device.component.scss
index 208541232..a646c7924 100644
--- a/web-app/admin/src/app/admin/admin-devices/create-device/create-device.component.scss
+++ b/web-app/admin/src/app/admin/admin-devices/create-device/create-device.component.scss
@@ -166,4 +166,9 @@ mat-form-field {
   .mat-autocomplete-panel {
     z-index: 10000 !important;
   }
+}
+
+.btn-primary {
+  background-color: #1e88e5;
+  color: #fff;
 }
\ No newline at end of file
diff --git a/web-app/admin/src/app/admin/admin-event/admin-event-form/admin-event-form-preview/form-preview-dialog/admin-event-form-preview-dialog.component.html b/web-app/admin/src/app/admin/admin-event/admin-event-form/admin-event-form-preview/form-preview-dialog/admin-event-form-preview-dialog.component.html
index 131cdd4a3..32cadcf98 100644
--- a/web-app/admin/src/app/admin/admin-event/admin-event-form/admin-event-form-preview/form-preview-dialog/admin-event-form-preview-dialog.component.html
+++ b/web-app/admin/src/app/admin/admin-event/admin-event-form/admin-event-form-preview/form-preview-dialog/admin-event-form-preview-dialog.component.html
@@ -1,14 +1,21 @@
-<h2 mat-dialog-title>{{formDefinition.name}}</h2>
-<mat-dialog-content class="mat-typography">
-  <div class="admin-event-form-preview">
-    <observation-edit-form
-      [formGroup]="formGroup"
-      [definition]="formDefinition"
-      [deletable]="false"
-      [options]="{expand: true}">
-    </observation-edit-form>
+<h2 mat-dialog-title>{{ formDefinition.name }}</h2>
+
+<mat-dialog-content class="form-preview-dialog-content">
+  <div class="form-preview-viewport">
+    <div class="form-preview-scale">
+      <observation-edit-form
+        [formGroup]="formGroup"
+        [definition]="formDefinition"
+        [deletable]="false"
+        [options]="{ expand: true }"
+      >
+      </observation-edit-form>
+    </div>
   </div>
 </mat-dialog-content>
+
 <mat-dialog-actions align="end">
-  <button mat-button [mat-dialog-close]="true" color="primary" cdkFocusInitial>Close</button>
-</mat-dialog-actions>
\ No newline at end of file
+  <button mat-button [mat-dialog-close]="true" color="primary" cdkFocusInitial>
+    Close
+  </button>
+</mat-dialog-actions>
diff --git a/web-app/admin/src/app/admin/admin-event/admin-event-form/admin-event-form-preview/form-preview-dialog/admin-event-form-preview-dialog.component.scss b/web-app/admin/src/app/admin/admin-event/admin-event-form/admin-event-form-preview/form-preview-dialog/admin-event-form-preview-dialog.component.scss
index 5c4b94481..9e30d16d6 100644
--- a/web-app/admin/src/app/admin/admin-event/admin-event-form/admin-event-form-preview/form-preview-dialog/admin-event-form-preview-dialog.component.scss
+++ b/web-app/admin/src/app/admin/admin-event/admin-event-form/admin-event-form-preview/form-preview-dialog/admin-event-form-preview-dialog.component.scss
@@ -1,3 +1,59 @@
-.admin-event-form-preview {
-  margin: 8px 0;
+:host {
+  display: block;
+}
+
+.form-preview-dialog-content {
+  padding: 0 !important;
+  margin: 0;
+  overflow: hidden;
+}
+
+.form-preview-viewport {
+  width: 100%;
+  max-height: 70vh;
+  overflow: auto;
+  background: #fff;
+  border-top: 1px solid #eee;
+}
+
+.form-preview-scale {
+  width: 600px;
+  transform-origin: top left;
+  margin-bottom: -24%;
+  padding: 5px;
+}
+
+:host ::ng-deep .form-preview-scale {
+  font-family: 'Times New Roman', Times, serif;
+  color: #000;
+  font-size: 14px;
+  line-height: 1.15;
+}
+
+:host ::ng-deep .form-preview-scale table {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  table-layout: fixed;
+}
+
+:host ::ng-deep .form-preview-scale td,
+:host ::ng-deep .form-preview-scale th {
+  border: 1px solid #444;
+  padding: 2px 6px;
+  vertical-align: middle;
+  color: #000;
+}
+
+:host ::ng-deep .form-preview-scale input,
+:host ::ng-deep .form-preview-scale textarea,
+:host ::ng-deep .form-preview-scale select {
+  font-family: 'Times New Roman', Times, serif;
+  font-size: 14px;
+  color: #000;
+}
+
+:host ::ng-deep h2[mat-dialog-title],
+:host ::ng-deep .mat-mdc-dialog-title {
+  color: #1e88e5;
 }
\ No newline at end of file
diff --git a/web-app/admin/src/app/admin/admin-event/admin-event-form/form-details/field-dialog/field-dialog.component.html b/web-app/admin/src/app/admin/admin-event/admin-event-form/form-details/field-dialog/field-dialog.component.html
index a9bf93fe8..0b3265e12 100644
--- a/web-app/admin/src/app/admin/admin-event/admin-event-form/form-details/field-dialog/field-dialog.component.html
+++ b/web-app/admin/src/app/admin/admin-event/admin-event-form/form-details/field-dialog/field-dialog.component.html
@@ -3,15 +3,20 @@
     <h2 mat-dialog-title>{{ isEditMode ? 'Edit Field' : 'Add New Field' }}</h2>
   </div>
 
-  <mat-dialog-content>
+  <mat-dialog-content class="dialog-body-padding">
     <div class="dialog-form">
       <div class="config-inline-item">
         <div class="config-inline-label">
           <strong>Field Type</strong>
         </div>
         <div class="config-inline-control">
-          <select class="form-input" [(ngModel)]="field.type" name="fieldType" [disabled]="isEditMode"
-            (ngModelChange)="onFieldTypeChange($event)">
+          <select
+            class="form-input"
+            [(ngModel)]="field.type"
+            name="fieldType"
+            [disabled]="isEditMode"
+            (ngModelChange)="onFieldTypeChange($event)"
+          >
             <option *ngFor="let type of data.fieldTypes" [value]="type.name">
               {{ type.title }}
             </option>
@@ -29,8 +34,14 @@ <h2 mat-dialog-title>{{ isEditMode ? 'Edit Field' : 'Add New Field' }}</h2>
           <strong>Field Title *</strong>
         </div>
         <div class="config-inline-control">
-          <input type="text" class="form-input" [(ngModel)]="field.title" placeholder="Enter field title"
-            name="fieldTitle" required />
+          <input
+            type="text"
+            class="form-input"
+            [(ngModel)]="field.title"
+            placeholder="Enter field title"
+            name="fieldTitle"
+            required
+          />
           <p class="field-error" *ngIf="field.title && isFieldNameDuplicate()">
             A field with this name already exists. Please choose a different
             title.
@@ -38,9 +49,16 @@ <h2 mat-dialog-title>{{ isEditMode ? 'Edit Field' : 'Add New Field' }}</h2>
         </div>
       </div>
 
-      <div *ngIf="field.type === 'dropdown' && !data.isMemberField" class="checkbox-section">
+      <div
+        *ngIf="field.type === 'dropdown' && !data.isMemberField"
+        class="checkbox-section"
+      >
         <label class="checkbox-label">
-          <input type="checkbox" [(ngModel)]="field.multiselect" name="fieldMultiselect" />
+          <input
+            type="checkbox"
+            [(ngModel)]="field.multiselect"
+            name="fieldMultiselect"
+          />
           <span>Allow Multiple Selections</span>
         </label>
         <p class="field-hint">
@@ -50,7 +68,11 @@ <h2 mat-dialog-title>{{ isEditMode ? 'Edit Field' : 'Add New Field' }}</h2>
 
       <div *ngIf="field.type === 'userDropdown'" class="checkbox-section">
         <label class="checkbox-label">
-          <input type="checkbox" [(ngModel)]="field.multiselect" name="fieldMultiselectUser" />
+          <input
+            type="checkbox"
+            [(ngModel)]="field.multiselect"
+            name="fieldMultiselectUser"
+          />
           <span>Allow Multiple Selections</span>
         </label>
         <p class="field-hint">
@@ -64,8 +86,13 @@ <h2 mat-dialog-title>{{ isEditMode ? 'Edit Field' : 'Add New Field' }}</h2>
             <strong>Minimum Attachments</strong>
           </div>
           <div class="config-inline-control">
-            <input type="number" class="form-input" [(ngModel)]="field.min" placeholder="No Attachment Minimum"
-              name="fieldMin" />
+            <input
+              type="number"
+              class="form-input"
+              [(ngModel)]="field.min"
+              placeholder="No Attachment Minimum"
+              name="fieldMin"
+            />
           </div>
         </div>
 
@@ -74,8 +101,13 @@ <h2 mat-dialog-title>{{ isEditMode ? 'Edit Field' : 'Add New Field' }}</h2>
             <strong>Maximum Attachments</strong>
           </div>
           <div class="config-inline-control">
-            <input type="number" class="form-input" [(ngModel)]="field.max" placeholder="No Attachment Maximum"
-              name="fieldMax" />
+            <input
+              type="number"
+              class="form-input"
+              [(ngModel)]="field.max"
+              placeholder="No Attachment Maximum"
+              name="fieldMax"
+            />
           </div>
         </div>
 
@@ -89,10 +121,17 @@ <h2 mat-dialog-title>{{ isEditMode ? 'Edit Field' : 'Add New Field' }}</h2>
           </div>
           <div class="config-inline-control">
             <div class="checkbox-group">
-              <label class="checkbox-label" *ngFor="let type of data.attachmentAllowedTypes">
-                <input type="checkbox" [checked]="isAttachmentTypeSelected(type.name)" (change)="
+              <label
+                class="checkbox-label"
+                *ngFor="let type of data.attachmentAllowedTypes"
+              >
+                <input
+                  type="checkbox"
+                  [checked]="isAttachmentTypeSelected(type.name)"
+                  (change)="
                     toggleAttachmentType(type.name, $any($event.target).checked)
-                  " />
+                  "
+                />
                 <span>{{ type.title }}</span>
               </label>
             </div>
@@ -111,7 +150,13 @@ <h2 mat-dialog-title>{{ isEditMode ? 'Edit Field' : 'Add New Field' }}</h2>
             <strong>Minimum Value</strong>
           </div>
           <div class="config-inline-control">
-            <input type="number" class="form-input" [(ngModel)]="field.min" placeholder="No Minimum" name="fieldMin" />
+            <input
+              type="number"
+              class="form-input"
+              [(ngModel)]="field.min"
+              placeholder="No Minimum"
+              name="fieldMin"
+            />
           </div>
         </div>
 
@@ -120,7 +165,13 @@ <h2 mat-dialog-title>{{ isEditMode ? 'Edit Field' : 'Add New Field' }}</h2>
             <strong>Maximum Value</strong>
           </div>
           <div class="config-inline-control">
-            <input type="number" class="form-input" [(ngModel)]="field.max" placeholder="No Maximum" name="fieldMax" />
+            <input
+              type="number"
+              class="form-input"
+              [(ngModel)]="field.max"
+              placeholder="No Maximum"
+              name="fieldMax"
+            />
           </div>
         </div>
 
@@ -129,21 +180,34 @@ <h2 mat-dialog-title>{{ isEditMode ? 'Edit Field' : 'Add New Field' }}</h2>
             <strong>Default Value</strong>
           </div>
           <div class="config-inline-control">
-            <input type="number" class="form-input" [(ngModel)]="field.value" [min]="field.min" [max]="field.max"
-              placeholder="No Default" name="fieldValue" />
+            <input
+              type="number"
+              class="form-input"
+              [(ngModel)]="field.value"
+              [min]="field.min"
+              [max]="field.max"
+              placeholder="No Default"
+              name="fieldValue"
+            />
           </div>
         </div>
       </div>
 
-      <div *ngIf="
-          field.type === 'textfield' ||
-          field.type === 'email'
-        " class="config-inline-item">
+      <div
+        *ngIf="field.type === 'textfield' || field.type === 'email'"
+        class="config-inline-item"
+      >
         <div class="config-inline-label">
           <strong>Default Value</strong>
         </div>
         <div class="config-inline-control">
-          <input type="text" class="form-input" [(ngModel)]="field.value" placeholder="No Default" name="fieldValue" />
+          <input
+            type="text"
+            class="form-input"
+            [(ngModel)]="field.value"
+            placeholder="No Default"
+            name="fieldValue"
+          />
         </div>
       </div>
 
@@ -152,8 +216,13 @@ <h2 mat-dialog-title>{{ isEditMode ? 'Edit Field' : 'Add New Field' }}</h2>
           <strong>Default Value</strong>
         </div>
         <div class="config-inline-control">
-          <textarea class="form-input" rows="3" [(ngModel)]="field.value" placeholder="No Default"
-            name="fieldValue"></textarea>
+          <textarea
+            class="form-input"
+            rows="3"
+            [(ngModel)]="field.value"
+            placeholder="No Default"
+            name="fieldValue"
+          ></textarea>
         </div>
       </div>
 
@@ -164,46 +233,87 @@ <h2 mat-dialog-title>{{ isEditMode ? 'Edit Field' : 'Add New Field' }}</h2>
         </label>
       </div>
 
-      <div *ngIf="showAddOptions() && !data.isMemberField" class="config-inline-item">
+      <div
+        *ngIf="showAddOptions() && !data.isMemberField"
+        class="config-inline-item"
+      >
         <div class="config-inline-label">
           <strong>Field Options</strong>
         </div>
         <div class="config-inline-control">
-          <div class="options-list" *ngIf="field.choices && field.choices.length > 0">
-            <div class="option-item" *ngFor="let option of field.choices; let i = index">
-              <button type="button" class="icon-button" *ngIf="i > 0" (click)="moveOptionUp(option)" title="Move up">
+          <div
+            class="options-list"
+            *ngIf="field.choices && field.choices.length > 0"
+          >
+            <div
+              class="option-item"
+              *ngFor="let option of field.choices; let i = index"
+            >
+              <button
+                type="button"
+                class="icon-button"
+                *ngIf="i > 0"
+                (click)="moveOptionUp(option)"
+                title="Move up"
+              >
                 <i class="fa fa-arrow-up"></i>
               </button>
-              <button type="button" class="icon-button" *ngIf="i < field.choices.length - 1"
-                (click)="moveOptionDown(option)" title="Move down">
+              <button
+                type="button"
+                class="icon-button"
+                *ngIf="i < field.choices.length - 1"
+                (click)="moveOptionDown(option)"
+                title="Move down"
+              >
                 <i class="fa fa-arrow-down"></i>
               </button>
               <span class="option-title">{{ option.title }}</span>
-              <button type="button" class="icon-button delete-button" (click)="deleteOption(option)"
-                title="Delete option">
+              <button
+                type="button"
+                class="icon-button delete-button"
+                (click)="deleteOption(option)"
+                title="Delete option"
+              >
                 <i class="fa fa-trash"></i>
               </button>
             </div>
           </div>
           <div class="add-option-row">
-            <input type="text" class="form-input" [(ngModel)]="newOptionTitle" placeholder="New option title"
-              name="newOptionTitle" (keyup.enter)="addOption(newOptionTitle)" />
-            <button type="button" class="action-button btn-primary" (click)="addOption(newOptionTitle)"
-              [disabled]="!newOptionTitle">
+            <input
+              type="text"
+              class="form-input"
+              [(ngModel)]="newOptionTitle"
+              placeholder="New option title"
+              name="newOptionTitle"
+              (keyup.enter)="addOption(newOptionTitle)"
+            />
+            <button
+              type="button"
+              class="action-button btn-primary"
+              (click)="addOption(newOptionTitle)"
+              [disabled]="!newOptionTitle"
+            >
               <i class="fa fa-plus"></i> Add Option
             </button>
           </div>
         </div>
       </div>
 
-      <div *ngIf="
+      <div
+        *ngIf="
           field.type === 'dropdown' && !field.multiselect && !data.isMemberField
-        " class="config-inline-item">
+        "
+        class="config-inline-item"
+      >
         <div class="config-inline-label">
           <strong>Default Value</strong>
         </div>
         <div class="config-inline-control">
-          <select class="form-input" [(ngModel)]="field.value" name="fieldDefaultValue">
+          <select
+            class="form-input"
+            [(ngModel)]="field.value"
+            name="fieldDefaultValue"
+          >
             <option [value]="null">No Default</option>
             <option *ngFor="let choice of field.choices" [value]="choice.title">
               {{ choice.title }}
@@ -212,41 +322,67 @@ <h2 mat-dialog-title>{{ isEditMode ? 'Edit Field' : 'Add New Field' }}</h2>
         </div>
       </div>
 
-      <div *ngIf="
+      <div
+        *ngIf="
           field.type === 'dropdown' && field.multiselect && !data.isMemberField
-        " class="config-inline-item">
+        "
+        class="config-inline-item"
+      >
         <div class="config-inline-label">
           <strong>Default Values</strong>
         </div>
         <div class="config-inline-control">
           <div class="checkbox-group">
             <label class="checkbox-label" *ngFor="let choice of field.choices">
-              <input type="checkbox" [checked]="field.value && field.value.includes(choice.title)" (change)="
+              <input
+                type="checkbox"
+                [checked]="field.value && field.value.includes(choice.title)"
+                (change)="
                   toggleDefaultValue(choice.title, $any($event.target).checked)
-                " />
+                "
+              />
               <span>{{ choice.title }}</span>
             </label>
           </div>
         </div>
       </div>
 
-      <div class="checkbox-section" *ngIf="
+      <div
+        class="checkbox-section"
+        *ngIf="
           field.name !== 'timestamp' &&
           field.name !== 'geometry' &&
           field.type !== 'attachment'
-        ">
+        "
+      >
         <label class="checkbox-label">
-          <input type="checkbox" [(ngModel)]="field.required" name="fieldRequired" />
+          <input
+            type="checkbox"
+            [(ngModel)]="field.required"
+            name="fieldRequired"
+          />
           <span>Required Field</span>
         </label>
       </div>
     </div>
   </mat-dialog-content>
 
-  <mat-dialog-actions align="end">
-    <button mat-button (click)="onCancel()">Cancel</button>
-    <button mat-button color="primary" (click)="onSave()" [disabled]="!canSave()" cdkFocusInitial>
+  <mat-dialog-actions align="end" class="dialog-actions">
+    <button
+      mat-button
+      class="dialog-action-button dialog-action-button-cancel"
+      (click)="onCancel()"
+    >
+      Cancel
+    </button>
+    <button
+      mat-button
+      class="dialog-action-button dialog-action-button-primary"
+      (click)="onSave()"
+      [disabled]="!canSave()"
+      cdkFocusInitial
+    >
       {{ isEditMode ? 'Save Changes' : 'Add Field' }}
     </button>
   </mat-dialog-actions>
-</div>
\ No newline at end of file
+</div>
diff --git a/web-app/admin/src/app/admin/admin-event/admin-event-form/form-details/field-dialog/field-dialog.component.scss b/web-app/admin/src/app/admin/admin-event/admin-event-form/form-details/field-dialog/field-dialog.component.scss
index ce12bcf05..8763ae6b7 100644
--- a/web-app/admin/src/app/admin/admin-event/admin-event-form/form-details/field-dialog/field-dialog.component.scss
+++ b/web-app/admin/src/app/admin/admin-event/admin-event-form/form-details/field-dialog/field-dialog.component.scss
@@ -9,49 +9,116 @@ $font-xs: 12px;
 ::ng-deep .add-field-dialog {
   .mat-mdc-dialog-container {
     --mdc-dialog-container-color: #ffffff;
+    --mdc-dialog-subhead-color: #1976d2;
+    --mdc-text-button-label-text-color: #333333;
+    --mat-text-button-state-layer-color: transparent;
+    padding: 0;
   }
 
-  .mdc-dialog__surface {
-    border-radius: 16px;
+  .mdc-dialog__surface,
+  .mat-mdc-dialog-surface {
+    border-radius: 8px;
     overflow: hidden;
+    background: #ffffff;
+  }
+
+  .mat-mdc-dialog-title {
+    padding: 0;
   }
 
-  mat-dialog-content {
-    padding: 0 24px 24px 24px;
+  .mat-mdc-dialog-content.dialog-body-padding {
+    padding: 20px 20px 0 20px !important;
+    margin: 0 !important;
     max-height: 70vh;
+    overflow: auto;
   }
 
-  mat-dialog-actions {
-    padding: 16px 24px 20px 24px;
-    border-top: 1px solid #e5e7eb;
-    margin: 0;
-    gap: 8px;
+  .mat-mdc-dialog-actions.dialog-actions {
+    padding: 18px 20px 18px 20px !important;
+    margin: 0 !important;
+    min-height: 72px;
+    gap: 12px;
+    border-top: none;
+  }
+
+  .dialog-action-button {
+    min-width: 88px !important;
+    height: 38px !important;
+    min-height: 38px !important;
+    padding: 0 16px !important;
+    border-radius: 4px !important;
+    font-size: $font-sm !important;
+    font-weight: 600 !important;
+    line-height: 38px !important;
+    text-transform: none !important;
+    letter-spacing: normal !important;
+    box-shadow: none !important;
+    border: 1px solid transparent !important;
+  }
+
+  .dialog-action-button .mdc-button__label {
+    line-height: 38px;
+  }
+
+  .dialog-action-button-cancel {
+    background-color: #ffffff !important;
+    color: #333333 !important;
+    border-color: transparent !important;
+  }
+
+  .dialog-action-button-cancel:hover {
+    background-color: #f5f5f5 !important;
+  }
+
+  .dialog-action-button-primary {
+    background-color: #e3f2fd !important;
+    color: #1976d2 !important;
+    border-color: #e3f2fd !important;
+  }
+
+  .dialog-action-button-primary:hover:not(:disabled) {
+    background-color: #d7ebfd !important;
+    border-color: #d7ebfd !important;
+  }
+
+  .dialog-action-button-primary:disabled {
+    background-color: #eef3f7 !important;
+    color: rgba(25, 118, 210, 0.45) !important;
+    border-color: #eef3f7 !important;
+  }
+
+  .dialog-action-button .mat-mdc-button-persistent-ripple,
+  .dialog-action-button .mat-ripple,
+  .dialog-action-button .mdc-button__ripple {
+    display: none;
   }
 }
 
 .dialog-modal {
   background: #ffffff;
+  width: 100%;
 }
 
 .dialog-header {
-  padding: 20px 24px 16px 24px;
-  border-bottom: 1px solid #e5e7eb;
-  background: #f9fafb;
+  padding: 0;
+  border-bottom: none;
+  background: #ffffff;
 
   h2[mat-dialog-title] {
     margin: 0;
+    padding: 0;
     font-size: $font-lg;
-    font-weight: 700;
+    font-weight: 500;
     line-height: 1.25;
-    color: #111827;
+    color: #1976d2;
   }
 }
 
 .dialog-form {
   min-width: 500px;
-  background-color: white;
-  border-radius: 12px;
-  padding-top: 20px;
+  background-color: #ffffff;
+  border-radius: 0;
+  padding: 0;
 
   @media (max-width: 640px) {
     min-width: 0;
@@ -59,31 +126,31 @@ $font-xs: 12px;
 
   .config-inline-item {
     display: grid;
-    grid-template-columns: 175px 1fr;
+    grid-template-columns: 175px 320px;
     gap: 16px;
-    align-items: start;
+    align-items: center;
     margin-bottom: 20px;
 
     @media (max-width: 768px) {
       grid-template-columns: 1fr;
-      gap: 10px;
+      gap: 8px;
     }
 
     .config-inline-label {
       display: flex;
       flex-direction: column;
       gap: 6px;
-      padding-top: 8px;
+      padding-top: 0;
 
       strong {
         font-weight: 700;
-        color: #111827;
+        color: #333333;
         font-size: $font-sm;
       }
 
       .field-hint {
         font-size: $font-xs;
-        color: #6b7280;
+        color: #666666;
         margin: 0;
         line-height: 1.45;
       }
@@ -119,7 +186,7 @@ $font-xs: 12px;
         padding: 8px 10px;
         background-color: #fffbeb;
         border: 1px solid #fde68a;
-        border-radius: 6px;
+        border-radius: 4px;
 
         i {
           color: #d97706;
@@ -128,53 +195,90 @@ $font-xs: 12px;
 
       .field-hint {
         font-size: $font-xs;
-        color: #6b7280;
+        color: #666666;
         margin: 0;
         line-height: 1.45;
       }
 
       .form-input {
         width: 100%;
-        min-height: 40px;
-        padding: 10px 14px;
-        border: 1px solid #d1d5db;
-        border-radius: 8px;
+        height: 38px;
+        min-height: 38px;
+        padding: 8px 12px;
+        border: 1px solid #dddddd;
+        border-radius: 3px;
         font-size: $font-sm;
-        color: #111827;
+        color: #555555;
         background: #ffffff;
-        transition: all 0.2s ease;
         box-sizing: border-box;
+        box-shadow: none;
+        transition: border-color 0.2s ease;
+      }
 
-        &:focus {
-          outline: none;
-          border-color: #3b82f6;
-          background-color: #ffffff;
-          box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
-        }
+      .form-input:focus {
+        outline: none;
+        border-color: #1976d2;
+        background-color: #ffffff;
+        box-shadow: none;
       }
 
       textarea.form-input {
-        min-height: 96px;
+        height: auto;
+        min-height: 84px;
         resize: vertical;
       }
 
       select.form-input {
-        min-height: 40px;
-        background-color: #fff;
+        height: 38px;
+        min-height: 38px;
+        background-color: #ffffff;
         cursor: pointer;
-        appearance: none;
-        padding-right: 40px;
-        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
-        background-position: right 12px center;
-        background-repeat: no-repeat;
-        background-size: 18px 18px;
-
-        &:hover {
-          border-color: #9ca3af;
-          background-color: #f9fafb;
-        }
+        appearance: auto;
+        padding-right: 12px;
+        background-image: none;
+      }
+
+      select.form-input:hover {
+        border-color: #bbbbbb;
+        background-color: #ffffff;
+      }
+    }
+  }
+
+  .checkbox-section {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-bottom: 20px;
+    margin-left: 0;
+
+    .checkbox-label {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+      user-select: none;
+
+      input[type='checkbox'] {
+        width: 18px;
+        height: 18px;
+        cursor: pointer;
+        accent-color: #9a6a45;
+      }
+
+      span {
+        font-size: $font-sm;
+        font-weight: 400;
+        color: #333333;
       }
     }
+
+    .field-hint {
+      font-size: $font-xs;
+      color: #666666;
+      margin: 0 0 0 26px;
+      line-height: 1.45;
+    }
   }
 
   .options-list {
@@ -185,30 +289,29 @@ $font-xs: 12px;
     display: flex;
     align-items: center;
     gap: 8px;
-    padding: 12px;
-    background: #f9fafb;
-    border: 1px solid #e5e7eb;
-    border-radius: 8px;
-    margin-bottom: 8px;
+    padding: 8px 0;
+    background: transparent;
+    border: none;
+    border-radius: 0;
+    margin-bottom: 4px;
 
     .option-title {
       flex: 1;
       font-size: $font-sm;
-      color: #111827;
+      color: #333333;
     }
 
     .icon-button {
       padding: 4px 8px;
       border: none;
       background: transparent;
-      color: #6b7280;
+      color: #555555;
       cursor: pointer;
       border-radius: 4px;
-      transition: all 0.2s;
 
       &:hover {
-        background: #e5e7eb;
-        color: #374151;
+        background: #eeeeee;
+        color: #333333;
       }
 
       &.delete-button:hover {
@@ -227,30 +330,30 @@ $font-xs: 12px;
     }
 
     .action-button {
-      padding: 10px 14px;
+      padding: 0 14px;
       border: none;
-      border-radius: 8px;
+      border-radius: 4px;
       font-size: $font-sm;
       font-weight: 600;
       cursor: pointer;
-      transition: all 0.2s;
       white-space: nowrap;
-      min-height: 40px;
+      height: 38px;
+      min-height: 38px;
       display: inline-flex;
       align-items: center;
       gap: 8px;
 
       &.btn-primary {
-        background-color: #2563eb;
-        color: white;
+        background-color: #1976d2;
+        color: #ffffff;
 
         &:hover:not(:disabled) {
-          background-color: #1d4ed8;
+          background-color: #1565c0;
         }
 
         &:disabled {
-          background-color: #d1d5db;
-          color: #6b7280;
+          background-color: #dddddd;
+          color: #777777;
           cursor: not-allowed;
         }
       }
@@ -270,51 +373,8 @@ $font-xs: 12px;
 
       span {
         font-size: $font-sm;
-        color: #111827;
+        color: #333333;
       }
     }
   }
-
-  .checkbox-section {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    margin-bottom: 20px;
-
-    .checkbox-label {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      cursor: pointer;
-      user-select: none;
-
-      input[type='checkbox'] {
-        width: 18px;
-        height: 18px;
-        cursor: pointer;
-      }
-
-      span {
-        font-size: $font-sm;
-        font-weight: 500;
-        color: #333;
-      }
-    }
-
-    .field-hint {
-      font-size: $font-xs;
-      color: #6b7280;
-      margin: 0 0 0 26px;
-      line-height: 1.45;
-    }
-  }
 }
-
-:host ::ng-deep .add-field-dialog .mat-mdc-button,
-:host ::ng-deep .add-field-dialog button[mat-button] {
-  min-height: 40px;
-  border-radius: 8px;
-  font-size: $font-sm;
-  font-weight: 600;
-  text-transform: none;
-}
\ No newline at end of file
diff --git a/web-app/admin/src/app/admin/admin-event/admin-event-form/form-details/form-details.component.scss b/web-app/admin/src/app/admin/admin-event/admin-event-form/form-details/form-details.component.scss
index 7ad67b18f..67676db32 100644
--- a/web-app/admin/src/app/admin/admin-event/admin-event-form/form-details/form-details.component.scss
+++ b/web-app/admin/src/app/admin/admin-event/admin-event-form/form-details/form-details.component.scss
@@ -39,13 +39,14 @@ $font-xs: 12px;
     margin-bottom: 20px;
 
     .field-label {
-      display: block;
+      display: inline-flex;
       font-size: $font-sm;
       font-weight: 700;
       color: #374151;
       margin-bottom: 8px;
       text-transform: uppercase;
       letter-spacing: 0.04em;
+      align-items: flex-end;
     }
 
     .field-content {
@@ -825,7 +826,7 @@ $font-xs: 12px;
   .item-header {
     display: flex;
     flex-direction: row;
-    padding-bottom: 16px;
+    padding: 16px;
     gap: 16px;
   }
 
@@ -910,6 +911,7 @@ $font-xs: 12px;
 
   .actions__location-button {
     padding: 4px;
+    left: 15px;
   }
 
   .actions__location-icon {
diff --git a/web-app/admin/src/app/admin/admin-event/create-event/create-event.component.scss b/web-app/admin/src/app/admin/admin-event/create-event/create-event.component.scss
index 79a6c56f5..a528b50bb 100644
--- a/web-app/admin/src/app/admin/admin-event/create-event/create-event.component.scss
+++ b/web-app/admin/src/app/admin/admin-event/create-event/create-event.component.scss
@@ -132,4 +132,9 @@ mat-form-field {
     padding: 0 !important;
     margin: 0 !important;
   }
+}
+
+.btn-primary {
+  background-color: #1e88e5;
+  color: #fff;
 }
\ No newline at end of file
diff --git a/web-app/admin/src/app/admin/admin-event/event-details/event-details.component.html b/web-app/admin/src/app/admin/admin-event/event-details/event-details.component.html
index 54418eeb4..9a19d4ca9 100644
--- a/web-app/admin/src/app/admin/admin-event/event-details/event-details.component.html
+++ b/web-app/admin/src/app/admin/admin-event/event-details/event-details.component.html
@@ -113,7 +113,10 @@ <h3 class="danger-zone-title">Delete Event</h3>
                 observation and location data. This cannot be undone, and all
                 event data will be unrecoverable.
               </p>
-              <button class="action-button btn-danger btn-right" (click)="deleteEvent()">
+              <button
+                class="action-button btn-danger btn-right"
+                (click)="deleteEvent()"
+              >
                 <i class="fa fa-trash-o"></i> Delete
               </button>
             </div>
@@ -153,6 +156,7 @@ <h3 class="danger-zone-title">Delete Event</h3>
                     >
                       <a
                         class="row-item text-decoration-none"
+                        [class.row-item--editing-members]="editMembers"
                         [routerLink]="['../../users', user.id]"
                       >
                         <div class="row-icon">
@@ -419,7 +423,11 @@ <h3 class="danger-zone-title">Delete Event</h3>
                         >
                           <button
                             class="action-button btn-danger btn-sm"
-                            (click)="removeLayer($event, layer)"
+                            (click)="
+                              $event.preventDefault();
+                              $event.stopPropagation();
+                              removeLayer($event, layer)
+                            "
                             title="Remove Layer"
                           >
                             <i class="fa fa-trash"></i>
diff --git a/web-app/admin/src/app/admin/admin-event/event-details/event-details.component.scss b/web-app/admin/src/app/admin/admin-event/event-details/event-details.component.scss
index b955cfef7..9f9a27e10 100644
--- a/web-app/admin/src/app/admin/admin-event/event-details/event-details.component.scss
+++ b/web-app/admin/src/app/admin/admin-event/event-details/event-details.component.scss
@@ -161,18 +161,20 @@ mat-card {
   display: flex;
   flex-direction: column;
   margin-bottom: 16px;
+  background: #eff6ff;
+  border: 1px solid #bfdbfe;
 
   .action-card-title {
     font-size: $font-lg;
     font-weight: 700;
-    color: #111827;
+    color: #1e40af;
     margin: 0 0 16px;
     line-height: 1.2;
   }
 
   .action-card-description {
     font-size: $font-sm;
-    color: #6b7280;
+    color: #1e3a8a;
     margin: 0 0 24px;
     line-height: 1.55;
     flex: 1;
@@ -334,6 +336,18 @@ mat-card {
   &:hover {
     background-color: #f8fafc;
   }
+
+  &.row-item--editing-members {
+    min-height: 73px;
+
+    .role-select-field {
+      height: 35px;
+      min-height: 35px;
+      width: 150px;
+      min-width: 150px;
+      max-width: 150px;
+    }
+  }
 }
 
 .row-icon {
@@ -424,7 +438,7 @@ mat-card {
   }
 
   .role-select {
-    height: 40px;
+    height: 25px;
     min-width: 120px;
     padding: 0 12px;
     border: 1px solid #d1d5db;
@@ -446,9 +460,11 @@ mat-card {
   }
 
   .role-select-field {
-    width: 140px;
-    min-width: 140px;
-    max-width: 140px;
+    width: 150px;
+    min-width: 150px;
+    max-width: 150px;
+    height: 35px;
+    min-height: 35px;
     font-size: $font-sm;
 
     ::ng-deep .mat-form-field-wrapper {
@@ -462,16 +478,18 @@ mat-card {
     }
 
     ::ng-deep .mat-form-field-flex {
-      min-height: 40px;
+      height: 35px;
+      min-height: 35px;
       padding: 0;
       border: 1px solid #d1d5db;
       border-radius: 8px;
       background-color: #fff;
       transition: all 0.2s ease;
+      align-items: center;
     }
 
     ::ng-deep .mat-form-field-infix {
-      padding: 8px 12px;
+      padding: 0 12px;
       border: 0;
       width: 100%;
     }
@@ -482,7 +500,10 @@ mat-card {
     }
 
     ::ng-deep .mat-select-trigger {
-      min-height: auto;
+      height: 35px;
+      min-height: 35px;
+      display: flex;
+      align-items: center;
     }
 
     ::ng-deep .mat-select-arrow-wrapper {
@@ -490,12 +511,59 @@ mat-card {
       padding-right: 8px;
     }
 
-    &.mat-focused ::ng-deep .mat-form-field-flex {
+    ::ng-deep .mat-mdc-text-field-wrapper {
+      height: 35px;
+      min-height: 35px;
+      padding: 0;
+      border: 1px solid #d1d5db;
+      border-radius: 8px;
+      background-color: #fff;
+      transition: all 0.2s ease;
+    }
+
+    ::ng-deep .mat-mdc-form-field-flex {
+      height: 35px;
+      min-height: 35px;
+      align-items: center;
+    }
+
+    ::ng-deep .mat-mdc-form-field-infix {
+      min-height: 35px;
+      height: 35px;
+      padding: 0 12px;
+      display: flex;
+      align-items: center;
+    }
+
+    ::ng-deep .mat-mdc-select-trigger {
+      height: 35px;
+      min-height: 35px;
+      display: flex;
+      align-items: center;
+    }
+
+    ::ng-deep .mat-mdc-select-value {
+      font-size: $font-sm;
+      color: #374151;
+    }
+
+    ::ng-deep .mat-mdc-select-arrow-wrapper {
+      transform: translateY(0);
+      padding-right: 8px;
+    }
+
+    ::ng-deep .mat-mdc-form-field-subscript-wrapper {
+      display: none;
+    }
+
+    &.mat-focused ::ng-deep .mat-form-field-flex,
+    &.mat-focused ::ng-deep .mat-mdc-text-field-wrapper {
       border-color: #3b82f6;
       box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
     }
 
-    &:hover:not(.mat-focused) ::ng-deep .mat-form-field-flex {
+    &:hover:not(.mat-focused) ::ng-deep .mat-form-field-flex,
+    &:hover:not(.mat-focused) ::ng-deep .mat-mdc-text-field-wrapper {
       border-color: #9ca3af;
     }
   }
@@ -887,4 +955,4 @@ mat-spinner {
 .btn-right {
   float: inline-end !important;
   align-self: flex-end !important;
-}
\ No newline at end of file
+}
diff --git a/web-app/admin/src/app/admin/admin-feeds/admin-service/admin-service.component.html b/web-app/admin/src/app/admin/admin-feeds/admin-service/admin-service.component.html
index 18b8e8691..39c5df5ca 100644
--- a/web-app/admin/src/app/admin/admin-feeds/admin-service/admin-service.component.html
+++ b/web-app/admin/src/app/admin/admin-feeds/admin-service/admin-service.component.html
@@ -1,9 +1,10 @@
 <admin-breadcrumb [breadcrumbs]="breadcrumbs"></admin-breadcrumb>
-<div class="page" *ngIf="service && serviceType">
 
+<div class="page" *ngIf="service && serviceType; else loading">
   <div class="heading">
     <div class="heading__content">
       <mat-icon class="heading__icon">cloud_queue</mat-icon>
+
       <div class="heading__info">
         <div class="heading__title">{{ service.title }}</div>
         <div class="heading__summary">{{ service.summary }}</div>
@@ -17,19 +18,23 @@
         class="heading__action"
         (click)="deleteService()"
       >
-        <mat-icon>delete</mat-icon>Delete
+        <mat-icon>delete</mat-icon>
+        Delete
       </button>
     </div>
   </div>
 
-  <div class="content" *ngIf="service">
-    <div class="row__card">
-      <div class="column__config">
+  <div class="content">
+    <div class="content__layout">
+      <div class="content__column">
         <mat-card class="content__card">
-          <mat-card-header>
-            <mat-card-title class="primary-color">Configuration</mat-card-title>
+          <mat-card-header class="content__card-header">
+            <mat-card-title class="content__card-title">
+              Configuration
+            </mat-card-title>
           </mat-card-header>
-          <mat-card-content>
+
+          <mat-card-content class="content__card-content">
             <mage-json-schema-form
               [(schema)]="serviceType.configSchema"
               [data]="service.config"
@@ -41,13 +46,14 @@
         </mat-card>
       </div>
 
-      <div class="column__feeds">
+      <div class="content__column">
         <mat-card class="content__card">
-          <mat-card-header>
-            <mat-card-title color="primary">Feeds</mat-card-title>
+          <mat-card-header class="content__card-header">
+            <mat-card-title class="content__card-title"> Feeds </mat-card-title>
           </mat-card-header>
-          <mat-card-content>
-            <mat-nav-list>
+
+          <mat-card-content class="content__card-content">
+            <mat-nav-list class="feed-list" *ngIf="feeds?.length; else noFeeds">
               <ng-container
                 *ngFor="
                   let feed of feeds
@@ -56,17 +62,33 @@
                       : (feedPage + 1) * itemsPerPage
                 "
               >
-                <mat-list-item [routerLink]="['../feed', feed.id]">
-                  <mat-icon class="feed__icon" mat-list-icon>rss_feed</mat-icon>
-                  <div mat-line>{{ feed.title }}</div>
-                  <div mat-line>{{ feed.summary }}</div>
+                <mat-list-item
+                  class="feed-list__item"
+                  [routerLink]="['../feed', feed.id]"
+                >
+                  <mat-icon class="feed-list__icon" matListItemIcon>
+                    rss_feed
+                  </mat-icon>
+
+                  <div matListItemTitle class="feed-list__title">
+                    {{ feed.title }}
+                  </div>
+
+                  <div matListItemLine class="feed-list__summary">
+                    {{ feed.summary }}
+                  </div>
                 </mat-list-item>
 
-                <mat-divider [inset]="true"></mat-divider>
+                <mat-divider></mat-divider>
               </ng-container>
             </mat-nav-list>
 
+            <ng-template #noFeeds>
+              <div class="feed-list__empty">No feeds configured.</div>
+            </ng-template>
+
             <mat-paginator
+              class="feed-paginator"
               [length]="feeds.length"
               [pageSize]="itemsPerPage"
               (page)="feedPage = $event.pageIndex"
@@ -78,6 +100,7 @@
     </div>
   </div>
 </div>
+
 <ng-template #loading>
-  <div>Loading</div>
+  <div class="content">Loading</div>
 </ng-template>
diff --git a/web-app/admin/src/app/admin/admin-feeds/admin-service/admin-service.component.scss b/web-app/admin/src/app/admin/admin-feeds/admin-service/admin-service.component.scss
index 46407fd61..b7581bcd9 100644
--- a/web-app/admin/src/app/admin/admin-feeds/admin-service/admin-service.component.scss
+++ b/web-app/admin/src/app/admin/admin-feeds/admin-service/admin-service.component.scss
@@ -1,13 +1,9 @@
 @use '@angular/material' as mat;
-@import "variables.scss";
+@import 'variables.scss';
 
 .page {
-  background-color: #F0F0F0;
-  position: relative;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
+  min-height: 100%;
+  background-color: #f0f0f0;
   overflow-y: auto;
 }
 
@@ -15,30 +11,28 @@
   display: flex;
   flex-direction: row;
   padding: 16px;
-  background-color: white;
+  background-color: #ffffff;
 }
 
 .heading {
   display: flex;
   flex-direction: column;
-  background-color: white;
+  background-color: #ffffff;
   margin-top: 16px;
-  margin-bottom: 32px;
+  margin-bottom: 24px;
   z-index: 1;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
 }
 
 .heading__content {
   display: flex;
   flex-direction: row;
-  padding: 32px 16px;
-}
-
-.heading__content {
-  display: flex;
-  flex-direction: row;
+  align-items: flex-start;
+  padding: 32px 24px 20px;
 }
 
 .heading__icon {
+  flex: 0 0 auto;
   color: mat.get-color-from-palette($app-primary);
   margin-right: 16px;
   font-size: 40px;
@@ -46,25 +40,33 @@
   width: 40px;
 }
 
-.heading__actions {
-  margin-left: 16px;
-  margin-bottom: 16px;
-}
-
-.heading__action {
-  margin-right: 16px;
-}
-
 .heading__info {
   flex: 1;
+  min-width: 0;
 }
 
 .heading__title {
-  color: rgba(0, 0, 0, .87)
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 24px;
+  font-weight: 500;
+  line-height: 1.25;
+  margin-bottom: 6px;
 }
 
 .heading__summary {
-  color: rgba(0, 0, 0, .6)
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.heading__actions {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0 24px 20px;
+}
+
+.heading__action {
+  margin-left: 8px;
 }
 
 .content {
@@ -72,49 +74,129 @@
   margin: 16px;
 }
 
-.row__card {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  margin: -8px;
+.content__layout {
+  display: grid;
+  grid-template-columns: minmax(360px, 1fr) minmax(0, 2fr);
+  gap: 16px;
+  align-items: start;
 }
 
-.column__card {
-  flex-direction: column;
-  display: flex;
-  flex: 1;
-  margin: 8px;
+.content__column {
+  min-width: 0;
 }
 
-.column__config {
-  flex-direction: column;
-  display: flex;
-  flex: 1;
-  margin: 8px;
+.content__card {
+  width: 100%;
+  border-radius: 8px;
+  background-color: #ffffff;
 }
 
-.column__feeds {
-  flex-direction: column;
-  display: flex;
-  flex: 2;
-  margin: 8px;
-  min-width: 0;
+.content__card-header {
+  padding: 20px 20px 12px;
 }
 
-@media screen and (max-width: 1200px) {
-  .column__config {
-    flex-basis: 100%;
-  }
+.content__card-title {
+  color: mat.get-color-from-palette($app-primary);
+  font-size: 20px;
+  font-weight: 500;
+  line-height: 1.25;
+  margin: 0;
+}
 
-  .column__feeds {
-    flex-basis: 100%;
-  }
+.content__card-content {
+  padding: 0 20px 20px;
 }
 
-.content__card {
-  width: 100%
+.feed-list {
+  padding: 0;
 }
 
-mat-card-header {
+.feed-list__item {
+  height: auto !important;
+  min-height: 72px;
+  padding: 8px 0;
+}
+
+.feed-list__icon {
+  color: mat.get-color-from-palette($app-primary);
+  margin-right: 16px !important;
+  margin-top: 27px !important;
+}
+
+.feed-list__title {
+  color: rgba(0, 0, 0, 0.87);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1.35;
+}
+
+.feed-list__summary {
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 13px;
+  line-height: 1.35;
+  margin-top: 2px;
+}
+
+.feed-list__empty {
+  padding: 24px 0;
+  color: rgba(0, 0, 0, 0.6);
+  font-size: 14px;
+  text-align: center;
+}
+
+.feed-paginator {
+  margin-top: 8px;
+  border-top: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+.primary-color {
   color: mat.get-color-from-palette($app-primary);
-}
\ No newline at end of file
+}
+
+:host ::ng-deep mage-json-schema-form {
+  display: block;
+}
+
+:host ::ng-deep mage-json-schema-form .mat-mdc-form-field {
+  width: 100%;
+}
+
+:host ::ng-deep mage-json-schema-form .mat-mdc-text-field-wrapper {
+  background-color: #ffffff;
+}
+
+:host ::ng-deep .content__card .mat-mdc-card-header-text {
+  margin: 0;
+}
+
+:host ::ng-deep .feed-list__item .mdc-list-item__content {
+  padding: 4px 0;
+}
+
+@media screen and (max-width: 1200px) {
+  .content__layout {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media screen and (max-width: 640px) {
+  .heading__content {
+    padding: 24px 16px 16px;
+  }
+
+  .heading__actions {
+    padding: 0 16px 16px;
+  }
+
+  .content {
+    margin: 12px;
+  }
+
+  .content__card-header {
+    padding: 16px 16px 8px;
+  }
+
+  .content__card-content {
+    padding: 0 16px 16px;
+  }
+}
diff --git a/web-app/admin/src/app/admin/admin-layers/create-layer/create-layer.component.scss b/web-app/admin/src/app/admin/admin-layers/create-layer/create-layer.component.scss
index 09f0333b6..3b16cd840 100644
--- a/web-app/admin/src/app/admin/admin-layers/create-layer/create-layer.component.scss
+++ b/web-app/admin/src/app/admin/admin-layers/create-layer/create-layer.component.scss
@@ -133,4 +133,9 @@ mat-form-field {
     padding-top: 16px !important;
     padding-bottom: 8px !important;
   }
+}
+
+.btn-primary {
+  background-color: #1e88e5;
+  color: #fff;
 }
\ No newline at end of file
diff --git a/web-app/admin/src/app/admin/admin-teams/create-team/create-team.component.scss b/web-app/admin/src/app/admin/admin-teams/create-team/create-team.component.scss
index 4f7ade4a1..2f7dd0169 100644
--- a/web-app/admin/src/app/admin/admin-teams/create-team/create-team.component.scss
+++ b/web-app/admin/src/app/admin/admin-teams/create-team/create-team.component.scss
@@ -116,4 +116,9 @@ mat-form-field {
   .modal-body {
     grid-template-columns: 1fr;
   }
+}
+
+.btn-primary {
+  background-color: #1e88e5;
+  color: #fff;
 }
\ No newline at end of file
diff --git a/web-app/admin/src/app/admin/admin-teams/team-details/team-details.component.html b/web-app/admin/src/app/admin/admin-teams/team-details/team-details.component.html
index 28d3f23ba..aca754d87 100644
--- a/web-app/admin/src/app/admin/admin-teams/team-details/team-details.component.html
+++ b/web-app/admin/src/app/admin/admin-teams/team-details/team-details.component.html
@@ -78,7 +78,10 @@ <h3 class="danger-zone-title">Delete Team</h3>
               undone, and all team data will be unrecoverable. Users within the
               team will not be deleted.
             </p>
-            <button class="action-button btn-danger btn-right" (click)="deleteTeam()">
+            <button
+              class="action-button btn-danger btn-right"
+              (click)="deleteTeam()"
+            >
               <i class="fa fa-trash-o"></i> Delete
             </button>
           </div>
@@ -117,6 +120,7 @@ <h3 class="danger-zone-title">Delete Team</h3>
                     >
                       <div
                         class="row-item"
+                        [class.row-item--editing-members]="editingMembers"
                         [routerLink]="['../../users', user.id]"
                         role="link"
                         tabindex="0"
diff --git a/web-app/admin/src/app/admin/admin-teams/team-details/team-details.component.scss b/web-app/admin/src/app/admin/admin-teams/team-details/team-details.component.scss
index 30afd65b8..4e209ebd4 100644
--- a/web-app/admin/src/app/admin/admin-teams/team-details/team-details.component.scss
+++ b/web-app/admin/src/app/admin/admin-teams/team-details/team-details.component.scss
@@ -309,6 +309,21 @@ $font-xs: 12px;
   }
 }
 
+.row-item.row-item--editing-members {
+  min-height: 73px;
+
+  .role-select {
+    height: 35px;
+    min-height: 35px;
+    line-height: 35px;
+    box-sizing: border-box;
+    padding-top: 0;
+    padding-bottom: 0;
+    min-width: 150px;
+    width: 35px;
+  }
+}
+
 .item-icon,
 .row-icon {
   flex-shrink: 0;
@@ -683,4 +698,4 @@ $font-xs: 12px;
 .btn-right {
   float: inline-end !important;
   align-self: flex-end !important;
-}
\ No newline at end of file
+}
diff --git a/web-app/admin/src/app/admin/admin-users/create-user/create-user.component.scss b/web-app/admin/src/app/admin/admin-users/create-user/create-user.component.scss
index 8f9352d90..5a5604a21 100644
--- a/web-app/admin/src/app/admin/admin-users/create-user/create-user.component.scss
+++ b/web-app/admin/src/app/admin/admin-users/create-user/create-user.component.scss
@@ -67,7 +67,7 @@ mat-form-field {
   grid-column: 1 / 3;
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 32px;
+  gap: 16px;
   align-items: start;
 }
 
@@ -222,12 +222,19 @@ mat-form-field {
   align-items: center;
 }
 
+
+.btn-primary {
+  background-color: #1e88e5;
+  color: #fff;
+}
+
 .icon-preview {
   width: 72px;
   height: 72px;
   display: flex;
   align-items: center;
   justify-content: center;
+  border: 1px solid black;
 
   img {
     width: 56px;
diff --git a/web-app/admin/src/app/core/search-modal/search-modal.component.scss b/web-app/admin/src/app/core/search-modal/search-modal.component.scss
index dea4cd107..7b2389b86 100644
--- a/web-app/admin/src/app/core/search-modal/search-modal.component.scss
+++ b/web-app/admin/src/app/core/search-modal/search-modal.component.scss
@@ -1,4 +1,4 @@
-$font-xl: 32px;
+$font-xl: 24px;
 $font-lg: 18px;
 $font-md: 16px;
 $font-sm: 14px;
@@ -8,7 +8,7 @@ $font-xs: 12px;
   width: 600px;
   max-width: 600px;
   background: #fff;
-  border-radius: 8px;
+  border-radius: 20px;
   overflow: hidden;
   box-sizing: border-box;
 }
@@ -16,7 +16,7 @@ $font-xs: 12px;
 .dialog-header {
   h2 {
     margin: 0;
-    font-size: $font-lg;
+    font-size: $font-xl;
     line-height: 24px;
     font-weight: 600;
     color: rgba(0, 0, 0, 0.87);
@@ -36,7 +36,7 @@ $font-xs: 12px;
   flex-direction: column;
   overflow: hidden;
   border: 1px solid #e0e0e0;
-  border-radius: 8px;
+  border-radius: 12px;
   background: #fff;
   box-shadow: none;
   box-sizing: border-box;
@@ -53,7 +53,7 @@ $font-xs: 12px;
 .column-header {
   display: block;
   width: 100%;
-  font-size: $font-xs;
+  font-size: $font-sm;
   line-height: 18px;
   font-weight: 600;
   color: rgba(0, 0, 0, 0.87);
@@ -103,7 +103,7 @@ $font-xs: 12px;
   min-width: 92px;
   height: 40px;
   padding: 0 16px;
-  border-radius: 4px;
+  border-radius: 12px;
   font-size: $font-sm;
   font-weight: 500;
 }
@@ -115,7 +115,7 @@ $font-xs: 12px;
   .mat-mdc-dialog-surface {
     width: 600px !important;
     max-width: 600px !important;
-    border-radius: 8px !important;
+    border-radius: 12px !important;
     overflow: hidden !important;
     box-sizing: border-box !important;
   }
@@ -123,7 +123,7 @@ $font-xs: 12px;
   .mat-mdc-dialog-surface,
   .mdc-dialog__surface {
     padding: 0 !important;
-    background: #fff !important;
+    background: transparent !important;
     box-shadow: 0 11px 15px -7px rgba(0, 0, 0, 0.2),
       0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12) !important;
   }
@@ -238,15 +238,22 @@ $font-xs: 12px;
     padding: 0 20px !important;
     justify-content: flex-end !important;
     font-size: $font-xs !important;
+    background-color: #f9fafb;
   }
 
   .mat-mdc-paginator-page-size-label,
   .mat-mdc-paginator-range-label {
     font-size: $font-xs !important;
   }
-
   .results-container,
   .results-container * {
     box-shadow: none !important;
   }
 }
+
+:host ::ng-deep {
+  .mat-mdc-dialog-container .mdc-dialog__surface,
+  .mat-mdc-dialog-container .mat-mdc-dialog-surface {
+    background: transparent !important;
+  }
+}
\ No newline at end of file
diff --git a/web-app/admin/src/styles.scss b/web-app/admin/src/styles.scss
index 66a8e621b..5683e8fc5 100644
--- a/web-app/admin/src/styles.scss
+++ b/web-app/admin/src/styles.scss
@@ -646,23 +646,6 @@ td.mat-cell i.fab {
   box-shadow: none;
 }
 
-.search-modal-dialog .mat-dialog-container {
-  padding: 0 !important;
-  border-radius: 12px !important;
-  background-color: white !important;
-  background: white !important;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
-}
-
-.search-modal-dialog .mat-mdc-dialog-container {
-  padding: 0 !important;
-  border-radius: 12px !important;
-  background-color: white !important;
-  background: white !important;
-  --mdc-dialog-container-color: #ffffff;
-  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
-}
-
 .signin-modal-panel {
 
   .mat-dialog-container,
@@ -675,43 +658,3 @@ td.mat-cell i.fab {
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25), 0 8px 16px rgba(0, 0, 0, 0.15) !important;
   }
 }
-
-.search-modal-dialog .mat-paginator {
-  border-top: 1px solid #e5e7eb;
-  background-color: #f9fafb;
-  color: #374151;
-  min-height: 48px;
-}
-
-.search-modal-dialog .mat-paginator .mat-paginator-container {
-  padding: 0.5rem 1rem;
-  min-height: 48px;
-}
-
-.search-modal-dialog .mat-paginator .mat-paginator-page-size-label,
-.search-modal-dialog .mat-paginator .mat-paginator-range-label {
-  font-size: 0.75rem;
-  color: #6b7280;
-  line-height: 1.2;
-}
-
-.search-modal-dialog .mat-paginator .mat-select-value {
-  font-size: 0.75rem;
-  color: #374151;
-}
-
-.search-modal-dialog .mat-dialog-actions {
-  padding: 0;
-  margin: 0;
-}
-
-.search-modal-dialog .mat-dialog-content {
-  overflow: hidden;
-}
-
-.search-modal-dialog .mat-dialog-title {
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: #111827;
-  margin: 0;
-}
\ No newline at end of file

From 14deb9cce5344d1de9bf214983ce93b1eee566d8 Mon Sep 17 00:00:00 2001
From: Ryan <ryanslatten@vt.edu>
Date: Thu, 30 Apr 2026 09:46:32 -0400
Subject: [PATCH 03/19] fix things

Co-authored-by: Copilot <copilot@github.com>
---
 web-app/admin/src/css/leaflet-overrides.scss  |  4 +++-
 .../export-data/export-data.component.html    |  3 ++-
 .../export-data/export-data.component.scss    | 23 +++++++++++++++++++
 3 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/web-app/admin/src/css/leaflet-overrides.scss b/web-app/admin/src/css/leaflet-overrides.scss
index 63ec30813..e64a21618 100644
--- a/web-app/admin/src/css/leaflet-overrides.scss
+++ b/web-app/admin/src/css/leaflet-overrides.scss
@@ -1,3 +1,5 @@
+@import "~leaflet/dist/leaflet.css";
+
 .leaflet-popup-content-wrapper {
   border-radius: 2px;
 }
@@ -9,4 +11,4 @@
 
 .leaflet-material-popup .leaflet-popup-content {
   margin: 13px 19px;
-}
+}
\ No newline at end of file
diff --git a/web-app/src/app/export/export-data/export-data.component.html b/web-app/src/app/export/export-data/export-data.component.html
index b0b8368a9..295abe11c 100644
--- a/web-app/src/app/export/export-data/export-data.component.html
+++ b/web-app/src/app/export/export-data/export-data.component.html
@@ -14,7 +14,8 @@
 
         <div class="mat-subheading-2">Export Format</div>
         <div class="export-format">
-          <mat-chip-listbox [(ngModel)]="exportFormat">
+          <mat-chip-listbox class="export-format__chips" [(ngModel)]="exportFormat"
+            [hideSingleSelectionIndicator]="true">
             <mat-chip-option *ngFor="let format of exportFormats" [value]="format" (click)="changeFormat(format)"
               color="primary">
               {{format}}
diff --git a/web-app/src/app/export/export-data/export-data.component.scss b/web-app/src/app/export/export-data/export-data.component.scss
index e521a0f23..8308d7391 100644
--- a/web-app/src/app/export/export-data/export-data.component.scss
+++ b/web-app/src/app/export/export-data/export-data.component.scss
@@ -200,6 +200,29 @@ mat-checkbox {
   border-radius: 9999px;
 }
 
+:host ::ng-deep .export-format__chips .mat-mdc-standard-chip,
+:host ::ng-deep .export-format__chips .mat-chip {
+  max-width: 100%;
+}
+
+:host ::ng-deep .export-format__chips .mat-mdc-chip-graphic,
+:host ::ng-deep .export-format__chips .mdc-evolution-chip__graphic {
+  display: none !important;
+  width: 0 !important;
+}
+
+:host ::ng-deep .export-format__chips .mdc-evolution-chip__action--primary {
+  padding-left: 12px !important;
+  padding-right: 12px !important;
+}
+
+:host ::ng-deep .export-format__chips .mat-mdc-chip-action-label,
+:host ::ng-deep .export-format__chips .mdc-evolution-chip__text-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 :host ::ng-deep button[mat-button],
 :host ::ng-deep .mat-mdc-button {
   min-height: 40px;

From 2ff5ef149727d0307f9715919af7ab53e81534eb Mon Sep 17 00:00:00 2001
From: Ryan Carpenter <ryan.carpenter@omnifederal.com>
Date: Thu, 30 Apr 2026 08:04:19 -0600
Subject: [PATCH 04/19] more styles

---
 .../field-dialog/field-dialog.component.scss  |  6 +--
 .../form-details/form-details.component.html  | 22 ----------
 .../form-details/form-details.component.scss  |  6 +++
 .../layer-details.component.scss              |  1 -
 web-app/admin/src/css/auth.scss               |  5 +++
 web-app/admin/src/styles.scss                 |  1 -
 .../app/map/controls/search.component.html    |  3 +-
 .../app/map/controls/search.component.scss    | 44 +++++++++++++++++--
 8 files changed, 56 insertions(+), 32 deletions(-)

diff --git a/web-app/admin/src/app/admin/admin-event/admin-event-form/form-details/field-dialog/field-dialog.component.scss b/web-app/admin/src/app/admin/admin-event/admin-event-form/form-details/field-dialog/field-dialog.component.scss
index 8763ae6b7..163583131 100644
--- a/web-app/admin/src/app/admin/admin-event/admin-event-form/form-details/field-dialog/field-dialog.component.scss
+++ b/web-app/admin/src/app/admin/admin-event/admin-event-form/form-details/field-dialog/field-dialog.component.scss
@@ -71,9 +71,9 @@ $font-xs: 12px;
   }
 
   .dialog-action-button-primary {
-    background-color: #e3f2fd !important;
-    color: #1976d2 !important;
-    border-color: #e3f2fd !important;
+    background-color: #3b82f6 !important;
+    border-color: #3b82f6 !important;
+    color: #fff !important;
   }
 
   .dialog-action-button-primary:hover:not(:disabled) {
diff --git a/web-app/admin/src/app/admin/admin-event/admin-event-form/form-details/form-details.component.html b/web-app/admin/src/app/admin/admin-event/admin-event-form/form-details/form-details.component.html
index 9cf4c1351..61f877db1 100644
--- a/web-app/admin/src/app/admin/admin-event/admin-event-form/form-details/form-details.component.html
+++ b/web-app/admin/src/app/admin/admin-event/admin-event-form/form-details/form-details.component.html
@@ -1,7 +1,6 @@
 <admin-breadcrumb [breadcrumbs]="breadcrumbs"></admin-breadcrumb>
 
 <div class="container bottom-gap-l" *ngIf="event">
-    <!-- Header -->
     <div class="page-header">
         <div class="header-title-section">
             <h2 class="page-title" *ngIf="form.id">{{ form.name }}</h2>
@@ -17,7 +16,6 @@ <h2 class="page-title" *ngIf="!form.id">New Form</h2>
     <div class="container-fluid bottom-gap-l">
         <div class="row">
             <div class="col-12">
-                <!-- Form Details Section -->
                 <div class="details-section">
                     <div class="details-card">
                         <div class="details-form">
@@ -108,7 +106,6 @@ <h2 class="page-title" *ngIf="!form.id">New Form</h2>
                     </div>
 
                     <div class="details-actions">
-                        <!-- Export Form Card -->
                         <div class="action-card card-spacing" *ngIf="form.id">
                             <h3 class="action-card-title">Export Form</h3>
                             <p class="action-card-description">Export this form for use in another event.</p>
@@ -117,7 +114,6 @@ <h3 class="action-card-title">Export Form</h3>
                             </button>
                         </div>
 
-                        <!-- Archive Form Card -->
                         <div class="danger-zone-card warning card-spacing" *ngIf="form.id && !form.archived">
                             <h3 class="danger-zone-title">Archive Form</h3>
                             <p class="danger-zone-description">Archiving a form will remove it from the list of forms a
@@ -127,7 +123,6 @@ <h3 class="danger-zone-title">Archive Form</h3>
                             </button>
                         </div>
 
-                        <!-- Restore Form Card -->
                         <div class="action-card success card-spacing" *ngIf="form.id && form.archived">
                             <h3 class="action-card-title">Restore Form</h3>
                             <p class="action-card-description">Restoring a form will add it back to the list of forms a
@@ -139,11 +134,9 @@ <h3 class="action-card-title">Restore Form</h3>
                     </div>
                 </div>
 
-                <!-- Configuration Sections (only for existing forms) -->
                 <div class="configuration-sections" *ngIf="form.id">
                     <h3 class="sections-header">Form Configuration</h3>
                     <div class="sections-grid">
-                        <!-- Fields Section Card -->
                         <div class="configuration-card">
                             <div class="section-content">
                                 <div class="section-header" (click)="toggleFieldsSection()" style="cursor: pointer;">
@@ -162,7 +155,6 @@ <h3 class="section-title">Fields</h3>
                                     <p class="section-description">Create custom form fields that include your
                                         organization's unique information.</p>
 
-                                    <!-- Use the fields-list component -->
                                     <mage-fields-list [fields]="form.fields || []" [fieldTypes]="fieldTypes"
                                         [attachmentAllowedTypes]="attachmentAllowedTypes"
                                         [userFields]="form.userFields || []" [showDetailedView]="true"
@@ -172,7 +164,6 @@ <h3 class="section-title">Fields</h3>
                             </div>
                         </div>
 
-                        <!-- Map Section Card -->
                         <div class="configuration-card">
                             <div class="section-content">
                                 <div class="section-header" (click)="toggleMapSection()" style="cursor: pointer;">
@@ -193,10 +184,8 @@ <h3 class="section-title">Map Symbology</h3>
                                         map by selecting primary
                                         and variant fields for symbology.</p>
 
-                                    <!-- No Select Fields Available Message -->
                                     <div *ngIf="getDropdownFields().length === 0"
                                         style="display: flex; gap: 2rem; align-items: flex-start; margin-bottom: 1.5rem;">
-                                        <!-- Default Map Icon Preview -->
                                         <div class="symbology-preview" style="flex: 0 0 auto; min-width: 250px;">
                                             <h4 class="subsection-title">Default Symbology</h4>
                                             <div class="symbology-list">
@@ -211,7 +200,6 @@ <h4 class="subsection-title">Default Symbology</h4>
                                                 </div>
                                             </div>
                                         </div>
-                                        <!-- Message -->
                                         <div
                                             style="flex: 1; padding: 2rem; background-color: #f5f5f5; border-radius: 8px;">
                                             <div style="display: flex; align-items: flex-start; gap: 1rem;">
@@ -231,10 +219,8 @@ <h4 class="subsection-title">Default Symbology</h4>
                                         </div>
                                     </div>
 
-                                    <!-- Map Configuration Row: Symbology Preview + Field Dropdowns -->
                                     <div *ngIf="getDropdownFields().length > 0"
                                         style="display: flex; gap: 2rem; align-items: flex-start; margin-bottom: 1.5rem;">
-                                        <!-- Map Symbology Preview -->
                                         <div class="symbology-preview" *ngIf="form.primaryField"
                                             style="flex: 0 0 auto; min-width: 250px;">
                                             <h4 class="subsection-title">Configured Symbology</h4>
@@ -255,9 +241,7 @@ <h4 class="subsection-title">Configured Symbology</h4>
                                             </div>
                                         </div>
 
-                                        <!-- Field Selection Controls -->
                                         <div style="flex: 1; display: flex; flex-direction: column; gap: 1rem;">
-                                            <!-- Field Selection -->
                                             <div class="config-section">
                                                 <h4 class="subsection-title">Configure Fields</h4>
 
@@ -304,7 +288,6 @@ <h4 class="subsection-title">Configure Fields</h4>
                                         </div>
                                     </div>
 
-                                    <!-- Primary Field Choices Symbology -->
                                     <div class="primary-choices-section"
                                         *ngIf="form.primaryField && getPrimaryFieldChoices().length > 0">
                                         <div class="choices-list">
@@ -390,7 +373,6 @@ <h4 class="subsection-title">Configure Fields</h4>
                                         </div>
                                     </div>
 
-                                    <!-- Save Button -->
                                     <div class="section-save-actions">
                                         <button class="action-button btn-primary" (click)="saveMap()"
                                             [disabled]="!mapChanged || savingMap">
@@ -402,7 +384,6 @@ <h4 class="subsection-title">Configure Fields</h4>
                             </div>
                         </div>
 
-                        <!-- Feeds Section Card -->
                         <div class="configuration-card">
                             <div class="section-content">
                                 <div class="section-header" (click)="toggleFeedSection()" style="cursor: pointer;">
@@ -423,7 +404,6 @@ <h3 class="section-title">Observation Feed Configuration</h3>
                                         feed by selecting
                                         primary and secondary fields.</p>
 
-                                    <!-- Feed Configuration with Inline Edits -->
                                     <div class="feed-config-inline">
                                         <div class="config-inline-item">
                                             <div class="config-inline-label">
@@ -463,7 +443,6 @@ <h3 class="section-title">Observation Feed Configuration</h3>
                                         </div>
                                     </div>
 
-                                    <!-- Sample Observation Feed -->
                                     <div class="feed-samples-section" *ngIf="observations.length > 0">
                                         <h4 class="subsection-title">Sample Observation Feed</h4>
                                         <p class="field-hint">Preview how observations will appear in the feed based on
@@ -547,7 +526,6 @@ <h4 class="subsection-title">Sample Observation Feed</h4>
                                         </div>
                                     </div>
 
-                                    <!-- Save Button -->
                                     <div class="section-save-actions">
                                         <button class="action-button btn-primary" (click)="saveFeeds()"
                                             [disabled]="!feedsChanged || savingFeeds">
diff --git a/web-app/admin/src/app/admin/admin-event/admin-event-form/form-details/form-details.component.scss b/web-app/admin/src/app/admin/admin-event/admin-event-form/form-details/form-details.component.scss
index 67676db32..b7a1f2e10 100644
--- a/web-app/admin/src/app/admin/admin-event/admin-event-form/form-details/form-details.component.scss
+++ b/web-app/admin/src/app/admin/admin-event/admin-event-form/form-details/form-details.component.scss
@@ -935,3 +935,9 @@ $font-xs: 12px;
     align-items: center;
   }
 }
+
+.btn-primary {
+  background-color: #3b82f6;
+  border-color: #3b82f6;
+  color: #fff;
+}
\ No newline at end of file
diff --git a/web-app/admin/src/app/admin/admin-layers/layer-details/layer-details.component.scss b/web-app/admin/src/app/admin/admin-layers/layer-details/layer-details.component.scss
index 571819931..42e0dfbf1 100644
--- a/web-app/admin/src/app/admin/admin-layers/layer-details/layer-details.component.scss
+++ b/web-app/admin/src/app/admin/admin-layers/layer-details/layer-details.component.scss
@@ -851,7 +851,6 @@ $font-xs: 12px;
   text-decoration: none;
 }
 
-
 .btn-right {
   float: inline-end !important;
   align-self: flex-end !important;
diff --git a/web-app/admin/src/css/auth.scss b/web-app/admin/src/css/auth.scss
index 1f962b0b2..ed06f7ba8 100644
--- a/web-app/admin/src/css/auth.scss
+++ b/web-app/admin/src/css/auth.scss
@@ -282,6 +282,11 @@ signin {
   }
 }
 
+.dialog-action-button-primary {
+  background-color: #3b82f6 !important;
+  border-color: #3b82f6 !important;
+  color: #fff !important;
+}
 .device-id-button-container {
   justify-content: flex-end;
 }
diff --git a/web-app/admin/src/styles.scss b/web-app/admin/src/styles.scss
index 5683e8fc5..7efa7d8b5 100644
--- a/web-app/admin/src/styles.scss
+++ b/web-app/admin/src/styles.scss
@@ -1,5 +1,4 @@
 @import 'theme.scss';
-/* You can add global styles to this file, and also import other style files */
 @import '@ng-select/ng-select/themes/material.theme.css';
 @import './roboto.scss';
 @import './css/style.scss';
diff --git a/web-app/src/app/map/controls/search.component.html b/web-app/src/app/map/controls/search.component.html
index 3a669475b..efab509f0 100644
--- a/web-app/src/app/map/controls/search.component.html
+++ b/web-app/src/app/map/controls/search.component.html
@@ -14,6 +14,7 @@
     <mat-card class="search-field">
       <mat-form-field appearance="outline" class="search-field__form">
         <mat-label>Address / Place Name</mat-label>
+
         <input
           matInput
           #searchInput
@@ -34,7 +35,7 @@
         <mat-spinner *ngIf="searching" diameter="24" matSuffix></mat-spinner>
       </mat-form-field>
 
-      <div [hidden]="!searchResults.length">
+      <div class="search-results" [hidden]="!searchResults.length">
         <mat-list #searchList>
           <mat-list-item
             matRipple
diff --git a/web-app/src/app/map/controls/search.component.scss b/web-app/src/app/map/controls/search.component.scss
index 37dd29d45..636250e14 100644
--- a/web-app/src/app/map/controls/search.component.scss
+++ b/web-app/src/app/map/controls/search.component.scss
@@ -34,16 +34,21 @@
   padding: 0;
   overflow: visible;
   width: 360px;
-  max-width: min(560px, calc(100vw - 140px));
+  max-width: min(360px, calc(100vw - 140px));
   border-radius: 0 0 8px 8px;
   box-sizing: border-box;
 }
 
 .search-field__form {
-  width: 100%;
+  width: 360px;
+  max-width: min(360px, calc(100vw - 140px));
   margin: 0;
 }
 
+:host ::ng-deep .search-field.mat-mdc-card {
+  overflow: visible;
+}
+
 :host ::ng-deep .search-field__form .mat-mdc-form-field-subscript-wrapper,
 :host ::ng-deep .search-field__form .mat-form-field-wrapper {
   display: none;
@@ -106,21 +111,52 @@
   line-height: 28px;
 }
 
+.search-results {
+  width: max-content;
+  min-width: 360px;
+  max-width: min(720px, calc(100vw - 140px));
+  background: #ffffff;
+  border-radius: 0 0 8px 8px;
+  overflow: hidden;
+}
+
 mat-list {
+  width: max-content;
+  min-width: 360px;
+  max-width: min(720px, calc(100vw - 140px));
   max-height: 320px;
   overflow-y: auto;
-  max-width: 100%;
+  overflow-x: hidden;
   padding-top: 0;
 }
 
 mat-list-item {
   cursor: pointer;
+  width: max-content;
+  min-width: 360px;
+  max-width: min(720px, calc(100vw - 140px));
 }
 
 mat-list-item:hover {
   background: rgba(0, 0, 0, 0.04);
 }
 
+:host ::ng-deep mat-list-item .mdc-list-item__content {
+  width: max-content;
+  min-width: 0;
+  max-width: calc(min(720px, calc(100vw - 140px)) - 64px);
+}
+
+:host ::ng-deep mat-list-item [matListItemTitle],
+:host ::ng-deep mat-list-item .mdc-list-item__primary-text {
+  display: block;
+  width: max-content;
+  max-width: calc(min(720px, calc(100vw - 140px)) - 64px);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 :host ::ng-deep .mat-mdc-list-item-icon,
 :host ::ng-deep .mat-list-icon {
   opacity: 0.6;
@@ -129,4 +165,4 @@ mat-list-item:hover {
 .mat-form-field .mat-spinner,
 :host ::ng-deep .mat-mdc-form-field .mat-mdc-progress-spinner {
   margin-right: 8px;
-}
+}
\ No newline at end of file

From 7c5029ccdb01bc4484c5bf68494fc8a96f32ca72 Mon Sep 17 00:00:00 2001
From: Ryan <ryanslatten@vt.edu>
Date: Thu, 30 Apr 2026 10:27:28 -0400
Subject: [PATCH 05/19] update datepicker

---
 .../observation-edit-date.component.html      | 38 ++++----------
 .../observation-edit-date.component.ts        | 51 +++++++++++++++----
 2 files changed, 52 insertions(+), 37 deletions(-)

diff --git a/web-app/src/app/observation/observation-edit/observation-edit-date/observation-edit-date.component.html b/web-app/src/app/observation/observation-edit/observation-edit-date/observation-edit-date.component.html
index b03c66005..e8fff9bbd 100644
--- a/web-app/src/app/observation/observation-edit/observation-edit-date/observation-edit-date.component.html
+++ b/web-app/src/app/observation/observation-edit/observation-edit-date/observation-edit-date.component.html
@@ -2,25 +2,13 @@
   <div class="date">
     <mat-form-field appearance="outline">
       <mat-label>{{ definition.title }} Date</mat-label>
-      <input
-        matInput
-        [matDatepicker]="datePicker"
-        [(ngModel)]="date"
-        [required]="definition.required"
-        (ngModelChange)="onDate()"
-        #dateModel="ngModel"
-        autocomplete="off"
-      />
-      <mat-datepicker-toggle
-        matSuffix
-        [for]="datePicker"
-      ></mat-datepicker-toggle>
+      <input matInput [matDatepicker]="datePicker" [(ngModel)]="date" [required]="definition.required"
+        (ngModelChange)="onDate()" #dateModel="ngModel" autocomplete="off" />
+      <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
       <mat-datepicker #datePicker></mat-datepicker>
-      <mat-error
-        *ngIf="
+      <mat-error *ngIf="
           dateModel.errors?.required && !dateModel.errors?.matDatepickerParse
-        "
-      >
+        ">
         Date is required
       </mat-error>
       <mat-error *ngIf="dateModel.errors?.matDatepickerParse">
@@ -35,16 +23,12 @@
         {{ definition.title }} Time
         {{ timeZone === 'gmt' ? '(GMT)' : '(Local)' }}
       </mat-label>
-      <input
-        matInput
-        type="time"
-        step="1"
-        [(ngModel)]="time"
-        (ngModelChange)="onTime()"
-        #timeModel="ngModel"
-        autocomplete="off"
-      />
+      <input matInput #timeInput type="time" step="60" [(ngModel)]="time" (ngModelChange)="onTime()"
+        #timeModel="ngModel" autocomplete="off" />
+      <button mat-icon-button matSuffix type="button" aria-label="Open time selector" (click)="openTimePicker($event)">
+        <mat-icon>schedule</mat-icon>
+      </button>
       <mat-error *ngIf="timeInvalid">Invalid time</mat-error>
     </mat-form-field>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/web-app/src/app/observation/observation-edit/observation-edit-date/observation-edit-date.component.ts b/web-app/src/app/observation/observation-edit/observation-edit-date/observation-edit-date.component.ts
index 3b30a83c6..1ace48b42 100644
--- a/web-app/src/app/observation/observation-edit/observation-edit-date/observation-edit-date.component.ts
+++ b/web-app/src/app/observation/observation-edit/observation-edit-date/observation-edit-date.component.ts
@@ -1,5 +1,6 @@
 import {
   Component,
+  ElementRef,
   Input,
   OnChanges,
   SimpleChanges,
@@ -20,11 +21,13 @@ export class ObservationEditDateComponent implements OnChanges {
 
   @ViewChild('dateModel') dateModel: NgModel;
   @ViewChild('timeModel') timeModel: NgModel;
+  @ViewChild('timeInput') timeInput?: ElementRef<HTMLInputElement>;
 
   date: moment.Moment | null = null;
   time = '';
   timeZone: string;
   timeInvalid = false;
+  second = 0;
 
   constructor(private localStorageService: LocalStorageService) {
     this.timeZone = localStorageService.getTimeZoneEdit();
@@ -35,12 +38,17 @@ export class ObservationEditDateComponent implements OnChanges {
       const timestamp = this.formGroup.get(this.definition.name)?.value;
 
       if (timestamp) {
-        const m = moment(timestamp);
+        const m =
+          this.timeZone === 'gmt'
+            ? moment.utc(timestamp)
+            : moment(timestamp).local();
         this.date = m.clone();
-        this.time = m.format('HH:mm:ss');
+        this.second = m.second();
+        this.time = m.format('HH:mm');
       } else {
         this.date = null;
         this.time = '';
+        this.second = 0;
       }
 
       this.timeInvalid = false;
@@ -54,7 +62,7 @@ export class ObservationEditDateComponent implements OnChanges {
     }
 
     if (!this.dateModel?.invalid) {
-      this.setValue();
+      this.setValue(true);
     }
   }
 
@@ -62,24 +70,46 @@ export class ObservationEditDateComponent implements OnChanges {
     this.timeInvalid = !this.isValidTime(this.time);
 
     if (!this.timeInvalid) {
-      this.setValue();
+      this.setValue(false);
     }
   }
 
+  openTimePicker(event: Event): void {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const input = this.timeInput?.nativeElement as
+      | (HTMLInputElement & { showPicker?: () => void })
+      | undefined;
+
+    if (!input) {
+      return;
+    }
+
+    input.focus();
+    input.click();
+    input.showPicker?.();
+  }
+
   toggleTimeZone(): void {
     this.timeZone = this.timeZone === 'gmt' ? 'local' : 'gmt';
   }
 
-  private setValue(): void {
+  private setValue(preserveSeconds: boolean): void {
     if (!this.date) {
       return;
     }
 
-    const parsedTime = this.parseTime(this.time);
+    const parsedTime = this.parseTime(
+      this.time,
+      preserveSeconds ? this.second : 0
+    );
     if (!parsedTime) {
       return;
     }
 
+    this.second = parsedTime.second;
+
     const date = this.date.clone().set({
       hour: parsedTime.hour,
       minute: parsedTime.minute,
@@ -99,14 +129,15 @@ export class ObservationEditDateComponent implements OnChanges {
   }
 
   private isValidTime(value: string): boolean {
-    return !!this.parseTime(value);
+    return !!this.parseTime(value, this.second);
   }
 
   private parseTime(
-    value: string
+    value: string,
+    defaultSecond = 0
   ): { hour: number; minute: number; second: number } | null {
     if (!value) {
-      return { hour: 0, minute: 0, second: 0 };
+      return { hour: 0, minute: 0, second: defaultSecond };
     }
 
     const match = value.match(/^(\d{2}):(\d{2})(?::(\d{2}))?$/);
@@ -116,7 +147,7 @@ export class ObservationEditDateComponent implements OnChanges {
 
     const hour = Number(match[1]);
     const minute = Number(match[2]);
-    const second = match[3] ? Number(match[3]) : 0;
+    const second = match[3] ? Number(match[3]) : defaultSecond;
 
     if (
       Number.isNaN(hour) ||

From 7a028f80dfd2570326a8dcf95cb4e26c7c7fbfb9 Mon Sep 17 00:00:00 2001
From: Ryan Carpenter <ryan.carpenter@omnifederal.com>
Date: Thu, 30 Apr 2026 08:47:54 -0600
Subject: [PATCH 06/19] fix redirect

---
 .../event-details.component.html              | 169 ++++++++++++------
 .../event-details.component.scss              |  13 ++
 2 files changed, 128 insertions(+), 54 deletions(-)

diff --git a/web-app/admin/src/app/admin/admin-event/event-details/event-details.component.html b/web-app/admin/src/app/admin/admin-event/event-details/event-details.component.html
index 9a19d4ca9..dbe0a53ca 100644
--- a/web-app/admin/src/app/admin/admin-event/event-details/event-details.component.html
+++ b/web-app/admin/src/app/admin/admin-event/event-details/event-details.component.html
@@ -26,9 +26,9 @@ <h2 class="page-title">{{ event.name }}</h2>
               <div class="form-field">
                 <label class="field-label">Name:</label>
                 <div class="field-content">
-                  <span *ngIf="!editingDetails" class="field-value">{{
-                    event.name
-                  }}</span>
+                  <span *ngIf="!editingDetails" class="field-value">
+                    {{ event.name }}
+                  </span>
                   <input
                     *ngIf="editingDetails"
                     type="text"
@@ -42,9 +42,9 @@ <h2 class="page-title">{{ event.name }}</h2>
               <div class="form-field">
                 <label class="field-label">Description:</label>
                 <div class="field-content">
-                  <span *ngIf="!editingDetails" class="field-value">{{
-                    event.description
-                  }}</span>
+                  <span *ngIf="!editingDetails" class="field-value">
+                    {{ event.description }}
+                  </span>
                   <textarea
                     *ngIf="editingDetails"
                     class="form-input"
@@ -58,11 +58,16 @@ <h2 class="page-title">{{ event.name }}</h2>
               <div class="form-actions" *ngIf="editingDetails">
                 <button
                   class="action-button btn-primary"
+                  type="button"
                   (click)="saveEventDetails()"
                 >
                   <i class="fa fa-save"></i> Save
                 </button>
-                <button class="action-button" (click)="cancelEditDetails()">
+                <button
+                  class="action-button"
+                  type="button"
+                  (click)="cancelEditDetails()"
+                >
                   <i class="fa fa-times"></i> Cancel
                 </button>
               </div>
@@ -82,6 +87,7 @@ <h3 class="action-card-title">Complete Event</h3>
               </p>
               <button
                 class="action-button btn-primary btn-right"
+                type="button"
                 (click)="completeEvent(event)"
               >
                 <i class="fa fa-check-circle"></i> Complete
@@ -100,6 +106,7 @@ <h3 class="action-card-title">Activate Event</h3>
               </p>
               <button
                 class="action-button btn-primary btn-right"
+                type="button"
                 (click)="activateEvent(event)"
               >
                 <i class="fa fa-play-circle"></i> Activate
@@ -115,6 +122,7 @@ <h3 class="danger-zone-title">Delete Event</h3>
               </p>
               <button
                 class="action-button btn-danger btn-right"
+                type="button"
                 (click)="deleteEvent()"
               >
                 <i class="fa fa-trash-o"></i> Delete
@@ -140,6 +148,7 @@ <h3 class="danger-zone-title">Delete Event</h3>
                 >
                 </mage-card-navbar>
               </div>
+
               <div class="table-scroll">
                 <table
                   mat-table
@@ -154,18 +163,29 @@ <h3 class="danger-zone-title">Delete Event</h3>
                       *matCellDef="let user"
                       class="table-row-content"
                     >
-                      <a
+                      <div
                         class="row-item text-decoration-none"
                         [class.row-item--editing-members]="editMembers"
-                        [routerLink]="['../../users', user.id]"
                       >
-                        <div class="row-icon">
-                          <i class="fa fa-user"></i>
-                        </div>
-                        <div class="row-info">
-                          <div class="row-primary">{{ user.displayName }}</div>
-                          <div class="row-secondary">{{ user.username }}</div>
-                        </div>
+                        <a
+                          class="row-main-link text-decoration-none"
+                          [routerLink]="
+                            !editMembers ? ['../../users', user.id] : null
+                          "
+                          (click)="editMembers && $event.preventDefault()"
+                        >
+                          <div class="row-icon">
+                            <i class="fa fa-user"></i>
+                          </div>
+
+                          <div class="row-info">
+                            <div class="row-primary">
+                              {{ user.displayName }}
+                            </div>
+                            <div class="row-secondary">{{ user.username }}</div>
+                          </div>
+                        </a>
+
                         <div class="row-role">
                           <span
                             *ngIf="!editMembers"
@@ -173,22 +193,26 @@ <h3 class="danger-zone-title">Delete Event</h3>
                           >
                             {{ getUserRole(user) }}
                           </span>
+
                           <mat-form-field
                             *ngIf="hasUpdatePermission && editMembers"
                             class="role-select-field"
                             appearance="outline"
                             (click)="$event.stopPropagation()"
+                            (mousedown)="$event.stopPropagation()"
                           >
                             <mat-select
                               [value]="getUserRole(user)"
                               (selectionChange)="updateUserRole(user, $event)"
                               (click)="$event.stopPropagation()"
+                              (mousedown)="$event.stopPropagation()"
                               panelClass="role-select-panel"
-                              disableOptionCentering="true"
+                              [disableOptionCentering]="true"
                             >
                               <mat-select-trigger>
                                 {{ getUserRole(user) }}
                               </mat-select-trigger>
+
                               <mat-option value="GUEST">
                                 <div class="role-option">
                                   <div class="role-name">Guest</div>
@@ -197,6 +221,7 @@ <h3 class="danger-zone-title">Delete Event</h3>
                                   </div>
                                 </div>
                               </mat-option>
+
                               <mat-option value="MANAGER">
                                 <div class="role-option">
                                   <div class="role-name">Manager</div>
@@ -205,6 +230,7 @@ <h3 class="danger-zone-title">Delete Event</h3>
                                   </div>
                                 </div>
                               </mat-option>
+
                               <mat-option value="OWNER">
                                 <div class="role-option">
                                   <div class="role-name">Owner</div>
@@ -216,24 +242,27 @@ <h3 class="danger-zone-title">Delete Event</h3>
                             </mat-select>
                           </mat-form-field>
                         </div>
+
                         <div
                           class="row-actions"
                           *ngIf="hasUpdatePermission && editMembers"
                         >
                           <button
+                            type="button"
                             class="action-button btn-danger btn-sm"
                             (click)="
                               $event.preventDefault();
                               $event.stopPropagation();
                               removeMember($event, user)
                             "
+                            (mousedown)="$event.stopPropagation()"
                             title="Remove Member"
                           >
                             <i class="fa fa-trash"></i>
                             Remove Member
                           </button>
                         </div>
-                      </a>
+                      </div>
                     </td>
                   </ng-container>
 
@@ -288,6 +317,7 @@ <h3 class="danger-zone-title">Delete Event</h3>
                 >
                 </mage-card-navbar>
               </div>
+
               <div class="table-scroll">
                 <table
                   mat-table
@@ -303,6 +333,7 @@ <h3 class="danger-zone-title">Delete Event</h3>
                       class="table-row-content"
                     >
                       <a
+                        *ngIf="!editTeams"
                         class="row-item text-decoration-none"
                         [routerLink]="['../../teams', team.id]"
                       >
@@ -315,24 +346,33 @@ <h3 class="danger-zone-title">Delete Event</h3>
                             {{ team.description }}
                           </div>
                         </div>
-                        <div
-                          class="row-actions"
-                          *ngIf="hasUpdatePermission && editTeams"
-                        >
+                      </a>
+
+                      <div
+                        *ngIf="editTeams"
+                        class="row-item text-decoration-none"
+                      >
+                        <div class="row-icon">
+                          <i class="fa fa-users"></i>
+                        </div>
+                        <div class="row-info">
+                          <div class="row-primary">{{ team.name }}</div>
+                          <div class="row-secondary">
+                            {{ team.description }}
+                          </div>
+                        </div>
+                        <div class="row-actions" *ngIf="hasUpdatePermission">
                           <button
                             class="action-button btn-danger btn-sm"
-                            (click)="
-                              $event.preventDefault();
-                              $event.stopPropagation();
-                              removeTeam($event, team)
-                            "
+                            type="button"
+                            (click)="removeTeam($event, team)"
                             title="Remove Team"
                           >
                             <i class="fa fa-trash"></i>
                             Remove
                           </button>
                         </div>
-                      </a>
+                      </div>
                     </td>
                   </ng-container>
 
@@ -405,6 +445,7 @@ <h3 class="danger-zone-title">Delete Event</h3>
                       class="table-row-content"
                     >
                       <a
+                        *ngIf="!editLayers"
                         class="row-item text-decoration-none"
                         [routerLink]="['../../layers', layer.id]"
                       >
@@ -417,24 +458,33 @@ <h3 class="danger-zone-title">Delete Event</h3>
                             {{ layer.description }}
                           </div>
                         </div>
-                        <div
-                          class="row-actions"
-                          *ngIf="hasUpdatePermission && editLayers"
-                        >
+                      </a>
+
+                      <div
+                        *ngIf="editLayers"
+                        class="row-item text-decoration-none"
+                      >
+                        <div class="row-icon">
+                          <i class="fa fa-map"></i>
+                        </div>
+                        <div class="row-info">
+                          <div class="row-primary">{{ layer.name }}</div>
+                          <div class="row-secondary" *ngIf="layer.description">
+                            {{ layer.description }}
+                          </div>
+                        </div>
+                        <div class="row-actions" *ngIf="hasUpdatePermission">
                           <button
                             class="action-button btn-danger btn-sm"
-                            (click)="
-                              $event.preventDefault();
-                              $event.stopPropagation();
-                              removeLayer($event, layer)
-                            "
+                            type="button"
+                            (click)="removeLayer($event, layer)"
                             title="Remove Layer"
                           >
                             <i class="fa fa-trash"></i>
                             Remove
                           </button>
                         </div>
-                      </a>
+                      </div>
                     </td>
                   </ng-container>
 
@@ -498,12 +548,12 @@ <h3 class="danger-zone-title">Delete Event</h3>
                 >
                   <div class="form-name">
                     <mat-icon class="form-icon">description</mat-icon>
-                    <span
-                      >{{ form.name
-                      }}<span *ngIf="form.archived" class="text-danger">
-                        (Archived)</span
-                      ></span
-                    >
+                    <span>
+                      {{ form.name }}
+                      <span *ngIf="form.archived" class="text-danger">
+                        (Archived)
+                      </span>
+                    </span>
                   </div>
                 </a>
               </ng-template>
@@ -511,7 +561,12 @@ <h3 class="danger-zone-title">Delete Event</h3>
               <ng-template #itemActionsTemplate let-form>
                 <button
                   mat-icon-button
-                  (click)="$event.stopPropagation(); preview($event, form)"
+                  type="button"
+                  (click)="
+                    $event.preventDefault();
+                    $event.stopPropagation();
+                    preview($event, form)
+                  "
                   matTooltip="Preview Form"
                 >
                   <mat-icon>visibility</mat-icon>
@@ -522,6 +577,7 @@ <h3 class="danger-zone-title">Delete Event</h3>
             <div class="section-save-actions">
               <button
                 class="action-button"
+                type="button"
                 (click)="showArchivedForms = !showArchivedForms"
               >
                 <i
@@ -530,7 +586,11 @@ <h3 class="danger-zone-title">Delete Event</h3>
                 ></i>
                 {{ showArchivedForms ? 'Hide' : 'Show' }} Archived Forms
               </button>
-              <button class="action-button btn-primary" (click)="createForm()">
+              <button
+                class="action-button btn-primary"
+                type="button"
+                (click)="createForm()"
+              >
                 <i class="fa fa-plus"></i> Create Form
               </button>
             </div>
@@ -552,10 +612,10 @@ <h3 class="danger-zone-title">Delete Event</h3>
                   [(ngModel)]="event.minObservationForms"
                   placeholder="No Minimum"
                 />
-                <mat-hint
-                  >Minimum number of forms that must be present in an
-                  observation for this event</mat-hint
-                >
+                <mat-hint>
+                  Minimum number of forms that must be present in an observation
+                  for this event
+                </mat-hint>
               </mat-form-field>
 
               <mat-form-field appearance="outline" class="full-width">
@@ -567,10 +627,10 @@ <h3 class="danger-zone-title">Delete Event</h3>
                   [(ngModel)]="event.maxObservationForms"
                   placeholder="No Maximum"
                 />
-                <mat-hint
-                  >Limit the total number of forms that can be added to an
-                  observation for this event</mat-hint
-                >
+                <mat-hint>
+                  Limit the total number of forms that can be added to an
+                  observation for this event
+                </mat-hint>
               </mat-form-field>
 
               <div class="restrictions-help">
@@ -629,6 +689,7 @@ <h3 class="danger-zone-title">Delete Event</h3>
               <div class="section-save-actions">
                 <button
                   class="action-button btn-primary"
+                  type="button"
                   (click)="saveFormRestrictions()"
                   [disabled]="!restrictions.dirty"
                 >
diff --git a/web-app/admin/src/app/admin/admin-event/event-details/event-details.component.scss b/web-app/admin/src/app/admin/admin-event/event-details/event-details.component.scss
index 9f9a27e10..2c1088312 100644
--- a/web-app/admin/src/app/admin/admin-event/event-details/event-details.component.scss
+++ b/web-app/admin/src/app/admin/admin-event/event-details/event-details.component.scss
@@ -956,3 +956,16 @@ mat-spinner {
   float: inline-end !important;
   align-self: flex-end !important;
 }
+
+.row-main-link {
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  min-width: 0;
+  color: inherit;
+}
+
+.row-main-link:hover {
+  color: inherit;
+  text-decoration: none;
+}
\ No newline at end of file

From 6d8ca8d8280b8323f859a9fae428bb77ad0eb26d Mon Sep 17 00:00:00 2001
From: Ryan <ryanslatten@vt.edu>
Date: Thu, 30 Apr 2026 10:52:08 -0400
Subject: [PATCH 07/19] update to 6.6.5

Co-authored-by: Copilot <copilot@github.com>
---
 instance/package.json                         |  2 +-
 package-lock.json                             |  4 +--
 package.json                                  |  2 +-
 service/npm-shrinkwrap.json                   |  4 +--
 service/package.json                          |  2 +-
 web-app/package-lock.json                     |  4 +--
 web-app/package.json                          |  2 +-
 web-app/projects/core-lib/package-lock.json   |  4 +--
 web-app/projects/core-lib/package.json        |  2 +-
 .../observation-edit-date.component.ts        | 26 ++++++++++++++-----
 10 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/instance/package.json b/instance/package.json
index 097e22b5c..7f5bfe1ed 100644
--- a/instance/package.json
+++ b/instance/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ngageoint/mage.dev-instance",
-  "version": "6.6.4",
+  "version": "6.6.5",
   "description": "Assemble a Mage Server deployment from the core service, the web-app, and selected plugins.  This is primarily a development tool because the dependencies point to relative directories instead of production packages.  This can however serve as a starting point to create a production Mage instance package.json.",
   "scripts": {
     "start": "npm run start:dev",
diff --git a/package-lock.json b/package-lock.json
index 8fca3b0cb..9def111b1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ngageoint/mage.project",
-  "version": "6.6.4",
+  "version": "6.6.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ngageoint/mage.project",
-      "version": "6.6.4",
+      "version": "6.6.5",
       "hasInstallScript": true,
       "dependencies": {
         "@angular/cdk": "^17.3.10",
diff --git a/package.json b/package.json
index 09f6d5f79..ffb9e7239 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "@ngageoint/mage.project",
   "description": "This is the root package definition for the mage-server monorepo.",
   "private": true,
-  "version": "6.6.4",
+  "version": "6.6.5",
   "files": [],
   "scripts": {
     "postinstall": "npm-run-all service:ci web-app:ci arcgis:ci sftp:ci nga-msi:ci",
diff --git a/service/npm-shrinkwrap.json b/service/npm-shrinkwrap.json
index 32d6e7f7f..29108f961 100644
--- a/service/npm-shrinkwrap.json
+++ b/service/npm-shrinkwrap.json
@@ -1,12 +1,12 @@
 {
   "name": "@ngageoint/mage.service",
-  "version": "6.6.4",
+  "version": "6.6.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ngageoint/mage.service",
-      "version": "6.6.4",
+      "version": "6.6.5",
       "dependencies": {
         "@ngageoint/geopackage": "4.2.6",
         "@ngageoint/mongodb-migrations": "1.0.0",
diff --git a/service/package.json b/service/package.json
index bbc251896..021938214 100644
--- a/service/package.json
+++ b/service/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ngageoint/mage.service",
-  "version": "6.6.4",
+  "version": "6.6.5",
   "displayName": "Mage Service",
   "description": "Mage is a geospatial situational awareness and data collection platform.  The Mage Service is the ReST service API that the Mage client apps use to interact with Mage data.",
   "keywords": [
diff --git a/web-app/package-lock.json b/web-app/package-lock.json
index c1e0c9cbf..0deb0b6f4 100644
--- a/web-app/package-lock.json
+++ b/web-app/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ngageoint/mage.web-app",
-  "version": "6.6.4",
+  "version": "6.6.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ngageoint/mage.web-app",
-      "version": "6.6.4",
+      "version": "6.6.5",
       "license": "Apache-2.0",
       "dependencies": {
         "@angular/animations": "17.3.12",
diff --git a/web-app/package.json b/web-app/package.json
index da53c4c69..639532511 100644
--- a/web-app/package.json
+++ b/web-app/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@ngageoint/mage.web-app",
-  "version": "6.6.4",
+  "version": "6.6.5",
   "description": "The Mage web-app is the UI for interacting with the Mage service in a web browser.",
   "keywords": [
     "NGA",
diff --git a/web-app/projects/core-lib/package-lock.json b/web-app/projects/core-lib/package-lock.json
index 6239da91b..3ec3d255a 100644
--- a/web-app/projects/core-lib/package-lock.json
+++ b/web-app/projects/core-lib/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ngageoint/mage.web-core-lib",
-  "version": "6.6.4",
+  "version": "6.6.5",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ngageoint/mage.web-core-lib",
-      "version": "6.6.4",
+      "version": "6.6.5",
       "dependencies": {
         "@rollup/plugin-commonjs": "25.0.8",
         "@rollup/plugin-node-resolve": "15.3.1",
diff --git a/web-app/projects/core-lib/package.json b/web-app/projects/core-lib/package.json
index b076ffc42..ff95e3bfc 100644
--- a/web-app/projects/core-lib/package.json
+++ b/web-app/projects/core-lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ngageoint/mage.web-core-lib",
-  "version": "6.6.4",
+  "version": "6.6.5",
   "repository": {
     "type": "git",
     "url": "https://github.com/ngageoint/mage-server.git"
diff --git a/web-app/src/app/observation/observation-edit/observation-edit-date/observation-edit-date.component.ts b/web-app/src/app/observation/observation-edit/observation-edit-date/observation-edit-date.component.ts
index 1ace48b42..ccdab60af 100644
--- a/web-app/src/app/observation/observation-edit/observation-edit-date/observation-edit-date.component.ts
+++ b/web-app/src/app/observation/observation-edit/observation-edit-date/observation-edit-date.component.ts
@@ -3,11 +3,14 @@ import {
   ElementRef,
   Input,
   OnChanges,
+  OnDestroy,
   SimpleChanges,
   ViewChild
 } from '@angular/core';
 import { UntypedFormGroup, NgModel } from '@angular/forms';
 import moment from 'moment';
+import { Subject, Subscription } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
 import { LocalStorageService } from '../../../http/local-storage.service';
 
 @Component({
@@ -15,7 +18,7 @@ import { LocalStorageService } from '../../../http/local-storage.service';
   templateUrl: './observation-edit-date.component.html',
   styleUrls: ['./observation-edit-date.component.scss']
 })
-export class ObservationEditDateComponent implements OnChanges {
+export class ObservationEditDateComponent implements OnChanges, OnDestroy {
   @Input() formGroup: UntypedFormGroup;
   @Input() definition: any;
 
@@ -29,8 +32,23 @@ export class ObservationEditDateComponent implements OnChanges {
   timeInvalid = false;
   second = 0;
 
+  private timeChange$ = new Subject<void>();
+  private timeChangeSub: Subscription;
+
   constructor(private localStorageService: LocalStorageService) {
     this.timeZone = localStorageService.getTimeZoneEdit();
+    this.timeChangeSub = this.timeChange$
+      .pipe(debounceTime(300))
+      .subscribe(() => {
+        this.timeInvalid = !this.isValidTime(this.time);
+        if (!this.timeInvalid) {
+          this.setValue(false);
+        }
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.timeChangeSub.unsubscribe();
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -67,11 +85,7 @@ export class ObservationEditDateComponent implements OnChanges {
   }
 
   onTime(): void {
-    this.timeInvalid = !this.isValidTime(this.time);
-
-    if (!this.timeInvalid) {
-      this.setValue(false);
-    }
+    this.timeChange$.next();
   }
 
   openTimePicker(event: Event): void {

From 1d8cd40897bbc42a90195359b25913311c729702 Mon Sep 17 00:00:00 2001
From: Ryan Carpenter <ryan.carpenter@omnifederal.com>
Date: Thu, 30 Apr 2026 11:35:11 -0600
Subject: [PATCH 08/19] Table Fixes

---
 .../admin-dashboard/admin-dashboard.html      | 212 +++++---
 .../admin-dashboard/admin-dashboard.scss      | 459 +++++++++++-------
 .../admin/admin-dashboard/admin-dashboard.ts  | 275 +++++++----
 .../admin/services/admin-device.service.ts    |  77 ++-
 .../src/app/logins/logins.component.html      | 379 ++++++++-------
 .../src/app/logins/logins.component.scss      | 152 ++++--
 6 files changed, 998 insertions(+), 556 deletions(-)

diff --git a/web-app/admin/src/app/admin/admin-dashboard/admin-dashboard.html b/web-app/admin/src/app/admin/admin-dashboard/admin-dashboard.html
index b6eddb975..d021427f2 100644
--- a/web-app/admin/src/app/admin/admin-dashboard/admin-dashboard.html
+++ b/web-app/admin/src/app/admin/admin-dashboard/admin-dashboard.html
@@ -2,104 +2,188 @@
 
 <div class="admin-content p-4">
   <mat-card class="mb-4 top-card">
-    <div>
-      <div class="top-row">
-        <div class="inactive-users">
-          <mat-card>
-            <mat-card-title>
-              <span class="title-with-badge">
-                Inactive Users
-                <span matBadge="{{ count() || 0 }}" matBadgeColor="accent" matBadgeOverlap="false"
-                  class="inline-badge"></span>
-              </span>
-            </mat-card-title>
-
-            <div class="search-wrapper">
-              <mat-form-field class="w-100 mb-3">
-                <mat-label>Search</mat-label>
-                <input matInput [(ngModel)]="userSearch" (ngModelChange)="search()" />
-              </mat-form-field>
-            </div>
+    <div class="top-row">
+      <div class="dashboard-panel inactive-users">
+        <mat-card class="dashboard-panel-card">
+          <mat-card-title>
+            <span class="title-with-badge">
+              Inactive Users
+              <span
+                matBadge="{{ count() || 0 }}"
+                matBadgeColor="accent"
+                matBadgeOverlap="false"
+                class="inline-badge"
+              ></span>
+            </span>
+          </mat-card-title>
+
+          <div class="search-wrapper">
+            <mat-form-field class="w-100 mb-3">
+              <mat-label>Search</mat-label>
+              <input
+                matInput
+                [(ngModel)]="userSearch"
+                (ngModelChange)="search()"
+              />
+            </mat-form-field>
+          </div>
 
+          <div class="panel-list-shell">
             <mat-list>
-              <mat-list-item *ngFor="let user of inactiveUsers || []" class="clickable-row"
-                [routerLink]="['../users', user?.id]">
+              <mat-list-item
+                *ngFor="let user of inactiveUsers || []"
+                class="clickable-row"
+                [routerLink]="['../users', user?.id]"
+              >
                 <mat-icon matListIcon>person</mat-icon>
 
                 <div matLine>{{ user?.displayName || 'Unknown User' }}</div>
 
-                <button mat-button color="primary" *ngIf="hasPermission('UPDATE_USER')" matListItemMeta type="button"
+                <button
+                  mat-button
+                  color="primary"
+                  *ngIf="hasPermission('UPDATE_USER')"
+                  matListItemMeta
+                  type="button"
                   (mousedown)="$event.preventDefault(); $event.stopPropagation(); $event.stopImmediatePropagation()"
-                  (click)="$event.preventDefault(); $event.stopPropagation(); $event.stopImmediatePropagation(); activateUser(user)">
+                  (click)="$event.preventDefault(); $event.stopPropagation(); $event.stopImmediatePropagation(); activateUser(user)"
+                >
                   <mat-icon>check</mat-icon>
                   <span>Activate</span>
                 </button>
               </mat-list-item>
             </mat-list>
 
-            <div class="pagination-controls">
-              <button mat-button (click)="previous()" [disabled]="!hasPrevious()" type="button">
-                ← Previous User
-              </button>
-              <button mat-button (click)="next()" [disabled]="!hasNext()" type="button">
-                Next User →
-              </button>
-            </div>
-          </mat-card>
-        </div>
-
-        <div class="unregistered-devices">
-          <mat-card>
-            <mat-card-title>
-              <span class="title-with-badge">
-                Unregistered Devices
-                <span matBadge="{{ deviceCount() || 0 }}" matBadgeColor="accent" matBadgeOverlap="false"
-                  class="inline-badge"></span>
-              </span>
-            </mat-card-title>
-
-            <div class="search-wrapper">
-              <mat-form-field class="w-100 mb-3">
-                <mat-label>Search</mat-label>
-                <input matInput [(ngModel)]="deviceSearch" (ngModelChange)="searchDevices()" />
-              </mat-form-field>
+            <div
+              class="empty-panel-state"
+              *ngIf="!(inactiveUsers && inactiveUsers.length)"
+            >
+              No inactive users found.
             </div>
+          </div>
+
+          <div class="pagination-controls">
+            <button
+              mat-button
+              class="pagination-button"
+              (click)="previous()"
+              [disabled]="!hasPrevious() || loadingUsersPage"
+              type="button"
+            >
+              ← Previous User
+            </button>
+
+            <button
+              mat-button
+              class="pagination-button"
+              (click)="next()"
+              [disabled]="!hasNext() || loadingUsersPage"
+              type="button"
+            >
+              Next User →
+            </button>
+          </div>
+        </mat-card>
+      </div>
+
+      <div class="dashboard-panel unregistered-devices">
+        <mat-card class="dashboard-panel-card">
+          <mat-card-title>
+            <span class="title-with-badge">
+              Unregistered Devices
+              <span
+                matBadge="{{ deviceCount() || 0 }}"
+                matBadgeColor="accent"
+                matBadgeOverlap="false"
+                class="inline-badge"
+              ></span>
+            </span>
+          </mat-card-title>
 
+          <div class="search-wrapper">
+            <mat-form-field class="w-100 mb-3">
+              <mat-label>Search</mat-label>
+              <input
+                matInput
+                [(ngModel)]="deviceSearch"
+                (ngModelChange)="searchDevices()"
+              />
+            </mat-form-field>
+          </div>
+
+          <div class="panel-list-shell">
             <mat-list>
-              <mat-list-item *ngFor="let d of unregisteredDevices || []" class="clickable-row" (click)="goToDevice(d)">
+              <mat-list-item
+                *ngFor="let d of unregisteredDevices || []"
+                class="clickable-row"
+                (click)="goToDevice(d)"
+              >
                 <i matListIcon [ngClass]="iconClass(d)"></i>
 
                 <div class="mat-line-horizontal" matLine>
                   <span *ngIf="d?.user">
                     {{ d.user?.displayName || 'Unknown User' }}
                   </span>
-                  <span class="text-muted">({{ d?.uid || 'Unknown UID' }})</span>
+                  <span class="text-muted">
+                    ({{ d?.uid || 'Unknown UID' }})
+                  </span>
                 </div>
 
-                <button mat-button color="primary" *ngIf="hasPermission('UPDATE_DEVICE')"
-                  (click)="registerDevice($event, d)" matListItemMeta type="button">
-                  <mat-icon>check</mat-icon> Register
+                <button
+                  mat-button
+                  color="primary"
+                  *ngIf="hasPermission('UPDATE_DEVICE')"
+                  matListItemMeta
+                  type="button"
+                  (mousedown)="$event.preventDefault(); $event.stopPropagation(); $event.stopImmediatePropagation()"
+                  (click)="$event.preventDefault(); $event.stopPropagation(); $event.stopImmediatePropagation(); registerDevice($event, d)"
+                >
+                  <mat-icon>check</mat-icon>
+                  <span>Register</span>
                 </button>
               </mat-list-item>
             </mat-list>
 
-            <div class="pagination-controls">
-              <button mat-button (click)="previousDevice()" [disabled]="!hasPreviousDevice()" type="button">
-                ← Previous Device
-              </button>
-              <button mat-button (click)="nextDevice()" [disabled]="!hasNextDevice()" type="button">
-                Next Device →
-              </button>
+            <div
+              class="empty-panel-state"
+              *ngIf="!(unregisteredDevices && unregisteredDevices.length)"
+            >
+              No unregistered devices found.
             </div>
-          </mat-card>
-        </div>
+          </div>
+
+          <div class="pagination-controls">
+            <button
+              mat-button
+              class="pagination-button"
+              (click)="previousDevice()"
+              [disabled]="!hasPreviousDevice() || loadingDevicesPage"
+              type="button"
+            >
+              ← Previous Device
+            </button>
+
+            <button
+              mat-button
+              class="pagination-button"
+              (click)="nextDevice()"
+              [disabled]="!hasNextDevice() || loadingDevicesPage"
+              type="button"
+            >
+              Next Device →
+            </button>
+          </div>
+        </mat-card>
       </div>
     </div>
   </mat-card>
 
   <div class="section-card">
     <div class="table-wrapper mat-elevation-z2">
-      <mage-logins [devices]="unregisteredDevices" [users]="inactiveUsers"></mage-logins>
+      <mage-logins
+        [devices]="unregisteredDevices"
+        [users]="inactiveUsers"
+      ></mage-logins>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/web-app/admin/src/app/admin/admin-dashboard/admin-dashboard.scss b/web-app/admin/src/app/admin/admin-dashboard/admin-dashboard.scss
index 89a57fe04..ad1414931 100644
--- a/web-app/admin/src/app/admin/admin-dashboard/admin-dashboard.scss
+++ b/web-app/admin/src/app/admin/admin-dashboard/admin-dashboard.scss
@@ -4,6 +4,9 @@ $font-md: 16px;
 $font-sm: 14px;
 $font-xs: 12px;
 
+$top-panel-height: 390px;
+$top-panel-list-height: 236px;
+
 ::ng-deep .admin-main-content {
   transition: margin-left 0.3s;
   width: 100%;
@@ -48,10 +51,6 @@ $font-xs: 12px;
     border: 1px solid #d7d7d7;
     box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
     background: #fff;
-
-    @media (max-width: 959px), (max-height: 600px) {
-      height: auto;
-    }
   }
 
   .top-row {
@@ -62,177 +61,242 @@ $font-xs: 12px;
     overflow: visible;
 
     @media (max-width: 959px), (max-height: 600px) {
-      flex-direction: column;
+      display: flex;
+      flex-direction: column !important;
+      align-items: stretch;
       height: auto;
       max-height: none;
     }
+  }
 
-    .inactive-users,
-    .unregistered-devices {
-      flex: 1 1 0;
-      min-width: 0;
-      display: flex;
-      flex-direction: column;
+  .dashboard-panel,
+  .inactive-users,
+  .unregistered-devices {
+    flex: 1 1 0;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    height: $top-panel-height;
+    min-height: $top-panel-height;
+    max-height: $top-panel-height;
 
-      @media (max-width: 959px), (max-height: 600px) {
-        height: auto;
-      }
+    @media (max-width: 959px), (max-height: 600px) {
+      flex: 0 0 auto;
+      width: 100%;
+      height: $top-panel-height;
+      min-height: $top-panel-height;
+      max-height: $top-panel-height;
+    }
+  }
 
-      mat-card,
-      .mat-mdc-card {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        overflow: hidden;
-        padding: 0;
-        border: 0 !important;
-        box-shadow: none !important;
-        background: transparent !important;
-        border-radius: 0 !important;
-      }
+  .dashboard-panel-card,
+  .inactive-users mat-card,
+  .inactive-users .mat-mdc-card,
+  .unregistered-devices mat-card,
+  .unregistered-devices .mat-mdc-card {
+    flex: 1 1 auto;
+    height: 100%;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    padding: 0;
+    border: 0 !important;
+    box-shadow: none !important;
+    background: transparent !important;
+    border-radius: 0 !important;
+  }
 
-      .search-wrapper {
-        background-color: #f7f7f7;
-        padding: 6px 10px 0 10px;
-        border: 1px solid #a9a9a9;
-        border-bottom: none;
-      }
+  .search-wrapper {
+    flex: 0 0 auto;
+    background-color: #f7f7f7;
+    padding: 6px 10px 0 10px;
+    border: 1px solid #a9a9a9;
+    border-bottom: none;
+  }
 
-      mat-form-field,
-      .mat-mdc-form-field {
-        width: 100%;
-        margin-bottom: -18px;
+  mat-form-field,
+  .mat-mdc-form-field {
+    width: 100%;
+    margin-bottom: -18px;
+
+    .mat-mdc-text-field-wrapper {
+      background-color: transparent;
+      padding: 0 8px;
+    }
+
+    .mdc-line-ripple::before,
+    .mdc-line-ripple::after {
+      border-bottom-color: transparent;
+    }
+
+    .mat-mdc-form-field-subscript-wrapper {
+      display: none;
+    }
+  }
+
+  .mdc-floating-label {
+    padding-bottom: 15px;
+    font-size: $font-sm;
+  }
+
+  .panel-list-shell {
+    position: relative;
+    flex: 0 0 $top-panel-list-height;
+    height: $top-panel-list-height;
+    min-height: $top-panel-list-height;
+    max-height: $top-panel-list-height;
+    overflow: hidden;
+    border: 1px solid #a9a9a9;
+    background: #fcfcfc;
+
+    @media (max-width: 959px), (max-height: 600px) {
+      flex: 0 0 $top-panel-list-height;
+      height: $top-panel-list-height;
+      min-height: $top-panel-list-height;
+      max-height: $top-panel-list-height;
+    }
+  }
+
+  mat-list,
+  .mat-mdc-list {
+    height: 100%;
+    min-height: 100%;
+    max-height: 100%;
+    overflow-y: auto;
+    overflow-x: hidden;
+    padding-top: 0;
+    background: #fcfcfc;
+  }
+
+  mat-list-item,
+  a[mat-list-item],
+  .mat-mdc-list-item {
+    min-height: 48px;
+    height: auto;
+    padding: 4px 10px !important;
+    border-bottom: 1px solid #efefef;
+    display: flex;
+    align-items: center;
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .mdc-list-item__content,
+    .mat-mdc-list-item-unscoped-content {
+      display: flex;
+      align-items: center;
+      min-width: 0;
+      width: 100%;
+    }
 
-        .mat-mdc-text-field-wrapper {
-          background-color: transparent;
-          padding: 0 8px;
-        }
+    mat-icon,
+    i[matListIcon] {
+      font-size: $font-md;
+      margin-right: 10px;
+      color: #666;
+      margin-top: 0;
+      flex: 0 0 18px;
+      width: 18px;
+      height: 18px;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
 
-        .mdc-line-ripple::before,
-        .mdc-line-ripple::after {
-          border-bottom-color: transparent;
-        }
+    [matLine],
+    .mat-line-horizontal,
+    .mdc-list-item__primary-text {
+      font-size: $font-sm;
+      line-height: 1.3;
+      font-weight: 500;
+      color: #333;
+      display: inline-flex;
+      align-items: center;
+      min-width: 0;
+      flex: 1 1 auto;
+    }
+
+    button[mat-button],
+    .mat-mdc-button {
+      margin-left: auto;
+      min-width: 92px;
+      height: 32px;
+      padding: 0 10px;
+      font-size: $font-xs;
+      line-height: 32px;
+      border: 1px solid #a8a8a8;
+      border-radius: 4px;
+      background: #f3f3f3;
+      color: #8a8a8a;
+      text-transform: none !important;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
 
-        .mat-mdc-form-field-subscript-wrapper {
-          display: none;
-        }
+      .mdc-button__label {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
       }
 
-      .mdc-floating-label {
-        padding-bottom: 15px;
+      mat-icon {
         font-size: $font-sm;
+        width: $font-sm;
+        height: $font-sm;
+        margin: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
       }
 
-      mat-list,
-      .mat-mdc-list {
-        flex: 1;
-        overflow-y: auto;
-        max-height: 240px;
-        border: 1px solid #a9a9a9;
-        padding-top: 0;
-        background: #fcfcfc;
-
-        @media (max-width: 959px), (max-height: 600px) {
-          max-height: 260px;
-        }
-
-        mat-list-item,
-        a[mat-list-item],
-        .mat-mdc-list-item {
-          min-height: 48px;
-          height: auto;
-          padding: 4px 10px !important;
-          border-bottom: 1px solid #efefef;
-          display: flex;
-          align-items: center;
-
-          &:last-child {
-            border-bottom: none;
-          }
-
-          .mdc-list-item__content,
-          .mat-mdc-list-item-unscoped-content {
-            display: flex;
-            align-items: center;
-            min-width: 0;
-            width: 100%;
-          }
-
-          mat-icon,
-          i[matListIcon] {
-            font-size: $font-md;
-            margin-right: 10px;
-            color: #666;
-            margin-top: 0;
-            flex: 0 0 18px;
-            width: 18px;
-            height: 18px;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-          }
-
-          [matLine],
-          .mat-line-horizontal,
-          .mdc-list-item__primary-text {
-            font-size: $font-sm;
-            line-height: 1.3;
-            font-weight: 500;
-            color: #333;
-            display: inline-flex;
-            align-items: center;
-            min-width: 0;
-            flex: 1 1 auto;
-          }
-
-          button[mat-button],
-          .mat-mdc-button {
-            margin-left: auto;
-            min-width: 92px;
-            height: 32px;
-            padding: 0 10px;
-            font-size: $font-xs;
-            line-height: 32px;
-            border: 1px solid #a8a8a8;
-            border-radius: 4px;
-            background: #f3f3f3;
-            color: #8a8a8a;
-            text-transform: none !important;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            gap: 6px;
-
-            .mdc-button__label {
-              display: inline-flex;
-              align-items: center;
-              justify-content: center;
-              gap: 6px;
-            }
-
-            mat-icon {
-              font-size: $font-sm;
-              width: $font-sm;
-              height: $font-sm;
-              margin: 0;
-              display: inline-flex;
-              align-items: center;
-              justify-content: center;
-              line-height: 1;
-            }
-
-            span {
-              display: inline-flex;
-              align-items: center;
-              line-height: 1;
-              margin: 0;
-            }
-          }
-        }
+      span {
+        display: inline-flex;
+        align-items: center;
+        line-height: 1;
+        margin: 0;
+      }
+    }
+
+    @media (max-width: 560px) {
+      .mdc-list-item__content,
+      .mat-mdc-list-item-unscoped-content {
+        flex-wrap: wrap;
+        gap: 4px 8px;
+      }
+
+      [matLine],
+      .mat-line-horizontal,
+      .mdc-list-item__primary-text {
+        flex: 1 1 calc(100% - 32px);
+      }
+
+      button[mat-button],
+      .mat-mdc-button {
+        margin-left: 28px;
+        margin-top: 4px;
       }
     }
   }
 
+  .empty-panel-state {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+    text-align: center;
+    color: #6b7280;
+    font-size: $font-sm;
+    pointer-events: none;
+    background: #fcfcfc;
+  }
+
   .title-with-badge {
     display: flex;
     align-items: center;
@@ -262,29 +326,83 @@ $font-xs: 12px;
   }
 
   .pagination-controls {
+    flex: 0 0 auto;
     display: flex;
     justify-content: space-between;
     align-items: center;
+    gap: 8px;
     margin-top: 10px;
     padding: 0 2px;
 
+    .pagination-button,
     button {
       min-width: auto;
-      padding: 0;
+      height: 28px;
+      padding: 0 8px;
       font-size: $font-xs;
       letter-spacing: 0.04em;
       text-transform: none !important;
-      color: #8b8b8b;
+      border-radius: 4px;
+      transition: color 160ms ease, background-color 160ms ease,
+        opacity 160ms ease;
+    }
+
+    .pagination-button:first-child {
+      margin-right: auto;
+    }
+
+    .pagination-button:last-child {
+      margin-left: auto;
+    }
+
+    .pagination-button:not(:disabled):not(.mat-mdc-button-disabled),
+    button:not(:disabled):not(.mat-mdc-button-disabled) {
+      color: #1e88e5 !important;
+      opacity: 1;
+      cursor: pointer;
+
+      --mdc-text-button-label-text-color: #1e88e5;
+      --mat-text-button-state-layer-color: #1e88e5;
+
+      &:hover {
+        background: rgba(30, 136, 229, 0.08);
+        color: #1565c0 !important;
+
+        --mdc-text-button-label-text-color: #1565c0;
+      }
+
+      &:focus-visible {
+        outline: 2px solid rgba(30, 136, 229, 0.35);
+        outline-offset: 2px;
+      }
+    }
+
+    .pagination-button:disabled,
+    .pagination-button[disabled],
+    .pagination-button.mat-mdc-button-disabled,
+    button:disabled,
+    button[disabled],
+    button.mat-mdc-button-disabled {
+      color: #b8b8b8 !important;
+      opacity: 0.55;
+      cursor: not-allowed;
+      pointer-events: none;
+
+      --mdc-text-button-disabled-label-text-color: #b8b8b8;
+      --mdc-text-button-label-text-color: #b8b8b8;
     }
 
     @media (max-width: 480px), (max-height: 600px) {
       align-items: stretch;
-      gap: 12px;
+      gap: 8px;
       flex-direction: column;
 
+      .pagination-button,
       button {
         width: 100%;
         text-align: center;
+        margin-left: 0;
+        margin-right: 0;
       }
     }
   }
@@ -366,30 +484,9 @@ $font-xs: 12px;
   font-size: $font-sm;
 }
 
-/* important: reserve space for paginator/footer inside mage-logins */
 :host ::ng-deep mage-logins {
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  min-height: 0;
-  height: 100%;
-}
-
-:host ::ng-deep mage-logins .section-card,
-:host ::ng-deep mage-logins .table-wrapper {
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  min-height: 0;
-  height: 100%;
-  max-height: 100%;
-}
-
-:host ::ng-deep mage-logins .table-scroll,
-:host ::ng-deep mage-logins .login-table-scroll {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
+  display: block;
+  width: 100%;
 }
 
 :host ::ng-deep mage-logins .mat-paginator,
diff --git a/web-app/admin/src/app/admin/admin-dashboard/admin-dashboard.ts b/web-app/admin/src/app/admin/admin-dashboard/admin-dashboard.ts
index 1ee66071a..6a05fe58f 100644
--- a/web-app/admin/src/app/admin/admin-dashboard/admin-dashboard.ts
+++ b/web-app/admin/src/app/admin/admin-dashboard/admin-dashboard.ts
@@ -9,8 +9,11 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { Subject, takeUntil } from 'rxjs';
 
 import { AdminBreadcrumb } from '../admin-breadcrumb/admin-breadcrumb.model';
+import {
+  AdminDeviceService,
+  DashboardDevicePageInfo
+} from '../services/admin-device.service';
 import { AdminUserService } from '../services/admin-user.service';
-import { AdminDeviceService } from '../services/admin-device.service';
 import { DevicePagingService } from '../../services/device-paging.service';
 import { UserPagingService } from '../../services/user-paging.service';
 import { User } from '../admin-users/user';
@@ -34,10 +37,26 @@ export class AdminDashboardComponent implements OnInit, OnDestroy {
   deviceStateAndData!: ReturnType<DevicePagingService['constructDefault']>;
 
   inactiveUsers: Array<ReturnType<UserPagingService['users']>[number]> = [];
-  unregisteredDevices: Array<
-    ReturnType<DevicePagingService['devices']>[number]
+  unregisteredDevices: any[] = [];
+
+  readonly userPageSize = 5;
+  readonly devicePageSize = 5;
+
+  userPageIndex = 0;
+  loadingUsersPage = false;
+  loadingDevicesPage = false;
+
+  private allInactiveUsers: Array<
+    ReturnType<UserPagingService['users']>[number]
   > = [];
 
+  deviceStart = 0;
+  deviceNextStart: number | null = null;
+  devicePrevStart: number | null = null;
+  deviceTotalCount = 0;
+
+  private devicePageCache = new Map<number, DashboardDevicePageInfo>();
+
   breadcrumbs: AdminBreadcrumb[] = [
     {
       title: 'Dashboard',
@@ -68,23 +87,8 @@ export class AdminDashboardComponent implements OnInit, OnDestroy {
         this.currentUser = user;
       });
 
-    this.devicePagingService
-      .refresh(this.deviceStateAndData)
-      .pipe(takeUntil(this.destroy$))
-      .subscribe(() => {
-        this.unregisteredDevices = this.devicePagingService.devices(
-          this.deviceStateAndData[this.deviceState]
-        );
-      });
-
-    this.userPagingService
-      .refresh(this.stateAndData)
-      .pipe(takeUntil(this.destroy$))
-      .subscribe(() => {
-        this.inactiveUsers = this.userPagingService.users(
-          this.stateAndData[this.userState]
-        );
-      });
+    this.refreshDevices();
+    this.refreshUsers();
   }
 
   ngOnDestroy(): void {
@@ -94,98 +98,95 @@ export class AdminDashboardComponent implements OnInit, OnDestroy {
 
   goToUser(user: any): void {
     if (!user?.id) return;
+
     this.router.navigate(['../users', user.id], { relativeTo: this.route });
   }
 
   goToDevice(device: any): void {
     if (!device?.id) return;
+
     this.router.navigate(['../devices', device.id], { relativeTo: this.route });
   }
 
   count(): number {
-    return this.userPagingService.count(this.stateAndData[this.userState]);
+    const state = this.stateAndData?.[this.userState];
+
+    if (!state) {
+      return this.allInactiveUsers.length;
+    }
+
+    const serviceCount = this.userPagingService.count(state);
+
+    return serviceCount || this.allInactiveUsers.length;
+  }
+
+  deviceCount(): number {
+    return this.deviceTotalCount || this.unregisteredDevices.length;
   }
 
   hasNext(): boolean {
-    return this.userPagingService.hasNext(this.stateAndData[this.userState]);
+    return (this.userPageIndex + 1) * this.userPageSize < this.count();
   }
 
   next(): void {
-    this.userPagingService
-      .next(this.stateAndData[this.userState])
-      .pipe(takeUntil(this.destroy$))
-      .subscribe((users) => {
-        this.inactiveUsers = users;
-      });
+    if (!this.hasNext() || this.loadingUsersPage) return;
+
+    this.userPageIndex += 1;
+    this.applyUserPage();
   }
 
   hasPrevious(): boolean {
-    return this.userPagingService.hasPrevious(
-      this.stateAndData[this.userState]
-    );
+    return this.userPageIndex > 0;
   }
 
   previous(): void {
-    this.userPagingService
-      .previous(this.stateAndData[this.userState])
-      .pipe(takeUntil(this.destroy$))
-      .subscribe((users) => {
-        this.inactiveUsers = users;
-      });
-  }
+    if (!this.hasPrevious() || this.loadingUsersPage) return;
 
-  deviceCount(): number {
-    return this.devicePagingService.count(
-      this.deviceStateAndData[this.deviceState]
-    );
+    this.userPageIndex -= 1;
+    this.applyUserPage();
   }
 
   hasNextDevice(): boolean {
-    return this.devicePagingService.hasNext(
-      this.deviceStateAndData[this.deviceState]
-    );
+    return this.deviceNextStart !== null && !this.loadingDevicesPage;
   }
 
   nextDevice(): void {
-    this.devicePagingService
-      .next(this.deviceStateAndData[this.deviceState])
-      .pipe(takeUntil(this.destroy$))
-      .subscribe((devices) => {
-        this.unregisteredDevices = devices;
-      });
+    if (!this.hasNextDevice() || this.deviceNextStart === null) return;
+
+    this.loadDevicePage(this.deviceNextStart);
   }
 
   hasPreviousDevice(): boolean {
-    return this.devicePagingService.hasPrevious(
-      this.deviceStateAndData[this.deviceState]
-    );
+    return this.devicePrevStart !== null && !this.loadingDevicesPage;
   }
 
   previousDevice(): void {
-    this.devicePagingService
-      .previous(this.deviceStateAndData[this.deviceState])
-      .pipe(takeUntil(this.destroy$))
-      .subscribe((devices) => {
-        this.unregisteredDevices = devices;
-      });
+    if (!this.hasPreviousDevice() || this.devicePrevStart === null) return;
+
+    this.loadDevicePage(this.devicePrevStart);
   }
 
   search(): void {
+    this.userPageIndex = 0;
+    this.loadingUsersPage = true;
+
     this.userPagingService
       .search(this.stateAndData[this.userState], this.userSearch)
       .pipe(takeUntil(this.destroy$))
-      .subscribe((users) => {
-        this.inactiveUsers = users;
+      .subscribe({
+        next: (users) => {
+          this.setUsers(users);
+          this.loadingUsersPage = false;
+        },
+        error: () => {
+          this.loadingUsersPage = false;
+        }
       });
   }
 
   searchDevices(): void {
-    this.devicePagingService
-      .search(this.deviceStateAndData[this.deviceState], this.deviceSearch)
-      .pipe(takeUntil(this.destroy$))
-      .subscribe((devices) => {
-        this.unregisteredDevices = devices;
-      });
+    this.devicePageCache.clear();
+    this.loadDevicePage(0);
   }
 
   iconClass(device: any): string {
@@ -193,11 +194,19 @@ export class AdminDashboardComponent implements OnInit, OnDestroy {
     if (device.iconClass) return device.iconClass;
 
     const userAgent = (device.userAgent || '').toLowerCase();
-    if (device.appVersion === 'Web Client')
+
+    if (device.appVersion === 'Web Client') {
       return 'fa fa-desktop admin-desktop-icon-xs';
-    if (userAgent.includes('android'))
+    }
+
+    if (userAgent.includes('android')) {
       return 'fa fa-android admin-android-icon-xs';
-    if (userAgent.includes('ios')) return 'fa fa-apple admin-apple-icon-xs';
+    }
+
+    if (userAgent.includes('ios')) {
+      return 'fa fa-apple admin-apple-icon-xs';
+    }
+
     return 'fa fa-mobile admin-generic-icon-xs';
   }
 
@@ -214,15 +223,7 @@ export class AdminDashboardComponent implements OnInit, OnDestroy {
       .updateUser(user.id, user)
       .pipe(takeUntil(this.destroy$))
       .subscribe(() => {
-        this.userPagingService
-          .refresh(this.stateAndData)
-          .pipe(takeUntil(this.destroy$))
-          .subscribe(() => {
-            this.inactiveUsers = this.userPagingService.users(
-              this.stateAndData[this.userState]
-            );
-          });
-
+        this.refreshUsers();
         this.onUserActivated.emit({ user });
       });
   }
@@ -231,20 +232,116 @@ export class AdminDashboardComponent implements OnInit, OnDestroy {
     event.preventDefault();
     event.stopPropagation();
 
+    if (!device?.id) return;
+
     this.deviceService
       .updateDevice(device.id, { registered: true })
       .pipe(takeUntil(this.destroy$))
       .subscribe((updatedDevice) => {
-        this.devicePagingService
-          .refresh(this.deviceStateAndData)
-          .pipe(takeUntil(this.destroy$))
-          .subscribe(() => {
-            this.unregisteredDevices = this.devicePagingService.devices(
-              this.deviceStateAndData[this.deviceState]
-            );
-          });
-
+        this.devicePageCache.clear();
+        this.refreshDevices();
         this.onDeviceEnabled.emit({ device: updatedDevice });
       });
   }
+
+  private refreshUsers(): void {
+    this.userPageIndex = 0;
+    this.loadingUsersPage = true;
+
+    this.userPagingService
+      .refresh(this.stateAndData)
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: () => {
+          const users = this.userPagingService.users(
+            this.stateAndData[this.userState]
+          );
+
+          this.setUsers(users);
+          this.loadingUsersPage = false;
+        },
+        error: () => {
+          this.loadingUsersPage = false;
+        }
+      });
+  }
+
+  private refreshDevices(): void {
+    this.devicePageCache.clear();
+    this.loadDevicePage(0);
+  }
+
+  private loadDevicePage(start: number): void {
+    const cached = this.devicePageCache.get(start);
+
+    if (cached) {
+      this.applyDevicePage(cached);
+      return;
+    }
+
+    this.loadingDevicesPage = true;
+
+    this.deviceService
+      .getDashboardDevicePage({
+        start,
+        limit: this.devicePageSize,
+        registered: false,
+        user: true,
+        includePagination: true,
+        term: this.deviceSearch || undefined
+      })
+      .pipe(takeUntil(this.destroy$))
+      .subscribe({
+        next: (page) => {
+          this.devicePageCache.set(start, page);
+          this.applyDevicePage(page);
+          this.loadingDevicesPage = false;
+        },
+        error: () => {
+          this.unregisteredDevices = [];
+          this.deviceNextStart = null;
+          this.devicePrevStart = null;
+          this.loadingDevicesPage = false;
+        }
+      });
+  }
+
+  private applyDevicePage(page: DashboardDevicePageInfo): void {
+    this.deviceStart = page.start;
+    this.deviceNextStart = page.nextStart;
+    this.devicePrevStart = page.prevStart;
+    this.deviceTotalCount = page.totalCount;
+    this.unregisteredDevices = page.devices || [];
+  }
+
+  private setUsers(
+    users: Array<ReturnType<UserPagingService['users']>[number]> = []
+  ): void {
+    this.allInactiveUsers = users || [];
+    this.clampUserPageIndex();
+    this.applyUserPage();
+  }
+
+  private applyUserPage(): void {
+    const start = this.userPageIndex * this.userPageSize;
+    const end = start + this.userPageSize;
+
+    this.inactiveUsers = this.allInactiveUsers.slice(start, end);
+  }
+
+  private clampUserPageIndex(): void {
+    const maxPageIndex = this.maxUserPageIndex();
+
+    if (this.userPageIndex > maxPageIndex) {
+      this.userPageIndex = maxPageIndex;
+    }
+  }
+
+  private maxUserPageIndex(): number {
+    const total = this.count();
+
+    if (!total) return 0;
+
+    return Math.ceil(total / this.userPageSize) - 1;
+  }
 }
diff --git a/web-app/admin/src/app/admin/services/admin-device.service.ts b/web-app/admin/src/app/admin/services/admin-device.service.ts
index 7d4801231..9b4f65ad7 100644
--- a/web-app/admin/src/app/admin/services/admin-device.service.ts
+++ b/web-app/admin/src/app/admin/services/admin-device.service.ts
@@ -15,7 +15,7 @@ export interface SearchOptions {
   state?: string;
 
   limit?: number;
-  start?: string;
+  start?: number | string;
   sort?: any;
   registered?: boolean;
   or?: any;
@@ -41,6 +41,15 @@ export interface DevicePageInfo {
   links?: { next?: string; prev?: string };
 }
 
+export interface DashboardDevicePageInfo {
+  devices: Device[];
+  totalCount: number;
+  limit: number;
+  start: number;
+  nextStart: number | null;
+  prevStart: number | null;
+}
+
 export interface PagedResponse<T> {
   pageSize?: number;
   pageIndex?: number;
@@ -50,15 +59,28 @@ export interface PagedResponse<T> {
 
 const setParams = (options: any): HttpParams => {
   let params = new HttpParams();
+
   for (const key of Object.keys(options || {})) {
     const v = options[key];
+
     if (v !== undefined && v !== null) {
       params = params.set(key, typeof v === 'string' ? v : JSON.stringify(v));
     }
   }
+
   return params;
 };
 
+const toNumberOrNull = (value: number | string | null | undefined): number | null => {
+  if (value === undefined || value === null || value === '') {
+    return null;
+  }
+
+  const parsed = Number(value);
+
+  return Number.isNaN(parsed) ? null : parsed;
+};
+
 @Injectable({
   providedIn: 'root'
 })
@@ -68,11 +90,13 @@ export class AdminDeviceService {
   getDevices(options: SearchOptions): Observable<DevicesResponse> {
     let params = setParams(options);
     params = params.set('includePagination', 'true');
+
     return this.http.get<DevicesResponse>('/api/devices', { params });
   }
 
   getAllDevices(filter: any): Observable<DevicePageInfo> {
     const params = setParams({ ...filter, includePagination: true });
+
     return this.http.get<any>('/api/devices', { params }).pipe(
       map((res) => {
         const devices =
@@ -81,14 +105,61 @@ export class AdminDeviceService {
           res?.items ??
           res?.pageInfo?.devices ??
           [];
-        const links = res?.links ?? res?.pageInfo?.links ?? {};
+
+        const rawLinks =
+          res?.items?.links ??
+          res?.links ??
+          res?.pageInfo?.links ??
+          {};
+
+        const links = {
+          next:
+            rawLinks?.next !== undefined && rawLinks?.next !== null
+              ? String(rawLinks.next)
+              : undefined,
+          prev:
+            rawLinks?.prev !== undefined && rawLinks?.prev !== null
+              ? String(rawLinks.prev)
+              : undefined
+        };
+
         return { devices, links } as DevicePageInfo;
       })
     );
   }
 
+  getDashboardDevicePage(options: SearchOptions): Observable<DashboardDevicePageInfo> {
+    const limit = Number(options.limit ?? options.page_size ?? 5);
+    const start = Number(options.start ?? 0);
+
+    const params = setParams({
+      ...options,
+      start,
+      limit,
+      includePagination: true
+    });
+
+    return this.http.get<any>('/api/devices', { params }).pipe(
+      map((res) => {
+        const items = res?.items ?? {};
+        const links = items?.links ?? res?.links ?? {};
+        const devices = items?.devices ?? res?.devices ?? [];
+
+        return {
+          devices,
+          totalCount: Number(items?.totalCount ?? res?.totalCount ?? devices.length),
+          limit: Number(items?.limit ?? res?.pageSize ?? limit),
+          start: Number(items?.start ?? start),
+          nextStart: toNumberOrNull(links?.next),
+          prevStart: toNumberOrNull(links?.prev)
+        } as DashboardDevicePageInfo;
+      })
+    );
+  }
+
   count(filter: any): Observable<DeviceCountDoc> {
     const params = setParams(filter);
+
     return this.http.get<DeviceCountDoc>('/api/devices/count', { params });
   }
 
@@ -107,4 +178,4 @@ export class AdminDeviceService {
   createDevice(deviceData: Partial<Device>): Observable<Device> {
     return this.http.post<Device>('/api/devices', deviceData);
   }
-}
+}
\ No newline at end of file
diff --git a/web-app/admin/src/app/logins/logins.component.html b/web-app/admin/src/app/logins/logins.component.html
index 2ec3a96d9..7b16f4127 100644
--- a/web-app/admin/src/app/logins/logins.component.html
+++ b/web-app/admin/src/app/logins/logins.component.html
@@ -1,198 +1,233 @@
-<div class="filter-header">
-  <div class="section-table-title">Logins</div>
-
-  <div class="filter-toggle-wrapper">
-    <button
-      mat-stroked-button
-      color="primary"
-      (click)="toggleFilters = !toggleFilters"
-      [attr.aria-expanded]="toggleFilters"
-      aria-controls="logins-filters-drawer"
-      type="button"
-    >
-      <mat-icon>{{ toggleFilters ? 'close' : 'filter_list' }}</mat-icon>
-      {{ toggleFilters ? 'Hide Filters' : 'Show Filters' }}
-    </button>
+<div class="logins-shell">
+  <div class="filter-header">
+    <div class="section-table-title">Logins</div>
+
+    <div class="filter-toggle-wrapper">
+      <button
+        mat-stroked-button
+        color="primary"
+        (click)="toggleFilters = !toggleFilters"
+        [attr.aria-expanded]="toggleFilters"
+        aria-controls="logins-filters-drawer"
+        type="button"
+      >
+        <mat-icon>{{ toggleFilters ? 'close' : 'filter_list' }}</mat-icon>
+        {{ toggleFilters ? 'Hide Filters' : 'Show Filters' }}
+      </button>
+    </div>
   </div>
-</div>
 
-<div class="filters-drawer-shell" [class.open]="toggleFilters">
-  <div class="integrated-navbar" id="logins-filters-drawer" role="region">
-    <div class="login-filters">
-      <div class="filter-section">
-        <div class="form-group" *ngIf="!userId">
-          <label class="filter-label">User:</label>
-
-          <div class="input-with-clear">
-            <input
-              type="text"
-              class="form-input user-input"
-              placeholder="Search users..."
-              [(ngModel)]="userText"
-              (ngModelChange)="onUserSearchChange($event)"
-            />
-
-            <button
-              type="button"
-              class="clear-btn"
-              *ngIf="userText"
-              (click)="onClearUserInput()"
-              aria-label="Clear user search"
-            >
-              ×
-            </button>
+  <div class="filters-drawer-shell" [class.open]="toggleFilters">
+    <div class="integrated-navbar" id="logins-filters-drawer" role="region">
+      <div class="login-filters">
+        <div class="filter-section">
+          <div class="form-group" *ngIf="!userId">
+            <label class="filter-label">User:</label>
+
+            <div class="input-with-clear">
+              <input
+                type="text"
+                class="form-input user-input"
+                placeholder="Search users..."
+                [(ngModel)]="userText"
+                (ngModelChange)="onUserSearchChange($event)"
+              />
+
+              <button
+                type="button"
+                class="clear-btn"
+                *ngIf="userText"
+                (click)="onClearUserInput()"
+                aria-label="Clear user search"
+              >
+                ×
+              </button>
 
-            <div class="suggestions" *ngIf="loginSearchResults?.length && userText">
               <div
-                class="suggestion-item"
-                *ngFor="let u of loginSearchResults"
-                (click)="selectUser(u)"
+                class="suggestions"
+                *ngIf="loginSearchResults?.length && userText"
               >
-                {{ u.displayName }}
+                <div
+                  class="suggestion-item"
+                  *ngFor="let u of loginSearchResults"
+                  (click)="selectUser(u)"
+                >
+                  {{ u.displayName }}
+                </div>
               </div>
             </div>
           </div>
-        </div>
 
-        <div class="form-group" *ngIf="!deviceId">
-          <label class="filter-label">Device:</label>
-
-          <div class="input-with-clear">
-            <input
-              type="text"
-              [(ngModel)]="deviceText"
-              placeholder="Filter on device"
-              class="form-input"
-              (ngModelChange)="onDeviceSearchChange($event)"
-            />
-
-            <button
-              type="button"
-              class="clear-btn"
-              *ngIf="deviceText"
-              (click)="onClearDeviceInput()"
-              aria-label="Clear device search"
-            >
-              ×
-            </button>
+          <div class="form-group" *ngIf="!deviceId">
+            <label class="filter-label">Device:</label>
+
+            <div class="input-with-clear">
+              <input
+                type="text"
+                [(ngModel)]="deviceText"
+                placeholder="Filter on device"
+                class="form-input"
+                (ngModelChange)="onDeviceSearchChange($event)"
+              />
+
+              <button
+                type="button"
+                class="clear-btn"
+                *ngIf="deviceText"
+                (click)="onClearDeviceInput()"
+                aria-label="Clear device search"
+              >
+                ×
+              </button>
 
-            <div class="suggestions" *ngIf="loginDeviceSearchResults?.length && deviceText">
               <div
-                class="suggestion-item"
-                *ngFor="let d of loginDeviceSearchResults"
-                (click)="selectDevice(d)"
+                class="suggestions"
+                *ngIf="loginDeviceSearchResults?.length && deviceText"
               >
-                <i class="fa" [ngClass]="iconClass(d)"></i>
-                {{ d?.uid || d?.userAgent || 'Unknown Device' }}
+                <div
+                  class="suggestion-item"
+                  *ngFor="let d of loginDeviceSearchResults"
+                  (click)="selectDevice(d)"
+                >
+                  <i class="fa" [ngClass]="iconClass(d)"></i>
+                  {{ d?.uid || d?.userAgent || 'Unknown Device' }}
+                </div>
               </div>
             </div>
           </div>
-        </div>
 
-        <div class="form-group">
-          <label class="filter-label">Date Range:</label>
-
-          <div class="date-range-inputs">
-            <input
-              type="date"
-              placeholder="Start Date"
-              class="form-input date-input"
-              [(ngModel)]="login.startDate"
-              (ngModelChange)="dateFilterChanged()"
-            />
-
-            <span class="date-separator">to</span>
-
-            <input
-              type="date"
-              placeholder="End Date"
-              class="form-input date-input"
-              [(ngModel)]="login.endDate"
-              (ngModelChange)="dateFilterChanged()"
-            />
+          <div class="form-group">
+            <label class="filter-label">Date Range:</label>
+
+            <div class="date-range-inputs">
+              <input
+                type="date"
+                placeholder="Start Date"
+                class="form-input date-input"
+                [(ngModel)]="login.startDate"
+                (ngModelChange)="dateFilterChanged()"
+              />
+
+              <span class="date-separator">to</span>
+
+              <input
+                type="date"
+                placeholder="End Date"
+                class="form-input date-input"
+                [(ngModel)]="login.endDate"
+                (ngModelChange)="dateFilterChanged()"
+              />
+            </div>
           </div>
-        </div>
 
-        <div class="form-group">
-          <label class="filter-label">Results:</label>
-
-          <select
-            class="form-input results-select"
-            [(ngModel)]="loginResultsLimit"
-            (ngModelChange)="loginResultsLimitChanged()"
-          >
-            <option value="10">10</option>
-            <option value="25">25</option>
-            <option value="50">50</option>
-            <option value="100">100</option>
-          </select>
+          <div class="form-group">
+            <label class="filter-label">Results:</label>
+
+            <select
+              class="form-input results-select"
+              [(ngModel)]="loginResultsLimit"
+              (ngModelChange)="loginResultsLimitChanged()"
+            >
+              <option value="10">10</option>
+              <option value="25">25</option>
+              <option value="50">50</option>
+              <option value="100">100</option>
+            </select>
+          </div>
         </div>
       </div>
     </div>
   </div>
-</div>
 
-<div class="table-scroll login-table-scroll">
-  <table class="logins-table" *ngIf="loginPage && loginPage.logins.length > 0">
-    <thead>
-      <tr>
-        <th *ngIf="!userId">User</th>
-        <th>Device</th>
-        <th>Timestamp</th>
-      </tr>
-    </thead>
-
-    <tbody>
-      <tr *ngFor="let login of loginPage.logins">
-        <td *ngIf="!userId">
-          {{ login.user.displayName }}
-        </td>
-
-        <td>
-          <span class="login-device" *ngIf="login.device">
-            <a class="pointer" [routerLink]="['../devices', login.device.id]">
-              <i class="fa" [ngClass]="iconClass(login.device)"></i>
-              {{ login.device.uid }}
-            </a>
-          </span>
-
-          <span class="login-device unknown" *ngIf="!login.device">
-            <i class="fa fa-question-circle"></i>
-            Unknown Device
-          </span>
-        </td>
-
-        <td>
-          {{ fromNow(login.timestamp) }} ({{ formatDate(login.timestamp) }})
-        </td>
-      </tr>
-    </tbody>
-  </table>
-
-  <div class="pagination-bar" *ngIf="loginPage && loginPage.logins.length > 0">
-    <button
-      mat-button
-      type="button"
-      (click)="pageLogin(loginPage?.prev)"
-      [disabled]="!hasPrev"
-    >
-      ← Previous
-    </button>
-
-    <button
-      mat-button
-      type="button"
-      (click)="pageLogin(loginPage?.next)"
-      [disabled]="!hasNext"
-    >
-      Next →
-    </button>
-  </div>
+  <div class="login-table-frame">
+    <div class="table-scroll login-table-scroll">
+      <table class="logins-table">
+        <thead>
+          <tr>
+            <th *ngIf="!userId">User</th>
+            <th>Device</th>
+            <th>Timestamp</th>
+          </tr>
+        </thead>
+
+        <tbody *ngIf="loginPage && loginPage.logins.length > 0">
+          <tr *ngFor="let login of loginPage.logins">
+            <td *ngIf="!userId">
+              <a
+                class="pointer"
+                *ngIf="login.user?.id; else unknownUser"
+                [routerLink]="['/admin/users', login.user.id]"
+              >
+                {{ login.user?.displayName || 'Unknown User' }}
+              </a>
+
+              <ng-template #unknownUser>
+                {{ login.user?.displayName || 'Unknown User' }}
+              </ng-template>
+            </td>
+
+            <td>
+              <span class="login-device" *ngIf="login.device">
+                <a
+                  class="pointer"
+                  *ngIf="login.device?.id; else unknownDevice"
+                  [routerLink]="['/admin/devices', login.device.id]"
+                >
+                  <i class="fa" [ngClass]="iconClass(login.device)"></i>
+                  {{ login.device?.uid || 'Unknown Device' }}
+                </a>
+
+                <ng-template #unknownDevice>
+                  <i class="fa" [ngClass]="iconClass(login.device)"></i>
+                  {{ login.device?.uid || 'Unknown Device' }}
+                </ng-template>
+              </span>
+
+              <span class="login-device unknown" *ngIf="!login.device">
+                <i class="fa fa-question-circle"></i>
+                Unknown Device
+              </span>
+            </td>
+
+            <td>
+              {{ fromNow(login.timestamp) }} ({{ formatDate(login.timestamp) }})
+            </td>
+          </tr>
+        </tbody>
+
+        <tbody *ngIf="!loginPage || loginPage.logins.length === 0">
+          <tr class="empty-table-row">
+            <td [attr.colspan]="userId ? 2 : 3">
+              <div class="empty-state">
+                <div class="empty-state-content">
+                  <i class="fa fa-sign-in empty-state-icon"></i>
+                  <div class="empty-state-text">No login history found</div>
+                </div>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
 
-  <div class="empty-state" *ngIf="!loginPage || loginPage.logins.length === 0">
-    <div class="empty-state-content">
-      <i class="fa fa-sign-in empty-state-icon"></i>
-      <div class="empty-state-text">No login history found</div>
+    <div class="pagination-bar">
+      <button
+        mat-button
+        type="button"
+        (click)="pageLogin(loginPage?.prev)"
+        [disabled]="!loginPage || !hasPrev"
+      >
+        ← Previous
+      </button>
+
+      <button
+        mat-button
+        type="button"
+        (click)="pageLogin(loginPage?.next)"
+        [disabled]="!loginPage || !hasNext"
+      >
+        Next →
+      </button>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/web-app/admin/src/app/logins/logins.component.scss b/web-app/admin/src/app/logins/logins.component.scss
index ef6eec995..1ade040c9 100644
--- a/web-app/admin/src/app/logins/logins.component.scss
+++ b/web-app/admin/src/app/logins/logins.component.scss
@@ -1,6 +1,18 @@
+$login-table-frame-height: 420px;
+$login-pagination-height: 40px;
+
 :host {
   display: block;
-  height: 100%;
+  width: 100%;
+  min-height: 0;
+}
+
+.logins-shell {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  min-height: 0;
+  overflow: visible;
 }
 
 .section-table-title {
@@ -12,6 +24,7 @@
 }
 
 .filter-header {
+  flex: 0 0 auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -58,6 +71,7 @@
 .filters-drawer-shell {
   position: relative;
   z-index: 5;
+  flex: 0 0 auto;
 }
 
 .integrated-navbar {
@@ -226,48 +240,35 @@
   }
 }
 
-@media (max-width: 900px) {
-  .filters-drawer-shell.open .integrated-navbar {
-    max-height: 60vh;
-    overflow: auto;
-  }
-
-  .integrated-navbar .filter-section {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .integrated-navbar .form-group,
-  .actions-group,
-  .integrated-navbar .user-input,
-  .integrated-navbar .date-input,
-  .integrated-navbar .results-select {
-    width: 100%;
-    min-width: 0;
-  }
-
-  .integrated-navbar .suggestions {
-    width: 100%;
-  }
+.login-table-frame {
+  flex: 0 0 $login-table-frame-height;
+  height: $login-table-frame-height;
+  min-height: $login-table-frame-height;
+  max-height: $login-table-frame-height;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-top: 1px solid #dfe5eb;
+  background: #fff;
 }
 
 .table-scroll.login-table-scroll {
-  flex: 1 1 auto;
-  min-height: 0;
-  height: 93%;
-  max-height: none;
+  flex: 0 0 calc(#{$login-table-frame-height} - #{$login-pagination-height});
+  height: calc(#{$login-table-frame-height} - #{$login-pagination-height});
+  min-height: calc(#{$login-table-frame-height} - #{$login-pagination-height});
+  max-height: calc(#{$login-table-frame-height} - #{$login-pagination-height});
   overflow-y: auto;
   overflow-x: hidden;
   -webkit-overflow-scrolling: touch;
   overscroll-behavior: contain;
   border-bottom: 1px solid #dfe5eb;
-  display: flex;
-  flex-direction: column;
+  display: block;
+  background: #fff;
 }
 
 .logins-table {
   width: 100%;
-  height: 100%;
+  min-width: 100%;
   border-collapse: collapse;
   table-layout: fixed;
   font-size: 1rem;
@@ -299,7 +300,9 @@
 }
 
 .logins-table tbody td {
-  height: var(--row-height, 42px);
+  height: 42px;
+  max-height: 42px;
+  line-height: 1.25;
 }
 
 .logins-table tbody tr:first-of-type td {
@@ -318,28 +321,35 @@
   color: #9ca3af;
 }
 
-.pagination-bar {
-  position: sticky;
-  bottom: 0;
-  z-index: 3;
-  height: 40px;
-  background: #f5f5f5;
-  border-top: 1px solid #d9d9d9;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 0.7rem;
-  margin-top: auto;
-  font-size: 12px;
-  flex: 0 0 auto;
+.empty-table-row {
+  height: calc(
+    #{$login-table-frame-height} - #{$login-pagination-height} - 40px
+  );
+}
+
+.empty-table-row td {
+  height: calc(
+    #{$login-table-frame-height} - #{$login-pagination-height} - 40px
+  ) !important;
+  padding: 0 !important;
+  border-bottom: none !important;
+  white-space: normal !important;
+  overflow: visible !important;
+  text-overflow: initial !important;
 }
 
 .empty-state {
+  height: calc(
+    #{$login-table-frame-height} - #{$login-pagination-height} - 40px
+  );
+  min-height: calc(
+    #{$login-table-frame-height} - #{$login-pagination-height} - 40px
+  );
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 2.5rem 2rem;
-  min-height: 180px;
+  box-sizing: border-box;
 
   .empty-state-content {
     text-align: center;
@@ -358,3 +368,51 @@
     }
   }
 }
+
+.pagination-bar {
+  flex: 0 0 $login-pagination-height;
+  height: $login-pagination-height;
+  min-height: $login-pagination-height;
+  max-height: $login-pagination-height;
+  background: #f5f5f5;
+  border-top: 1px solid #d9d9d9;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 0.7rem;
+  font-size: 12px;
+
+  button {
+    min-width: auto;
+    padding: 0;
+    font-size: 12px;
+    letter-spacing: 0.04em;
+    text-transform: none !important;
+    color: #8b8b8b;
+  }
+}
+
+@media (max-width: 900px) {
+  .filters-drawer-shell.open .integrated-navbar {
+    max-height: 60vh;
+    overflow: auto;
+  }
+
+  .integrated-navbar .filter-section {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .integrated-navbar .form-group,
+  .actions-group,
+  .integrated-navbar .user-input,
+  .integrated-navbar .date-input,
+  .integrated-navbar .results-select {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .integrated-navbar .suggestions {
+    width: 100%;
+  }
+}

From ee58eaad5ab30ace7a53e7565a08c50cfa0f9071 Mon Sep 17 00:00:00 2001
From: Ryan <ryanslatten@vt.edu>
Date: Thu, 30 Apr 2026 14:38:33 -0400
Subject: [PATCH 09/19] fix main page issues

Co-authored-by: Copilot <copilot@github.com>
---
 .../create-user/create-user.component.scss    |  5 +++
 .../app/contact/contact-dialog.component.html | 20 ++++------
 .../datetime-picker.component.html            | 39 ++++++-------------
 .../datetime-picker.component.scss            | 11 ++----
 .../datetime-picker.component.ts              |  8 ++++
 .../app/export/export-dialog.component.scss   |  2 -
 .../local/signup.component.scss               |  2 +-
 .../src/app/map/controls/search.component.ts  |  3 +-
 .../map/layers/layer-content.component.scss   | 10 +++--
 .../observation-list-item.component.scss      |  1 +
 10 files changed, 45 insertions(+), 56 deletions(-)

diff --git a/web-app/admin/src/app/admin/admin-users/create-user/create-user.component.scss b/web-app/admin/src/app/admin/admin-users/create-user/create-user.component.scss
index 5a5604a21..b68693e90 100644
--- a/web-app/admin/src/app/admin/admin-users/create-user/create-user.component.scss
+++ b/web-app/admin/src/app/admin/admin-users/create-user/create-user.component.scss
@@ -128,6 +128,11 @@ mat-form-field {
   font-weight: 700;
 }
 
+::ng-deep .tooltip-wide {
+  white-space: pre-line;
+  max-width: 300px;
+}
+
 .filename-wrapper {
   display: flex;
   align-items: center;
diff --git a/web-app/src/app/contact/contact-dialog.component.html b/web-app/src/app/contact/contact-dialog.component.html
index ab019eff7..55eb51a8f 100644
--- a/web-app/src/app/contact/contact-dialog.component.html
+++ b/web-app/src/app/contact/contact-dialog.component.html
@@ -1,13 +1,7 @@
-<section class="mat-typography">
-    <div class="mat-title">{{statusTitle}}</div>
-</section>
-<section class="mat-typography">
-    <mat-dialog-content>
-        <div [innerHTML]="statusMessage" class="mat-body"></div>
-    </mat-dialog-content>
-</section>
-<section class="mat-typography">
-    <mat-dialog-actions>
-        <button mat-button (click)="close()" cdkFocusInitial>OK</button>
-    </mat-dialog-actions>
-</section>
\ No newline at end of file
+<h2 mat-dialog-title>{{statusTitle}}</h2>
+<mat-dialog-content>
+    <div [innerHTML]="statusMessage" class="mat-body"></div>
+</mat-dialog-content>
+<mat-dialog-actions align="end">
+    <button mat-button color="primary" (click)="close()" cdkFocusInitial>OK</button>
+</mat-dialog-actions>
\ No newline at end of file
diff --git a/web-app/src/app/datetime-picker/datetime-picker.component.html b/web-app/src/app/datetime-picker/datetime-picker.component.html
index 61ccb705b..e26f9a993 100644
--- a/web-app/src/app/datetime-picker/datetime-picker.component.html
+++ b/web-app/src/app/datetime-picker/datetime-picker.component.html
@@ -2,25 +2,13 @@
   <div class="date">
     <mat-form-field appearance="fill" floatLabel="always">
       <mat-label>{{ title }} Date</mat-label>
-      <input
-        matInput
-        [matDatepicker]="datePicker"
-        [(ngModel)]="date"
-        [required]="required"
-        (ngModelChange)="onDate()"
-        #dateModel="ngModel"
-        autocomplete="off"
-      />
-      <mat-datepicker-toggle
-        matSuffix
-        [for]="datePicker"
-      ></mat-datepicker-toggle>
+      <input matInput [matDatepicker]="datePicker" [(ngModel)]="date" [required]="required" (ngModelChange)="onDate()"
+        #dateModel="ngModel" autocomplete="off" />
+      <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
       <mat-datepicker #datePicker></mat-datepicker>
-      <mat-error
-        *ngIf="
+      <mat-error *ngIf="
           dateModel.errors?.required && !dateModel.errors?.matDatepickerParse
-        "
-      >
+        ">
         Date is required
       </mat-error>
       <mat-error *ngIf="dateModel.errors?.matDatepickerParse">
@@ -34,17 +22,12 @@
       <mat-label>
         {{ title }} Time {{ timezone === 'gmt' ? '(GMT)' : '(Local)' }}
       </mat-label>
-      <input
-        matInput
-        type="time"
-        step="1"
-        [(ngModel)]="time"
-        [required]="required"
-        (ngModelChange)="onTime()"
-        #timeModel="ngModel"
-        autocomplete="off"
-      />
+      <input matInput #timeInput type="time" step="1" [(ngModel)]="time" [required]="required"
+        (ngModelChange)="onTime()" #timeModel="ngModel" autocomplete="off" />
+      <button mat-icon-button matSuffix type="button" (click)="showTimePicker(timeInput)">
+        <mat-icon>schedule</mat-icon>
+      </button>
       <mat-error *ngIf="timeInvalid">Invalid time</mat-error>
     </mat-form-field>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/web-app/src/app/datetime-picker/datetime-picker.component.scss b/web-app/src/app/datetime-picker/datetime-picker.component.scss
index 4497b1643..29491bf05 100644
--- a/web-app/src/app/datetime-picker/datetime-picker.component.scss
+++ b/web-app/src/app/datetime-picker/datetime-picker.component.scss
@@ -59,13 +59,12 @@
 :host ::ng-deep .time .mat-mdc-form-field-flex {
   min-height: 56px;
   height: 56px;
-  align-items: center;
 }
 
 :host ::ng-deep .date .mat-mdc-form-field-infix,
 :host ::ng-deep .time .mat-mdc-form-field-infix {
   min-height: 56px;
-  padding-top: 16px;
+  padding-top: 24px;
   padding-bottom: 8px;
   box-sizing: border-box;
 }
@@ -98,10 +97,6 @@
 }
 
 :host ::ng-deep .date .mat-form-field-appearance-fill .mat-form-field-underline,
-:host
-  ::ng-deep
-  .time
-  .mat-form-field-appearance-fill
-  .mat-form-field-underline {
+:host ::ng-deep .time .mat-form-field-appearance-fill .mat-form-field-underline {
   position: static !important;
-}
+}
\ No newline at end of file
diff --git a/web-app/src/app/datetime-picker/datetime-picker.component.ts b/web-app/src/app/datetime-picker/datetime-picker.component.ts
index 044c39679..a227e2e9e 100644
--- a/web-app/src/app/datetime-picker/datetime-picker.component.ts
+++ b/web-app/src/app/datetime-picker/datetime-picker.component.ts
@@ -89,6 +89,14 @@ export class DatetimePickerComponent implements OnChanges {
     this.dateTimeChange.emit(date.toDate());
   }
 
+  showTimePicker(input: HTMLInputElement): void {
+    try {
+      input.showPicker();
+    } catch {
+      input.focus();
+    }
+  }
+
   private isValidTime(value: string): boolean {
     return !!this.parseTime(value);
   }
diff --git a/web-app/src/app/export/export-dialog.component.scss b/web-app/src/app/export/export-dialog.component.scss
index 58ff88a85..172fdc84d 100644
--- a/web-app/src/app/export/export-dialog.component.scss
+++ b/web-app/src/app/export/export-dialog.component.scss
@@ -159,8 +159,6 @@ mat-checkbox {
 :host ::ng-deep .mat-mdc-form-field-infix,
 :host ::ng-deep .mat-form-field-infix {
   min-height: 40px;
-  padding-top: 10px !important;
-  padding-bottom: 10px !important;
 }
 
 :host ::ng-deep .mdc-floating-label,
diff --git a/web-app/src/app/ingress/authentication/local/signup.component.scss b/web-app/src/app/ingress/authentication/local/signup.component.scss
index fd8d0cd65..2ff8d3d8b 100644
--- a/web-app/src/app/ingress/authentication/local/signup.component.scss
+++ b/web-app/src/app/ingress/authentication/local/signup.component.scss
@@ -105,7 +105,7 @@ mat-form-field {
   flex: 1;
 }
 
-.tooltip-wide {
+::ng-deep .tooltip-wide {
   white-space: pre-line;
   max-width: 300px;
 }
diff --git a/web-app/src/app/map/controls/search.component.ts b/web-app/src/app/map/controls/search.component.ts
index a9b0d4906..1f94690ab 100644
--- a/web-app/src/app/map/controls/search.component.ts
+++ b/web-app/src/app/map/controls/search.component.ts
@@ -48,7 +48,7 @@ export class SearchComponent implements AfterViewInit {
     private mapSettingsService: MapSettingsService,
     private searchService: PlacenameSearchService,
     private snackBar: MatSnackBar
-  ) {}
+  ) { }
 
   ngOnInit(): void {
     this.mapSettingsService
@@ -97,6 +97,7 @@ export class SearchComponent implements AfterViewInit {
     $event.preventDefault();
     input.value = '';
     this.searchResults = [];
+    this.searchState = SearchState.OFF;
 
     this.onSearchClear.emit();
   }
diff --git a/web-app/src/app/map/layers/layer-content.component.scss b/web-app/src/app/map/layers/layer-content.component.scss
index a2fd45a44..a7657a5bc 100644
--- a/web-app/src/app/map/layers/layer-content.component.scss
+++ b/web-app/src/app/map/layers/layer-content.component.scss
@@ -1,4 +1,8 @@
-.opacity > mat-label {
+.opacity {
+  padding-right: 24px;
+}
+
+.opacity>mat-label {
   display: block;
 }
 
@@ -28,11 +32,11 @@ mat-form-field {
   margin-left: -8px;
 }
 
-.style-actions > button {
+.style-actions>button {
   padding: 0 8px;
 }
 
-.style-actions > .mat-button > span  {
+.style-actions>.mat-button>span {
   background: yellowgreen;
 }
 
diff --git a/web-app/src/app/observation/observation-list/observation-list-item.component.scss b/web-app/src/app/observation/observation-list/observation-list-item.component.scss
index 00dd08260..fb5492631 100644
--- a/web-app/src/app/observation/observation-list/observation-list-item.component.scss
+++ b/web-app/src/app/observation/observation-list/observation-list-item.component.scss
@@ -125,6 +125,7 @@
 
 .item-important--description {
   margin-top: 8px;
+  padding-right: 12px;
   color: rgba(0, 0, 0, 0.87);
 }
 

From ad67e032a8c6ecb620362f014954c8cb3fb04abd Mon Sep 17 00:00:00 2001
From: Ryan Carpenter <ryan.carpenter@omnifederal.com>
Date: Thu, 30 Apr 2026 11:41:21 -0600
Subject: [PATCH 10/19] fix links

---
 web-app/admin/src/app/logins/logins.component.html | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/web-app/admin/src/app/logins/logins.component.html b/web-app/admin/src/app/logins/logins.component.html
index 7b16f4127..67d3abbf4 100644
--- a/web-app/admin/src/app/logins/logins.component.html
+++ b/web-app/admin/src/app/logins/logins.component.html
@@ -156,7 +156,10 @@
               <a
                 class="pointer"
                 *ngIf="login.user?.id; else unknownUser"
-                [routerLink]="['/admin/users', login.user.id]"
+                [routerLink]="[
+                  userId || deviceId ? '../../users' : '../users',
+                  login.user.id
+                ]"
               >
                 {{ login.user?.displayName || 'Unknown User' }}
               </a>
@@ -171,7 +174,10 @@
                 <a
                   class="pointer"
                   *ngIf="login.device?.id; else unknownDevice"
-                  [routerLink]="['/admin/devices', login.device.id]"
+                  [routerLink]="[
+                    userId || deviceId ? '../../devices' : '../devices',
+                    login.device.id
+                  ]"
                 >
                   <i class="fa" [ngClass]="iconClass(login.device)"></i>
                   {{ login.device?.uid || 'Unknown Device' }}
@@ -230,4 +236,4 @@
       </button>
     </div>
   </div>
-</div>
+</div>
\ No newline at end of file

From 6dad3608e11751a3d89cddfcb8eea28197489ce1 Mon Sep 17 00:00:00 2001
From: Ryan Carpenter <ryan.carpenter@omnifederal.com>
Date: Thu, 30 Apr 2026 11:43:02 -0600
Subject: [PATCH 11/19] fix button sizes

---
 .../app/admin/admin-users/bulk-user/bulk-user.component.scss    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web-app/admin/src/app/admin/admin-users/bulk-user/bulk-user.component.scss b/web-app/admin/src/app/admin/admin-users/bulk-user/bulk-user.component.scss
index 114e3ca21..97fad52d0 100644
--- a/web-app/admin/src/app/admin/admin-users/bulk-user/bulk-user.component.scss
+++ b/web-app/admin/src/app/admin/admin-users/bulk-user/bulk-user.component.scss
@@ -129,7 +129,7 @@
   }
 
   .action-button {
-    font-size: 0.875rem;
+    font-size: 1.5rem;
     padding: 0.5rem 1.25rem;
     border-radius: 8px;
     border: 1px solid #d1d5db;

From ee5f22a142e8f7acd381d229cb7504d037945215 Mon Sep 17 00:00:00 2001
From: Ryan Carpenter <ryan.carpenter@omnifederal.com>
Date: Thu, 30 Apr 2026 14:03:39 -0600
Subject: [PATCH 12/19] admin fixes

---
 .../event-details.component.scss              |   1 +
 .../admin-feed/admin-feed.component.html      | 165 +++++++++++++----
 .../admin-feed/admin-feed.component.scss      | 175 ++++++++++++++++--
 .../admin-feed/admin-feed.component.ts        | 124 +++++++++++--
 .../admin-feeds/admin-feeds.component.html    | 155 ++++++++++------
 .../admin-feeds/admin-feeds.component.scss    |  53 ++++++
 .../admin-service.component.scss              |  13 ++
 7 files changed, 564 insertions(+), 122 deletions(-)

diff --git a/web-app/admin/src/app/admin/admin-event/event-details/event-details.component.scss b/web-app/admin/src/app/admin/admin-event/event-details/event-details.component.scss
index 2c1088312..0c4261646 100644
--- a/web-app/admin/src/app/admin/admin-event/event-details/event-details.component.scss
+++ b/web-app/admin/src/app/admin/admin-event/event-details/event-details.component.scss
@@ -963,6 +963,7 @@ mat-spinner {
   flex: 1 1 auto;
   min-width: 0;
   color: inherit;
+  gap: 20px;
 }
 
 .row-main-link:hover {
diff --git a/web-app/admin/src/app/admin/admin-feeds/admin-feed/admin-feed.component.html b/web-app/admin/src/app/admin/admin-feeds/admin-feed/admin-feed.component.html
index cafb977b3..7a7d1ea16 100644
--- a/web-app/admin/src/app/admin/admin-feeds/admin-feed/admin-feed.component.html
+++ b/web-app/admin/src/app/admin/admin-feeds/admin-feed/admin-feed.component.html
@@ -1,6 +1,6 @@
 <admin-breadcrumb [breadcrumbs]="breadcrumbs"></admin-breadcrumb>
-<div class="page" *ngIf="feedLoaded | async; else loading">
 
+<div class="page" *ngIf="feedLoaded | async; else loading">
   <div class="heading">
     <div class="heading__content">
       <mat-icon class="heading__icon">rss_feed</mat-icon>
@@ -11,11 +11,24 @@
     </div>
 
     <div class="heading__actions">
-      <button mat-button color="primary" class="heading__action" [routerLink]="['../../feeds', feed?.id, 'edit']">
-        <mat-icon>edit</mat-icon>Edit
+      <button
+        mat-button
+        color="primary"
+        class="heading__action"
+        [routerLink]="['../../feeds', feed?.id, 'edit']"
+      >
+        <mat-icon>edit</mat-icon>
+        Edit
       </button>
-      <button mat-button color="warn" class="heading__action" (click)="deleteFeed()">
-        <mat-icon>delete</mat-icon>Delete
+
+      <button
+        mat-button
+        color="warn"
+        class="heading__action"
+        (click)="deleteFeed()"
+      >
+        <mat-icon>delete</mat-icon>
+        Delete
       </button>
     </div>
   </div>
@@ -32,17 +45,32 @@
           <mat-card-content>
             <mat-form-field appearance="fill">
               <mat-label>Primary Property</mat-label>
-              <input matInput placeholder="Primary Property" value="{{ feed?.itemPrimaryProperty }}" readonly />
+              <input
+                matInput
+                placeholder="Primary Property"
+                value="{{ feed?.itemPrimaryProperty }}"
+                readonly
+              />
             </mat-form-field>
 
             <mat-form-field appearance="fill">
               <mat-label>Secondary Property</mat-label>
-              <input matInput placeholder="Secondary Property" value="{{ feed?.itemSecondaryProperty }}" readonly />
+              <input
+                matInput
+                placeholder="Secondary Property"
+                value="{{ feed?.itemSecondaryProperty }}"
+                readonly
+              />
             </mat-form-field>
 
             <mat-form-field appearance="fill">
               <mat-label>Update Frequency</mat-label>
-              <input matInput placeholder="Update Frequency" value="{{ feed?.updateFrequencySeconds }}" readonly />
+              <input
+                matInput
+                placeholder="Update Frequency"
+                value="{{ feed?.updateFrequencySeconds }}"
+                readonly
+              />
             </mat-form-field>
           </mat-card-content>
         </mat-card>
@@ -58,12 +86,22 @@
           <mat-card-content>
             <mat-form-field appearance="fill">
               <mat-label>Service</mat-label>
-              <input matInput placeholder="Service" value="{{ service.title }}" readonly />
+              <input
+                matInput
+                placeholder="Service"
+                value="{{ service.title }}"
+                readonly
+              />
             </mat-form-field>
 
             <mat-form-field appearance="fill">
               <mat-label>Summary</mat-label>
-              <input matInput placeholder="Summary" value="{{ service?.summary }}" readonly />
+              <input
+                matInput
+                placeholder="Summary"
+                value="{{ service?.summary }}"
+                readonly
+              />
             </mat-form-field>
           </mat-card-content>
         </mat-card>
@@ -75,20 +113,44 @@
             <mat-icon mat-card-avatar>event</mat-icon>
             <mat-card-title class="primary-color">Events</mat-card-title>
 
-            <button [@rotate]="addEvent" mat-mini-fab class="events__add" (click)="toggleNewEvent()">
+            <button
+              [@rotate]="addEvent"
+              mat-mini-fab
+              class="events__add"
+              (click)="toggleNewEvent()"
+            >
               <mat-icon>add</mat-icon>
             </button>
           </mat-card-header>
 
           <mat-card-content class="content__events">
-            <div [@slide]="addEvent">
+            <div
+              class="events-add-overlay"
+              [class.events-add-overlay--open]="addEvent"
+            >
               <div class="events__new">
-                <mat-form-field>
-                  <input type="text" #eventSelect placeholder="Add Feed To Event" matInput [matAutocomplete]="auto"
-                    [formControl]="searchControl" />
-                  <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete"
-                    (optionSelected)="addFeedToEvent($event)">
-                    <mat-option *ngFor="let event of filteredChoices | async" [value]="event.name" [id]="event.id">
+                <mat-form-field appearance="fill">
+                  <input
+                    type="text"
+                    #eventSelect
+                    #eventAutocompleteTrigger="matAutocompleteTrigger"
+                    placeholder="Add Feed To Event"
+                    matInput
+                    [matAutocomplete]="auto"
+                    [formControl]="searchControl"
+                  />
+
+                  <mat-autocomplete
+                    autoActiveFirstOption
+                    #auto="matAutocomplete"
+                    (opened)="tagEventsAutocompleteOverlayPane()"
+                    (optionSelected)="addFeedToEvent($event)"
+                  >
+                    <mat-option
+                      *ngFor="let event of filteredChoices | async"
+                      [value]="event.name"
+                      [id]="event.id"
+                    >
                       {{ event.name }}
                     </mat-option>
                   </mat-autocomplete>
@@ -96,31 +158,60 @@
               </div>
             </div>
 
-            <mat-nav-list>
-              <ng-container *ngFor="let event of feedEvents">
-                <mat-list-item [routerLink]="['../events', event.id]">
-                  <mat-icon class="feed__icon" matListItemIcon>event</mat-icon>
-                  <div matListItemTitle>{{ event.name }}</div>
-                  <div matListItemLine>{{ event.description }}</div>
-                  <button mat-icon-button matListItemMeta (click)="removeFeedFromEvent($event, event)"
-                    *ngIf="hasFeedEditPermission">
-                    <mat-icon color="warn">remove_circle_outline</mat-icon>
-                  </button>
-                </mat-list-item>
-
-                <mat-divider [inset]="true"></mat-divider>
-              </ng-container>
-
-              <mat-paginator [length]="totalFeedEvents" [pageSize]="eventsPerPage" [pageIndex]="eventsPage"
-                (page)="onEventsPageChange($event)">
+            <div class="events-list-frame">
+              <div class="events-list-scroll">
+                <mat-nav-list>
+                  <ng-container *ngFor="let event of feedEvents">
+                    <mat-list-item [routerLink]="['../events', event.id]">
+                      <mat-icon class="feed__icon" matListItemIcon>
+                        event
+                      </mat-icon>
+
+                      <div matListItemTitle>{{ event.name }}</div>
+                      <div matListItemLine>{{ event.description }}</div>
+
+                      <button
+                        mat-icon-button
+                        matListItemMeta
+                        (click)="removeFeedFromEvent($event, event)"
+                        *ngIf="hasFeedEditPermission"
+                      >
+                        <mat-icon color="warn">remove_circle_outline</mat-icon>
+                      </button>
+                    </mat-list-item>
+
+                    <mat-divider></mat-divider>
+                  </ng-container>
+                </mat-nav-list>
+
+                <div
+                  class="empty-events-state"
+                  *ngIf="
+                    !loadingEvents && (!feedEvents || feedEvents.length === 0)
+                  "
+                >
+                  <div class="empty-events-state__content">
+                    <mat-icon>event</mat-icon>
+                    <div>No subscribed events found</div>
+                  </div>
+                </div>
+              </div>
+
+              <mat-paginator
+                [length]="totalFeedEvents"
+                [pageSize]="eventsPerPage"
+                [pageIndex]="eventsPage"
+                (page)="onEventsPageChange($event)"
+              >
               </mat-paginator>
-            </mat-nav-list>
+            </div>
           </mat-card-content>
         </mat-card>
       </div>
     </div>
   </div>
 </div>
+
 <ng-template #loading>
   <div>Loading</div>
-</ng-template>
\ No newline at end of file
+</ng-template>
diff --git a/web-app/admin/src/app/admin/admin-feeds/admin-feed/admin-feed.component.scss b/web-app/admin/src/app/admin/admin-feeds/admin-feed/admin-feed.component.scss
index 74218c7d9..a7edcef67 100644
--- a/web-app/admin/src/app/admin/admin-feeds/admin-feed/admin-feed.component.scss
+++ b/web-app/admin/src/app/admin/admin-feeds/admin-feed/admin-feed.component.scss
@@ -1,5 +1,5 @@
 @use '@angular/material' as mat;
-@import "variables.scss";
+@import 'variables.scss';
 
 $font-xl: 32px;
 $font-lg: 18px;
@@ -7,6 +7,13 @@ $font-md: 16px;
 $font-sm: 14px;
 $font-xs: 12px;
 
+$event-row-height: 72px;
+$event-page-size: 5;
+$event-paginator-height: 56px;
+$event-list-height: calc($event-row-height * $event-page-size);
+$event-frame-height: calc($event-list-height + $event-paginator-height);
+$event-add-overlay-height: 72px;
+
 .page {
   position: relative;
   top: 0;
@@ -14,7 +21,7 @@ $font-xs: 12px;
   right: 0;
   left: 0;
   overflow-y: auto;
-  background-color: #F0F0F0;
+  background-color: #f0f0f0;
 }
 
 .mat-breadcrumb {
@@ -66,17 +73,16 @@ $font-xs: 12px;
   }
 }
 
-
 .heading__info {
   flex: 1;
 }
 
 .heading__title {
-  color: rgba(0, 0, 0, .87)
+  color: rgba(0, 0, 0, 0.87);
 }
 
 .heading__summary {
-  color: rgba(0, 0, 0, .6)
+  color: rgba(0, 0, 0, 0.6);
 }
 
 .content {
@@ -129,18 +135,105 @@ mat-card-content {
   position: absolute;
   right: 16px;
   bottom: -18px;
-  z-index: 1;
+  z-index: 5;
+}
+
+.events__new {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: $event-add-overlay-height;
+  min-height: $event-add-overlay-height;
+  max-height: $event-add-overlay-height;
+  padding: 12px 16px;
+  box-sizing: border-box;
+  background: #fff;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
 }
 
-.events__new>.mat-form-field> ::ng-deep .mat-form-field-wrapper {
+.events__new > .mat-form-field > ::ng-deep .mat-form-field-wrapper {
   margin-bottom: -1.25em;
 }
 
-.events__new {
+.events-add-overlay {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  z-index: 4;
+  height: $event-add-overlay-height;
+  min-height: $event-add-overlay-height;
+  max-height: $event-add-overlay-height;
+  transform: translateY(-100%);
+  opacity: 0;
+  pointer-events: none;
+  transition: transform 220ms ease, opacity 180ms ease;
+}
+
+.events-add-overlay--open {
+  transform: translateY(0);
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.content__events {
+  position: relative;
+  padding: 0;
+  height: $event-frame-height;
+  min-height: $event-frame-height;
+  max-height: $event-frame-height;
+  overflow: hidden;
+}
+
+.events-list-frame {
+  height: $event-frame-height;
+  min-height: $event-frame-height;
+  max-height: $event-frame-height;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: #fff;
+}
+
+.events-list-scroll {
+  position: relative;
+  flex: 0 0 $event-list-height;
+  height: $event-list-height;
+  min-height: $event-list-height;
+  max-height: $event-list-height;
+  overflow-y: auto;
+  overflow-x: hidden;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+.empty-events-state {
+  position: absolute;
+  inset: 0;
   display: flex;
-  flex-direction: row;
   align-items: center;
-  padding: 16px;
+  justify-content: center;
+  padding: 24px;
+  pointer-events: none;
+  color: rgba(0, 0, 0, 0.55);
+  background: #fff;
+}
+
+.empty-events-state__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  font-size: $font-md;
+  font-weight: 600;
+  text-align: center;
+
+  mat-icon {
+    width: 42px;
+    height: 42px;
+    font-size: 42px;
+    opacity: 0.65;
+  }
 }
 
 mat-form-field {
@@ -152,12 +245,13 @@ mat-form-field {
 }
 
 :host ::ng-deep .content__events mat-nav-list {
+  min-height: $event-list-height;
   padding-top: 0;
 }
 
 :host ::ng-deep .content__events .mat-mdc-list-item {
-  min-height: 72px;
-  height: auto;
+  min-height: $event-row-height;
+  height: $event-row-height;
   padding: 0 12px;
 }
 
@@ -187,14 +281,16 @@ mat-form-field {
 :host ::ng-deep .content__events .mat-mdc-list-item-icon {
   align-self: center;
   margin-top: 0;
+  margin-right: 16px;
 }
 
 :host ::ng-deep .content__events .mat-mdc-list-item-meta {
   width: 44px;
   height: 44px;
   padding: 10px;
-  align-self: center;
+  align-self: flex-start;
   margin-left: 12px;
+  margin-top: 10px;
 
   mat-icon {
     width: 24px;
@@ -203,13 +299,60 @@ mat-form-field {
   }
 }
 
-:host ::ng-deep .content__events .mdc-list-item__start,
 :host ::ng-deep .content__events .mdc-list-item__end {
-  margin-top: 0;
+  margin-top: 0 !important;
+}
+
+:host ::ng-deep .content__events .mdc-list-item__start{
+  margin-top: 25px !important;
+}
+
+:host ::ng-deep .content__events mat-paginator {
+  flex: 0 0 $event-paginator-height;
+  height: $event-paginator-height;
+  min-height: $event-paginator-height;
+  max-height: $event-paginator-height;
+  border-top: 0;
+}
+
+:host ::ng-deep mat-paginator {
+  min-height: 56px;
+  font-size: $font-sm;
 }
 
 .feed__icon {
   width: 20px;
   height: 20px;
   font-size: 20px;
-}
\ No newline at end of file
+}
+
+::ng-deep .cdk-overlay-pane.events-add-autocomplete-overlay-pane {
+  transform: translateY(72px) !important;
+}
+
+:host ::ng-deep .content__events .mat-mdc-list-item-meta.mat-mdc-icon-button,
+:host ::ng-deep .content__events .mat-mdc-icon-button {
+  background: transparent !important;
+  --mdc-icon-button-state-layer-size: 0px;
+  --mat-icon-button-state-layer-color: transparent;
+  --mat-icon-button-ripple-color: transparent;
+  --mdc-icon-button-state-layer-color: transparent;
+  --mdc-icon-button-ripple-color: transparent;
+}
+
+:host
+  ::ng-deep
+  .content__events
+  .mat-mdc-icon-button
+  .mat-mdc-button-persistent-ripple,
+:host ::ng-deep .content__events .mat-mdc-icon-button .mat-ripple,
+:host ::ng-deep .content__events .mat-mdc-icon-button .mdc-icon-button__ripple {
+  display: none !important;
+}
+
+:host ::ng-deep .content__events .mat-mdc-icon-button:hover,
+:host ::ng-deep .content__events .mat-mdc-icon-button:focus,
+:host ::ng-deep .content__events .mat-mdc-icon-button:active {
+  background: transparent !important;
+  box-shadow: none !important;
+}
diff --git a/web-app/admin/src/app/admin/admin-feeds/admin-feed/admin-feed.component.ts b/web-app/admin/src/app/admin/admin-feeds/admin-feed/admin-feed.component.ts
index d8cadf604..6c2b2f321 100644
--- a/web-app/admin/src/app/admin/admin-feeds/admin-feed/admin-feed.component.ts
+++ b/web-app/admin/src/app/admin/admin-feeds/admin-feed/admin-feed.component.ts
@@ -26,6 +26,7 @@ import { AdminFeedDeleteComponent } from './admin-feed-delete/admin-feed-delete.
 import { AdminEventsService } from '../../services/admin-events.service';
 import { AdminUserService } from '../../services/admin-user.service';
 import { EventService } from '../../../../app/services/event.service';
+import { MatAutocompleteTrigger } from '@angular/material/autocomplete';
 
 @Component({
   selector: 'app-admin-feed',
@@ -47,6 +48,10 @@ import { EventService } from '../../../../app/services/event.service';
   ]
 })
 export class AdminFeedComponent implements OnInit {
+  @ViewChild('eventSelect', { static: false }) eventSelect!: ElementRef;
+  @ViewChild('eventAutocompleteTrigger', { static: false })
+  eventAutocompleteTrigger!: MatAutocompleteTrigger;
+
   breadcrumbs: AdminBreadcrumb[] = [
     {
       title: 'Feeds',
@@ -88,8 +93,7 @@ export class AdminFeedComponent implements OnInit {
   feedTopic!: FeedTopic;
 
   private myself: any | null = null;
-
-  @ViewChild('eventSelect', { static: false }) eventSelect!: ElementRef;
+  private allFeedEvents: any[] = [];
 
   constructor(
     private feedService: FeedService,
@@ -100,7 +104,7 @@ export class AdminFeedComponent implements OnInit {
     private eventsService: AdminEventsService,
     private adminUserService: AdminUserService,
     private eventService: EventService
-  ) { }
+  ) {}
 
   ngOnInit(): void {
     this.feedId = this.route.snapshot.paramMap.get('feedId');
@@ -142,7 +146,7 @@ export class AdminFeedComponent implements OnInit {
           route: ['/feeds']
         },
         {
-          title: this.feed.title,
+          title: this.feed.title
         }
       ];
 
@@ -174,18 +178,28 @@ export class AdminFeedComponent implements OnInit {
   }
 
   loadAllEvents(): void {
+    if (!this.feed?.id) return;
+
     this.loadingEvents = true;
 
     this.eventsService
       .getEvents({
         feedId: this.feed.id,
-        page: this.eventsPage,
-        page_size: this.eventsPerPage
+        page: 0,
+        page_size: 1000
       })
       .subscribe({
         next: (response) => {
-          this.feedEvents = response.items || [];
-          this.totalFeedEvents = response.totalCount || 0;
+          const events = response.items || [];
+
+          this.allFeedEvents = events.filter((event) =>
+            this.eventHasFeed(event, this.feed.id)
+          );
+
+          this.totalFeedEvents = this.allFeedEvents.length;
+          this.clampEventsPage();
+          this.applyEventsPage();
+
           this.loadingEvents = false;
         },
         error: (err) => {
@@ -201,14 +215,19 @@ export class AdminFeedComponent implements OnInit {
         term: searchTerm,
         excludeFeedId: this.feed.id,
         page: 0,
-        page_size: 20
+        page_size: 1000
       })
       .pipe(
         map((response) => {
           let events = response.items || [];
 
+          events = events.filter(
+            (event) => !this.eventHasFeed(event, this.feed.id)
+          );
+
           if (!this.hasUpdateEventPermission) {
             const myId = this.myself?.id;
+
             events = events.filter((event) => {
               const permissions = myId
                 ? event.acl?.[myId]?.permissions || []
@@ -217,7 +236,7 @@ export class AdminFeedComponent implements OnInit {
             });
           }
 
-          return events;
+          return events.slice(0, 20);
         })
       );
   }
@@ -289,7 +308,7 @@ export class AdminFeedComponent implements OnInit {
   onEventsPageChange(event: any): void {
     this.eventsPage = event.pageIndex;
     this.eventsPerPage = event.pageSize;
-    this.loadAllEvents();
+    this.applyEventsPage();
   }
 
   deleteFeed(): void {
@@ -308,4 +327,87 @@ export class AdminFeedComponent implements OnInit {
         }
       });
   }
+
+  private applyEventsPage(): void {
+    const start = this.eventsPage * this.eventsPerPage;
+    const end = start + this.eventsPerPage;
+
+    this.feedEvents = this.allFeedEvents.slice(start, end);
+  }
+
+  private clampEventsPage(): void {
+    const maxPageIndex = this.maxEventsPageIndex();
+
+    if (this.eventsPage > maxPageIndex) {
+      this.eventsPage = maxPageIndex;
+    }
+  }
+
+  private maxEventsPageIndex(): number {
+    if (!this.totalFeedEvents) return 0;
+
+    return Math.ceil(this.totalFeedEvents / this.eventsPerPage) - 1;
+  }
+
+  private eventHasFeed(event: any, feedId: string): boolean {
+    if (!event || !feedId) return false;
+
+    const candidates = [
+      event.feedId,
+      event.feed?.id,
+      event.feed?._id,
+      event.feed,
+      event.feeds,
+      event.feedIds,
+      event.feedIdsForEvent
+    ];
+
+    for (const candidate of candidates) {
+      if (this.candidateHasId(candidate, feedId)) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  private candidateHasId(candidate: any, id: string): boolean {
+    if (!candidate) return false;
+
+    if (typeof candidate === 'string') {
+      return candidate === id;
+    }
+
+    if (Array.isArray(candidate)) {
+      return candidate.some((item) => this.candidateHasId(item, id));
+    }
+
+    if (typeof candidate === 'object') {
+      return (
+        candidate.id === id || candidate._id === id || candidate.feedId === id
+      );
+    }
+
+    return false;
+  }
+
+  tagEventsAutocompleteOverlayPane(): void {
+    window.setTimeout(() => {
+      const autocompleteId = this.eventAutocompleteTrigger?.autocomplete?.id;
+
+      if (!autocompleteId) return;
+
+      const panel = document.getElementById(autocompleteId);
+
+      if (!panel) return;
+
+      const overlayPane = panel.closest(
+        '.cdk-overlay-pane'
+      ) as HTMLElement | null;
+
+      if (!overlayPane) return;
+
+      overlayPane.classList.add('events-add-autocomplete-overlay-pane');
+    });
+  }
 }
diff --git a/web-app/admin/src/app/admin/admin-feeds/admin-feeds.component.html b/web-app/admin/src/app/admin/admin-feeds/admin-feeds.component.html
index 93a541fef..73895fa91 100644
--- a/web-app/admin/src/app/admin/admin-feeds/admin-feeds.component.html
+++ b/web-app/admin/src/app/admin/admin-feeds/admin-feeds.component.html
@@ -1,4 +1,5 @@
 <admin-breadcrumb [breadcrumbs]="breadcrumbs"></admin-breadcrumb>
+
 <div class="page">
   <div class="page-container">
     <div class="content">
@@ -28,6 +29,7 @@
                     </button>
                   </mat-form-field>
                 </div>
+
                 <div class="feed__action--new">
                   <button
                     mat-flat-button
@@ -40,33 +42,51 @@
                 </div>
               </div>
 
-              <mat-nav-list>
-                <ng-container
-                  *ngFor="
-                    let feed of feeds
-                      | slice
-                        : feedPage * itemsPerPage
-                        : (feedPage + 1) * itemsPerPage
-                  "
-                >
-                  <mat-list-item [routerLink]="['../feeds', feed.id]">
-                    <mat-icon class="feed__icon" matListItemIcon
-                      >rss_feed</mat-icon
+              <div class="feed-list-frame">
+                <div class="feed-list-scroll">
+                  <mat-nav-list>
+                    <ng-container
+                      *ngFor="
+                        let feed of feeds
+                          | slice
+                            : feedPage * itemsPerPage
+                            : (feedPage + 1) * itemsPerPage
+                      "
                     >
-                    <div matListItemTitle>{{ feed.title }}</div>
-                    <div matListItemLine>{{ feed.summary }}</div>
-                    <button
-                      mat-icon-button
-                      matListItemMeta
-                      (click)="deleteFeed($event, feed)"
-                      *ngIf="hasFeedDeletePermission"
-                    >
-                      <mat-icon class="action__icon">delete_outline</mat-icon>
-                    </button>
-                  </mat-list-item>
+                      <mat-list-item [routerLink]="['../feeds', feed.id]">
+                        <mat-icon class="feed__icon" matListItemIcon>
+                          rss_feed
+                        </mat-icon>
+
+                        <div matListItemTitle>{{ feed.title }}</div>
+                        <div matListItemLine>{{ feed.summary }}</div>
 
-                  <mat-divider></mat-divider>
-                </ng-container>
+                        <button
+                          mat-icon-button
+                          matListItemMeta
+                          (click)="deleteFeed($event, feed)"
+                          *ngIf="hasFeedDeletePermission"
+                        >
+                          <mat-icon class="action__icon">
+                            delete_outline
+                          </mat-icon>
+                        </button>
+                      </mat-list-item>
+
+                      <mat-divider></mat-divider>
+                    </ng-container>
+                  </mat-nav-list>
+
+                  <div
+                    class="empty-list-state"
+                    *ngIf="!feeds || feeds.length === 0"
+                  >
+                    <div class="empty-list-state__content">
+                      <mat-icon>rss_feed</mat-icon>
+                      <div>No feeds found</div>
+                    </div>
+                  </div>
+                </div>
 
                 <mat-paginator
                   class="feed__action--paging"
@@ -74,9 +94,10 @@
                   [pageSize]="itemsPerPage"
                   (page)="feedPage = $event.pageIndex"
                 ></mat-paginator>
-              </mat-nav-list>
+              </div>
             </ng-template>
           </mat-tab>
+
           <mat-tab label="Services">
             <ng-template matTabContent>
               <div class="actions">
@@ -103,41 +124,59 @@
                 </div>
               </div>
 
-              <mat-nav-list>
-                <ng-container
-                  *ngFor="
-                    let service of services
-                      | slice
-                        : servicePage * itemsPerPage
-                        : (servicePage + 1) * itemsPerPage
-                  "
-                >
-                  <mat-list-item [routerLink]="['../services', service.id]">
-                    <mat-icon class="feed__icon" matListItemIcon
-                      >cloud_queue</mat-icon
+              <div class="feed-list-frame">
+                <div class="feed-list-scroll">
+                  <mat-nav-list>
+                    <ng-container
+                      *ngFor="
+                        let service of services
+                          | slice
+                            : servicePage * itemsPerPage
+                            : (servicePage + 1) * itemsPerPage
+                      "
                     >
-                    <div matListItemTitle>{{ service.title }}</div>
-                    <div matListItemLine>{{ service.summary }}</div>
-                    <button
-                      mat-icon-button
-                      matListItemMeta
-                      (click)="deleteService($event, service)"
-                      *ngIf="hasFeedDeletePermission"
-                    >
-                      <mat-icon class="action__icon">delete_outline</mat-icon>
-                    </button>
-                  </mat-list-item>
+                      <mat-list-item [routerLink]="['../services', service.id]">
+                        <mat-icon class="feed__icon" matListItemIcon>
+                          cloud_queue
+                        </mat-icon>
+
+                        <div matListItemTitle>{{ service.title }}</div>
+                        <div matListItemLine>{{ service.summary }}</div>
 
-                  <mat-divider></mat-divider>
-                </ng-container>
-              </mat-nav-list>
+                        <button
+                          mat-icon-button
+                          matListItemMeta
+                          (click)="deleteService($event, service)"
+                          *ngIf="hasFeedDeletePermission"
+                        >
+                          <mat-icon class="action__icon">
+                            delete_outline
+                          </mat-icon>
+                        </button>
+                      </mat-list-item>
 
-              <mat-paginator
-                [length]="services.length"
-                [pageSize]="itemsPerPage"
-                (page)="servicePage = $event.pageIndex"
-              >
-              </mat-paginator>
+                      <mat-divider></mat-divider>
+                    </ng-container>
+                  </mat-nav-list>
+
+                  <div
+                    class="empty-list-state"
+                    *ngIf="!services || services.length === 0"
+                  >
+                    <div class="empty-list-state__content">
+                      <mat-icon>cloud_queue</mat-icon>
+                      <div>No services found</div>
+                    </div>
+                  </div>
+                </div>
+
+                <mat-paginator
+                  class="feed__action--paging"
+                  [length]="services.length"
+                  [pageSize]="itemsPerPage"
+                  (page)="servicePage = $event.pageIndex"
+                ></mat-paginator>
+              </div>
             </ng-template>
           </mat-tab>
         </mat-tab-group>
diff --git a/web-app/admin/src/app/admin/admin-feeds/admin-feeds.component.scss b/web-app/admin/src/app/admin/admin-feeds/admin-feeds.component.scss
index a101c69fb..286a77fb9 100644
--- a/web-app/admin/src/app/admin/admin-feeds/admin-feeds.component.scss
+++ b/web-app/admin/src/app/admin/admin-feeds/admin-feeds.component.scss
@@ -4,6 +4,11 @@ $font-md: 16px;
 $font-sm: 14px;
 $font-xs: 12px;
 
+$list-row-height: 82px;
+$list-page-size: 5;
+$list-paginator-height: 56px;
+$list-frame-height: calc(($list-row-height * $list-page-size) + $list-paginator-height);
+
 :host {
   min-height: 0;
   display: flex;
@@ -44,6 +49,54 @@ mat-card {
   background: white;
 }
 
+.feed-list-frame {
+  height: $list-frame-height;
+  min-height: $list-frame-height;
+  max-height: $list-frame-height;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: #fff;
+}
+
+.feed-list-scroll {
+  position: relative;
+  flex: 0 0 calc($list-row-height * $list-page-size);
+  height: calc($list-row-height * $list-page-size);
+  min-height: calc($list-row-height * $list-page-size);
+  max-height: calc($list-row-height * $list-page-size);
+  overflow-y: auto;
+  overflow-x: hidden;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+}
+
+.empty-list-state {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  color: rgba(0, 0, 0, 0.55);
+  background: #fff;
+}
+
+.empty-list-state__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  font-size: $font-md;
+  font-weight: 600;
+
+  mat-icon {
+    width: 42px;
+    height: 42px;
+    font-size: 42px;
+    opacity: 0.6;
+  }
+}
+
 .actions {
   display: flex;
   align-items: center;
diff --git a/web-app/admin/src/app/admin/admin-feeds/admin-service/admin-service.component.scss b/web-app/admin/src/app/admin/admin-feeds/admin-service/admin-service.component.scss
index b7581bcd9..06a3326e3 100644
--- a/web-app/admin/src/app/admin/admin-feeds/admin-service/admin-service.component.scss
+++ b/web-app/admin/src/app/admin/admin-feeds/admin-service/admin-service.component.scss
@@ -67,6 +67,19 @@
 
 .heading__action {
   margin-left: 8px;
+  min-height: 42px;
+  padding: 0 16px;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 42px;
+
+  mat-icon {
+    width: 22px;
+    height: 22px;
+    font-size: 22px;
+    margin-right: 6px;
+    line-height: 22px;
+  }
 }
 
 .content {

From 92c165e4534a012133d985ff98e26eb1c72ddd1f Mon Sep 17 00:00:00 2001
From: Ryan <ryanslatten@vt.edu>
Date: Thu, 30 Apr 2026 16:20:19 -0400
Subject: [PATCH 13/19] fix more things

Co-authored-by: Copilot <copilot@github.com>
---
 service/src/api/observation.js                |  7 ++-
 .../observations/entities.observations.ts     |  7 ++-
 ...n-event-form-preview-dialog.component.scss | 11 +++--
 .../user-details/user-details.component.ts    | 18 ++++----
 .../app/admin/services/admin-user.service.ts  |  8 ++--
 .../observation-edit-date.component.html      | 44 ++++++-------------
 .../observation-edit-date.component.ts        | 26 ++++++++++-
 7 files changed, 70 insertions(+), 51 deletions(-)

diff --git a/service/src/api/observation.js b/service/src/api/observation.js
index 536be1046..f35434569 100644
--- a/service/src/api/observation.js
+++ b/service/src/api/observation.js
@@ -176,9 +176,14 @@ Observation.prototype.validate = function (observation) {
     let fieldsMessage = "";
     const fieldsError = {};
 
-    formDefinitions[formEntry.formId].fields
+    const formDefinition = formDefinitions[formEntry.formId];
+    const userFieldNames = new Set(formDefinition.userFields || []);
+    formDefinition.fields
       .filter((fieldDefinition) => !fieldDefinition.archived)
       .forEach((fieldDefinition) => {
+        // User fields have dynamically populated choices that are not stored in the
+        // form definition, so skip choice-based validation for those fields.
+        if (userFieldNames.has(fieldDefinition.name)) return;
         const field = fieldFactory.createField(
           fieldDefinition,
           formEntry,
diff --git a/service/src/entities/observations/entities.observations.ts b/service/src/entities/observations/entities.observations.ts
index 91ec3aa7c..b6e61dfdc 100644
--- a/service/src/entities/observations/entities.observations.ts
+++ b/service/src/entities/observations/entities.observations.ts
@@ -1184,10 +1184,15 @@ function validateFormFieldEntries(formEntry: FormEntry, form: Form, formEntryErr
   const { mageEvent, observationAttrs } = validation
   const formFields = form.fields || []
   const activeFields = formFields.filter(x => !x.archived)
+  const userFields = new Set(form.userFields || [])
   activeFields.forEach(field => {
     const fieldEntry = formEntry[field.name]
     const fieldValidation: FormFieldValidationContext = { field, fieldEntry, formEntry, mageEvent, observationAttrs }
-    const resultEntry = FieldTypeValidationRules[field.type](fieldValidation)
+    const isUserField = userFields.has(field.name)
+    const rule = isUserField
+      ? validateRequiredThen(context => fields.text.TextFieldValidation(context.field, context.fieldEntry, FormFieldValidationResult(context)))
+      : FieldTypeValidationRules[field.type]
+    const resultEntry = rule(fieldValidation)
     if (resultEntry instanceof FormFieldValidationError) {
       formEntryError.addFieldError(resultEntry)
     }
diff --git a/web-app/admin/src/app/admin/admin-event/admin-event-form/admin-event-form-preview/form-preview-dialog/admin-event-form-preview-dialog.component.scss b/web-app/admin/src/app/admin/admin-event/admin-event-form/admin-event-form-preview/form-preview-dialog/admin-event-form-preview-dialog.component.scss
index 9e30d16d6..cd246bd5a 100644
--- a/web-app/admin/src/app/admin/admin-event/admin-event-form/admin-event-form-preview/form-preview-dialog/admin-event-form-preview-dialog.component.scss
+++ b/web-app/admin/src/app/admin/admin-event/admin-event-form/admin-event-form-preview/form-preview-dialog/admin-event-form-preview-dialog.component.scss
@@ -14,13 +14,13 @@
   overflow: auto;
   background: #fff;
   border-top: 1px solid #eee;
+  padding: 16px 24px;
+  box-sizing: border-box;
 }
 
 .form-preview-scale {
-  width: 600px;
+  width: 100%;
   transform-origin: top left;
-  margin-bottom: -24%;
-  padding: 5px;
 }
 
 :host ::ng-deep .form-preview-scale {
@@ -56,4 +56,9 @@
 :host ::ng-deep h2[mat-dialog-title],
 :host ::ng-deep .mat-mdc-dialog-title {
   color: #1e88e5;
+}
+
+:host ::ng-deep .form-preview-viewport mat-card,
+:host ::ng-deep .form-preview-viewport .mat-mdc-card {
+  box-shadow: none !important;
 }
\ No newline at end of file
diff --git a/web-app/admin/src/app/admin/admin-users/user-details/user-details.component.ts b/web-app/admin/src/app/admin/admin-users/user-details/user-details.component.ts
index 1bf9d5aa7..ab048765b 100644
--- a/web-app/admin/src/app/admin/admin-users/user-details/user-details.component.ts
+++ b/web-app/admin/src/app/admin/admin-users/user-details/user-details.component.ts
@@ -218,7 +218,7 @@ export class UserDetailsComponent implements OnInit, OnDestroy {
         graphs: zxcvbnCommonPackage.adjacencyGraphs,
         translations: zxcvbnEnPackage.translations
       });
-    } catch {}
+    } catch { }
   }
 
   private initForUser(userId: string): void {
@@ -774,7 +774,7 @@ export class UserDetailsComponent implements OnInit, OnDestroy {
       .subscribe({
         next: (updatedUser) => {
           const merged: any = { ...(this.user as any), ...(updatedUser as any) };
-        
+
           const roleFromResponse = (updatedUser as any)?.role;
           if (roleFromResponse && typeof roleFromResponse === 'object') {
             merged.role = roleFromResponse;
@@ -784,15 +784,15 @@ export class UserDetailsComponent implements OnInit, OnDestroy {
               (updatedUser as any)?.role?.id ||
               (this.editUser as any)?.selectedRole?.id ||
               (this.user as any)?.role?.id;
-        
+
             if (roleId && Array.isArray(this.roles)) {
               const fullRole = this.roles.find((r: any) => r?.id === roleId);
               if (fullRole) merged.role = fullRole;
             }
           }
-        
+
           this.user = merged as User;
-        
+
           this.isEditingUser = false;
           this.editUser = null;
           this.saving = false;
@@ -818,7 +818,7 @@ export class UserDetailsComponent implements OnInit, OnDestroy {
           this.userTeams.push(team);
           this.nonUserTeam = null;
         },
-        error: () => {}
+        error: () => { }
       });
   }
 
@@ -841,7 +841,7 @@ export class UserDetailsComponent implements OnInit, OnDestroy {
 
           this.loadUserTeams();
         },
-        error: () => {}
+        error: () => { }
       });
   }
 
@@ -1080,13 +1080,13 @@ export class UserDetailsComponent implements OnInit, OnDestroy {
 
       if (form) form.resetForm();
       this.changePassword = false;
-      this.cancelEdit();
     };
 
     const onError = (error: any) => {
       this.updatingPassword = false;
       const msg =
-        error?.data || error?.responseText || 'Failed to update password';
+        (typeof error?.error === 'string' ? error.error : error?.error?.message) ||
+        'Failed to update password';
       this.passwordStatus = { status: 'danger', msg };
     };
 
diff --git a/web-app/admin/src/app/admin/services/admin-user.service.ts b/web-app/admin/src/app/admin/services/admin-user.service.ts
index 2c040aeae..731418ac1 100644
--- a/web-app/admin/src/app/admin/services/admin-user.service.ts
+++ b/web-app/admin/src/app/admin/services/admin-user.service.ts
@@ -25,7 +25,7 @@ export class AdminUserService {
     private router: Router,
     private route: ActivatedRoute,
     private localStorage: LocalStorageService
-  ) {}
+  ) { }
 
   signup(username: string): Observable<any> {
     return this.http.post('/api/users/signups', { username });
@@ -78,14 +78,14 @@ export class AdminUserService {
       tap((user) => this.setUser(user)),
       catchError(() => of(null))
     );
-  }  
+  }
 
   checkLoggedInUser(): Observable<any> {
     return this.getMyself();
   }
 
   updatePassword(userId: string, auth: any): Observable<any> {
-    return this.http.put(`/api/users/${userId}/password`, auth);
+    return this.http.put(`/api/users/${userId}/password`, auth, { responseType: 'text' });
   }
 
   updateMyPassword(auth: any): Observable<void> {
@@ -177,7 +177,7 @@ export class AdminUserService {
     this.myselfSubject.next(null);
     this.isAdminSubject.next(false);
     this.localStorage.removeToken();
-  }  
+  }
 
   private saveUser(
     url: string,
diff --git a/web-app/admin/src/app/observation/observation-edit/observation-edit-date/observation-edit-date.component.html b/web-app/admin/src/app/observation/observation-edit/observation-edit-date/observation-edit-date.component.html
index cbbb165ed..b2fcd2cbd 100644
--- a/web-app/admin/src/app/observation/observation-edit/observation-edit-date/observation-edit-date.component.html
+++ b/web-app/admin/src/app/observation/observation-edit/observation-edit-date/observation-edit-date.component.html
@@ -2,25 +2,13 @@
   <div class="date">
     <mat-form-field appearance="fill">
       <mat-label>{{ definition.title }} Date</mat-label>
-      <input
-        matInput
-        [matDatepicker]="datePicker"
-        [(ngModel)]="date"
-        [required]="definition.required"
-        (ngModelChange)="onDate()"
-        #dateModel="ngModel"
-        autocomplete="off"
-      />
-      <mat-datepicker-toggle
-        matSuffix
-        [for]="datePicker"
-      ></mat-datepicker-toggle>
+      <input matInput [matDatepicker]="datePicker" [(ngModel)]="date" [required]="definition.required"
+        (ngModelChange)="onDate()" #dateModel="ngModel" autocomplete="off" />
+      <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
       <mat-datepicker #datePicker></mat-datepicker>
-      <mat-error
-        *ngIf="
+      <mat-error *ngIf="
           dateModel.errors?.required && !dateModel.errors?.matDatepickerParse
-        "
-      >
+        ">
         Date is required
       </mat-error>
       <mat-error *ngIf="dateModel.errors?.matDatepickerParse">
@@ -31,20 +19,14 @@
 
   <div class="time">
     <mat-form-field appearance="fill">
-      <mat-label
-        >{{ definition.title }} Time
-        {{ timeZone === 'gmt' ? '(GMT)' : '(Local)' }}</mat-label
-      >
-      <input
-        matInput
-        type="time"
-        step="1"
-        [(ngModel)]="time"
-        (ngModelChange)="onTime()"
-        #timeModel="ngModel"
-        autocomplete="off"
-      />
+      <mat-label>{{ definition.title }} Time
+        {{ timeZone === 'gmt' ? '(GMT)' : '(Local)' }}</mat-label>
+      <input matInput #timeInput type="time" step="60" [(ngModel)]="time" (ngModelChange)="onTime()"
+        #timeModel="ngModel" autocomplete="off" />
+      <button mat-icon-button matSuffix type="button" aria-label="Open time selector" (click)="openTimePicker($event)">
+        <mat-icon>schedule</mat-icon>
+      </button>
       <mat-error *ngIf="timeInvalid">Invalid time</mat-error>
     </mat-form-field>
   </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/web-app/admin/src/app/observation/observation-edit/observation-edit-date/observation-edit-date.component.ts b/web-app/admin/src/app/observation/observation-edit/observation-edit-date/observation-edit-date.component.ts
index 0ad99a52d..168bdfe2d 100644
--- a/web-app/admin/src/app/observation/observation-edit/observation-edit-date/observation-edit-date.component.ts
+++ b/web-app/admin/src/app/observation/observation-edit/observation-edit-date/observation-edit-date.component.ts
@@ -1,5 +1,6 @@
 import {
   Component,
+  ElementRef,
   Input,
   OnChanges,
   SimpleChanges,
@@ -20,6 +21,7 @@ export class ObservationEditDateComponent implements OnChanges {
 
   @ViewChild('dateModel') dateModel: NgModel;
   @ViewChild('timeModel') timeModel: NgModel;
+  @ViewChild('timeInput') timeInput?: ElementRef<HTMLInputElement>;
 
   date: moment.Moment | null = null;
   time = '';
@@ -35,9 +37,12 @@ export class ObservationEditDateComponent implements OnChanges {
       const timestamp = this.formGroup.get(this.definition.name)?.value;
 
       if (timestamp) {
-        const m = moment(timestamp);
+        const m =
+          this.timeZone === 'gmt'
+            ? moment.utc(timestamp)
+            : moment(timestamp).local();
         this.date = m.clone();
-        this.time = m.format('HH:mm:ss');
+        this.time = m.format('HH:mm');
       } else {
         this.date = null;
         this.time = '';
@@ -66,6 +71,23 @@ export class ObservationEditDateComponent implements OnChanges {
     }
   }
 
+  openTimePicker(event: Event): void {
+    event.preventDefault();
+    event.stopPropagation();
+
+    const input = this.timeInput?.nativeElement as
+      | (HTMLInputElement & { showPicker?: () => void })
+      | undefined;
+
+    if (!input) {
+      return;
+    }
+
+    input.focus();
+    input.click();
+    input.showPicker?.();
+  }
+
   toggleTimeZone(): void {
     this.timeZone = this.timeZone === 'gmt' ? 'local' : 'gmt';
   }

From ff9fce1c7acfac9d161328eaaee9bc0102e2e1a3 Mon Sep 17 00:00:00 2001
From: Ryan Carpenter <ryan.carpenter@omnifederal.com>
Date: Thu, 30 Apr 2026 14:44:57 -0600
Subject: [PATCH 14/19] ui tweaks

---
 .../admin/admin-users/user-details/user-details.component.scss  | 2 +-
 web-app/admin/src/css/style.scss                                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/web-app/admin/src/app/admin/admin-users/user-details/user-details.component.scss b/web-app/admin/src/app/admin/admin-users/user-details/user-details.component.scss
index 5d30cff44..3a95d81d6 100644
--- a/web-app/admin/src/app/admin/admin-users/user-details/user-details.component.scss
+++ b/web-app/admin/src/app/admin/admin-users/user-details/user-details.component.scss
@@ -541,7 +541,7 @@ $font-xs: 12px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  height: 520px;
+  height: 420px;
   min-height: 420px;
 
   @media (max-width: 1200px) {
diff --git a/web-app/admin/src/css/style.scss b/web-app/admin/src/css/style.scss
index 8ad9f03e6..7c8d7567f 100644
--- a/web-app/admin/src/css/style.scss
+++ b/web-app/admin/src/css/style.scss
@@ -586,7 +586,7 @@ admin {
 .admin-main-content {
   overflow-y: auto;
   height: 100%;
-  max-height: 90vh;
+  max-height: calc(100vh - 104px);
   position: relative;
   display: block;
 }

From 5f3d55f991ceab3ff5c11d95267a494d812d86cd Mon Sep 17 00:00:00 2001
From: Ryan Carpenter <ryan.carpenter@omnifederal.com>
Date: Thu, 30 Apr 2026 15:02:00 -0600
Subject: [PATCH 15/19] weird refresh bug

---
 .../admin/admin-shell/admin.component.html    |  2 +-
 .../app/admin/admin-shell/admin.component.ts  | 23 +++++++++++++++++--
 .../user-details/user-details.component.scss  |  1 -
 web-app/admin/src/app/routing.module.ts       |  7 +++++-
 .../src/app/app-routing.module.ts             | 10 +++++---
 5 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/web-app/admin/src/app/admin/admin-shell/admin.component.html b/web-app/admin/src/app/admin/admin-shell/admin.component.html
index b345e6dad..2160d5b8d 100644
--- a/web-app/admin/src/app/admin/admin-shell/admin.component.html
+++ b/web-app/admin/src/app/admin/admin-shell/admin.component.html
@@ -14,7 +14,7 @@
 </div>
 
 <div class="admin-main">
-  <div class="admin-main-content">
+  <div class="admin-main-content" #adminMainContent>
     <router-outlet></router-outlet>
   </div>
 </div>
diff --git a/web-app/admin/src/app/admin/admin-shell/admin.component.ts b/web-app/admin/src/app/admin/admin-shell/admin.component.ts
index f0764ed7d..f91a1a96d 100644
--- a/web-app/admin/src/app/admin/admin-shell/admin.component.ts
+++ b/web-app/admin/src/app/admin/admin-shell/admin.component.ts
@@ -1,4 +1,10 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  OnDestroy,
+  OnInit,
+  ViewChild
+} from '@angular/core';
 import { NavigationEnd, Router } from '@angular/router';
 import { filter, Subject, takeUntil } from 'rxjs';
 
@@ -14,6 +20,9 @@ import { SettingsService } from '../../../../src/app/services/settings.service';
   styleUrls: ['./admin.component.scss']
 })
 export class AdminComponent implements OnInit, OnDestroy {
+  @ViewChild('adminMainContent')
+  adminMainContent?: ElementRef<HTMLElement>;
+
   stateName = '';
   token = '';
 
@@ -56,7 +65,17 @@ export class AdminComponent implements OnInit, OnDestroy {
         filter((e): e is NavigationEnd => e instanceof NavigationEnd),
         takeUntil(this.destroy$)
       )
-      .subscribe((e) => (this.stateName = e.urlAfterRedirects));
+      .subscribe((e) => {
+        this.stateName = e.urlAfterRedirects;
+
+        requestAnimationFrame(() => {
+          this.adminMainContent?.nativeElement.scrollTo({
+            top: 0,
+            left: 0,
+            behavior: 'auto'
+          });
+        });
+      });
 
     const defaultUserQueries = this.userPaging.constructDefault();
     this.stateAndData = { inactive: defaultUserQueries.inactive };
diff --git a/web-app/admin/src/app/admin/admin-users/user-details/user-details.component.scss b/web-app/admin/src/app/admin/admin-users/user-details/user-details.component.scss
index 3a95d81d6..00829e0e3 100644
--- a/web-app/admin/src/app/admin/admin-users/user-details/user-details.component.scss
+++ b/web-app/admin/src/app/admin/admin-users/user-details/user-details.component.scss
@@ -541,7 +541,6 @@ $font-xs: 12px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  height: 420px;
   min-height: 420px;
 
   @media (max-width: 1200px) {
diff --git a/web-app/admin/src/app/routing.module.ts b/web-app/admin/src/app/routing.module.ts
index c9a0f4112..2415c7fd2 100644
--- a/web-app/admin/src/app/routing.module.ts
+++ b/web-app/admin/src/app/routing.module.ts
@@ -11,7 +11,12 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [
+    RouterModule.forRoot(routes, {
+      scrollPositionRestoration: 'top',
+      anchorScrolling: 'enabled'
+    })
+  ],
   exports: [RouterModule]
 })
 export class AppRoutingModule {}
diff --git a/web-app/projects/core-lib-showcase/src/app/app-routing.module.ts b/web-app/projects/core-lib-showcase/src/app/app-routing.module.ts
index ba01d89ed..e8fc7badd 100644
--- a/web-app/projects/core-lib-showcase/src/app/app-routing.module.ts
+++ b/web-app/projects/core-lib-showcase/src/app/app-routing.module.ts
@@ -1,11 +1,15 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
-
 const routes: Routes = [];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes, {})],
+  imports: [
+    RouterModule.forRoot(routes, {
+      scrollPositionRestoration: 'top',
+      anchorScrolling: 'enabled'
+    })
+  ],
   exports: [RouterModule]
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}

From 3548fc5e2bc96fc899d81dbec3bb98758133f832 Mon Sep 17 00:00:00 2001
From: Ryan <ryanslatten@vt.edu>
Date: Thu, 30 Apr 2026 17:07:25 -0400
Subject: [PATCH 16/19] update 6.6.6

---
 instance/package.json                       | 2 +-
 package-lock.json                           | 4 ++--
 package.json                                | 2 +-
 service/npm-shrinkwrap.json                 | 4 ++--
 service/package.json                        | 2 +-
 web-app/package-lock.json                   | 4 ++--
 web-app/package.json                        | 2 +-
 web-app/projects/core-lib/package-lock.json | 4 ++--
 web-app/projects/core-lib/package.json      | 2 +-
 9 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/instance/package.json b/instance/package.json
index 7f5bfe1ed..7ba743619 100644
--- a/instance/package.json
+++ b/instance/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ngageoint/mage.dev-instance",
-  "version": "6.6.5",
+  "version": "6.6.6",
   "description": "Assemble a Mage Server deployment from the core service, the web-app, and selected plugins.  This is primarily a development tool because the dependencies point to relative directories instead of production packages.  This can however serve as a starting point to create a production Mage instance package.json.",
   "scripts": {
     "start": "npm run start:dev",
diff --git a/package-lock.json b/package-lock.json
index 9def111b1..7217410aa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ngageoint/mage.project",
-  "version": "6.6.5",
+  "version": "6.6.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ngageoint/mage.project",
-      "version": "6.6.5",
+      "version": "6.6.6",
       "hasInstallScript": true,
       "dependencies": {
         "@angular/cdk": "^17.3.10",
diff --git a/package.json b/package.json
index ffb9e7239..13c41ce25 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "@ngageoint/mage.project",
   "description": "This is the root package definition for the mage-server monorepo.",
   "private": true,
-  "version": "6.6.5",
+  "version": "6.6.6",
   "files": [],
   "scripts": {
     "postinstall": "npm-run-all service:ci web-app:ci arcgis:ci sftp:ci nga-msi:ci",
diff --git a/service/npm-shrinkwrap.json b/service/npm-shrinkwrap.json
index 29108f961..de95baa63 100644
--- a/service/npm-shrinkwrap.json
+++ b/service/npm-shrinkwrap.json
@@ -1,12 +1,12 @@
 {
   "name": "@ngageoint/mage.service",
-  "version": "6.6.5",
+  "version": "6.6.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ngageoint/mage.service",
-      "version": "6.6.5",
+      "version": "6.6.6",
       "dependencies": {
         "@ngageoint/geopackage": "4.2.6",
         "@ngageoint/mongodb-migrations": "1.0.0",
diff --git a/service/package.json b/service/package.json
index 021938214..df1c5ef11 100644
--- a/service/package.json
+++ b/service/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ngageoint/mage.service",
-  "version": "6.6.5",
+  "version": "6.6.6",
   "displayName": "Mage Service",
   "description": "Mage is a geospatial situational awareness and data collection platform.  The Mage Service is the ReST service API that the Mage client apps use to interact with Mage data.",
   "keywords": [
diff --git a/web-app/package-lock.json b/web-app/package-lock.json
index 0deb0b6f4..e68d69265 100644
--- a/web-app/package-lock.json
+++ b/web-app/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ngageoint/mage.web-app",
-  "version": "6.6.5",
+  "version": "6.6.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ngageoint/mage.web-app",
-      "version": "6.6.5",
+      "version": "6.6.6",
       "license": "Apache-2.0",
       "dependencies": {
         "@angular/animations": "17.3.12",
diff --git a/web-app/package.json b/web-app/package.json
index 639532511..9a72ff978 100644
--- a/web-app/package.json
+++ b/web-app/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@ngageoint/mage.web-app",
-  "version": "6.6.5",
+  "version": "6.6.6",
   "description": "The Mage web-app is the UI for interacting with the Mage service in a web browser.",
   "keywords": [
     "NGA",
diff --git a/web-app/projects/core-lib/package-lock.json b/web-app/projects/core-lib/package-lock.json
index 3ec3d255a..97ccb7df1 100644
--- a/web-app/projects/core-lib/package-lock.json
+++ b/web-app/projects/core-lib/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ngageoint/mage.web-core-lib",
-  "version": "6.6.5",
+  "version": "6.6.6",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ngageoint/mage.web-core-lib",
-      "version": "6.6.5",
+      "version": "6.6.6",
       "dependencies": {
         "@rollup/plugin-commonjs": "25.0.8",
         "@rollup/plugin-node-resolve": "15.3.1",
diff --git a/web-app/projects/core-lib/package.json b/web-app/projects/core-lib/package.json
index ff95e3bfc..d9b6a2857 100644
--- a/web-app/projects/core-lib/package.json
+++ b/web-app/projects/core-lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ngageoint/mage.web-core-lib",
-  "version": "6.6.5",
+  "version": "6.6.6",
   "repository": {
     "type": "git",
     "url": "https://github.com/ngageoint/mage-server.git"

From 49535db9ae8d784ce67cec672202ff67bfdb071f Mon Sep 17 00:00:00 2001
From: Ryan <ryanslatten@vt.edu>
Date: Thu, 30 Apr 2026 17:32:23 -0400
Subject: [PATCH 17/19] fix safari window size

Co-authored-by: Copilot <copilot@github.com>
---
 .../admin-dashboard/admin-dashboard.scss      | 20 ++++++++++++-------
 .../devices-dashboard.component.scss          | 10 ++++++----
 .../dashboard/event-dashboard.component.scss  | 10 ++++++----
 .../dashboard/layer-dashboard.component.scss  |  9 +++++----
 .../dashboard/team-dashboard.component.scss   | 11 ++++++----
 .../dashboard/user-dashboard.component.scss   |  9 +++++----
 web-app/admin/src/css/style.scss              |  9 +++++----
 web-app/admin/src/styles.scss                 |  6 +++---
 8 files changed, 50 insertions(+), 34 deletions(-)

diff --git a/web-app/admin/src/app/admin/admin-dashboard/admin-dashboard.scss b/web-app/admin/src/app/admin/admin-dashboard/admin-dashboard.scss
index ad1414931..16f7c1326 100644
--- a/web-app/admin/src/app/admin/admin-dashboard/admin-dashboard.scss
+++ b/web-app/admin/src/app/admin/admin-dashboard/admin-dashboard.scss
@@ -11,16 +11,18 @@ $top-panel-list-height: 236px;
   transition: margin-left 0.3s;
   width: 100%;
   min-height: calc(100vh - 127px);
+  min-height: calc(100dvh - 127px);
   display: flex;
   flex-direction: column;
 
   &:has(admin-dashboard) {
     min-height: calc(100vh - 127px);
+    min-height: calc(100dvh - 127px);
     overflow: auto;
-    -webkit-overflow-scrolling: touch;
 
     @media (max-width: 959px) {
       min-height: calc(100vh - 114px);
+      min-height: calc(100dvh - 114px);
       overflow: auto;
     }
   }
@@ -60,7 +62,8 @@ $top-panel-list-height: 236px;
     width: 100%;
     overflow: visible;
 
-    @media (max-width: 959px), (max-height: 600px) {
+    @media (max-width: 959px),
+    (max-height: 600px) {
       display: flex;
       flex-direction: column !important;
       align-items: stretch;
@@ -80,7 +83,8 @@ $top-panel-list-height: 236px;
     min-height: $top-panel-height;
     max-height: $top-panel-height;
 
-    @media (max-width: 959px), (max-height: 600px) {
+    @media (max-width: 959px),
+    (max-height: 600px) {
       flex: 0 0 auto;
       width: 100%;
       height: $top-panel-height;
@@ -150,7 +154,8 @@ $top-panel-list-height: 236px;
     border: 1px solid #a9a9a9;
     background: #fcfcfc;
 
-    @media (max-width: 959px), (max-height: 600px) {
+    @media (max-width: 959px),
+    (max-height: 600px) {
       flex: 0 0 $top-panel-list-height;
       height: $top-panel-list-height;
       min-height: $top-panel-list-height;
@@ -263,6 +268,7 @@ $top-panel-list-height: 236px;
     }
 
     @media (max-width: 560px) {
+
       .mdc-list-item__content,
       .mat-mdc-list-item-unscoped-content {
         flex-wrap: wrap;
@@ -392,7 +398,8 @@ $top-panel-list-height: 236px;
       --mdc-text-button-label-text-color: #b8b8b8;
     }
 
-    @media (max-width: 480px), (max-height: 600px) {
+    @media (max-width: 480px),
+    (max-height: 600px) {
       align-items: stretch;
       gap: 8px;
       flex-direction: column;
@@ -440,7 +447,6 @@ $top-panel-list-height: 236px;
     min-height: 0;
     overflow-y: auto;
     overflow-x: hidden;
-    -webkit-overflow-scrolling: touch;
     overscroll-behavior: contain;
     border-bottom: 1px solid #e5e7eb;
     padding-bottom: 0;
@@ -499,4 +505,4 @@ $top-panel-list-height: 236px;
 
 .mt-5 {
   margin-top: 48px;
-}
+}
\ No newline at end of file
diff --git a/web-app/admin/src/app/admin/admin-devices/dashboard/devices-dashboard.component.scss b/web-app/admin/src/app/admin/admin-devices/dashboard/devices-dashboard.component.scss
index 3b847281e..8348d30ab 100644
--- a/web-app/admin/src/app/admin/admin-devices/dashboard/devices-dashboard.component.scss
+++ b/web-app/admin/src/app/admin/admin-devices/dashboard/devices-dashboard.component.scss
@@ -9,8 +9,8 @@ $font-xs: 12px;
 
   &:has(admin-devices) {
     height: 92vh;
+    height: 92dvh;
     overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
 
     @media (max-height: 500px) {
       overflow-y: scroll;
@@ -20,6 +20,7 @@ $font-xs: 12px;
   admin-devices {
     .container {
       height: 90vh;
+      height: 90dvh;
     }
   }
 }
@@ -112,7 +113,7 @@ $font-xs: 12px;
   min-width: 0;
 }
 
-.filters > * {
+.filters>* {
   min-width: 0;
 }
 
@@ -127,7 +128,7 @@ $font-xs: 12px;
 }
 
 :host ::ng-deep .filters mage-card-navbar,
-:host ::ng-deep .filters mage-card-navbar > *,
+:host ::ng-deep .filters mage-card-navbar>*,
 :host ::ng-deep .filters mage-card-navbar .card-navbar,
 :host ::ng-deep .filters mage-card-navbar .search-container,
 :host ::ng-deep .filters mage-card-navbar .search-wrapper,
@@ -468,6 +469,7 @@ $font-xs: 12px;
 .mt-5 {
   margin-top: 5px !important;
 }
+
 .mb-5 {
   margin-bottom: 5px !important;
 }
@@ -477,4 +479,4 @@ $font-xs: 12px;
 :host .mat-row a {
   color: inherit !important;
   text-decoration: none !important;
-}
+}
\ No newline at end of file
diff --git a/web-app/admin/src/app/admin/admin-event/dashboard/event-dashboard.component.scss b/web-app/admin/src/app/admin/admin-event/dashboard/event-dashboard.component.scss
index 9f7a9b61e..635708a75 100644
--- a/web-app/admin/src/app/admin/admin-event/dashboard/event-dashboard.component.scss
+++ b/web-app/admin/src/app/admin/admin-event/dashboard/event-dashboard.component.scss
@@ -9,8 +9,8 @@ $font-xs: 12px;
 
   &:has(admin-events) {
     height: 92vh;
+    height: 92dvh;
     overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
 
     @media (max-height: 500px) {
       overflow-y: scroll;
@@ -20,6 +20,7 @@ $font-xs: 12px;
   admin-events {
     .container {
       height: 90vh;
+      height: 90dvh;
     }
   }
 }
@@ -112,7 +113,7 @@ $font-xs: 12px;
   min-width: 0;
 }
 
-.filters > * {
+.filters>* {
   min-width: 0;
 }
 
@@ -127,7 +128,7 @@ $font-xs: 12px;
 }
 
 :host ::ng-deep .filters mage-card-navbar,
-:host ::ng-deep .filters mage-card-navbar > *,
+:host ::ng-deep .filters mage-card-navbar>*,
 :host ::ng-deep .filters mage-card-navbar .card-navbar,
 :host ::ng-deep .filters mage-card-navbar .search-container,
 :host ::ng-deep .filters mage-card-navbar .search-wrapper,
@@ -464,6 +465,7 @@ $font-xs: 12px;
 .mt-5 {
   margin-top: 5px !important;
 }
+
 .mb-5 {
   margin-bottom: 5px !important;
-}
+}
\ No newline at end of file
diff --git a/web-app/admin/src/app/admin/admin-layers/dashboard/layer-dashboard.component.scss b/web-app/admin/src/app/admin/admin-layers/dashboard/layer-dashboard.component.scss
index 247a971e4..b7bb0afec 100644
--- a/web-app/admin/src/app/admin/admin-layers/dashboard/layer-dashboard.component.scss
+++ b/web-app/admin/src/app/admin/admin-layers/dashboard/layer-dashboard.component.scss
@@ -9,8 +9,8 @@ $font-xs: 12px;
 
   &:has(admin-layers) {
     height: 92vh;
+    height: 92dvh;
     overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
 
     @media (max-height: 500px) {
       overflow-y: scroll;
@@ -20,6 +20,7 @@ $font-xs: 12px;
   admin-layers {
     .container {
       height: 90vh;
+      height: 90dvh;
     }
   }
 }
@@ -112,7 +113,7 @@ $font-xs: 12px;
   min-width: 0;
 }
 
-.filters > * {
+.filters>* {
   min-width: 0;
 }
 
@@ -127,7 +128,7 @@ $font-xs: 12px;
 }
 
 :host ::ng-deep .filters mage-card-navbar,
-:host ::ng-deep .filters mage-card-navbar > *,
+:host ::ng-deep .filters mage-card-navbar>*,
 :host ::ng-deep .filters mage-card-navbar .card-navbar,
 :host ::ng-deep .filters mage-card-navbar .search-container,
 :host ::ng-deep .filters mage-card-navbar .search-wrapper,
@@ -464,4 +465,4 @@ $font-xs: 12px;
 :host .mat-row a {
   color: inherit !important;
   text-decoration: none !important;
-}
+}
\ No newline at end of file
diff --git a/web-app/admin/src/app/admin/admin-teams/dashboard/team-dashboard.component.scss b/web-app/admin/src/app/admin/admin-teams/dashboard/team-dashboard.component.scss
index da6547dae..41cc2b1c3 100644
--- a/web-app/admin/src/app/admin/admin-teams/dashboard/team-dashboard.component.scss
+++ b/web-app/admin/src/app/admin/admin-teams/dashboard/team-dashboard.component.scss
@@ -9,8 +9,8 @@ $font-xs: 12px;
 
   &:has(admin-teams) {
     height: 92vh;
+    height: 92dvh;
     overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
 
     @media (max-height: 500px) {
       overflow-y: scroll;
@@ -20,6 +20,7 @@ $font-xs: 12px;
   admin-teams {
     .container {
       height: 90vh;
+      height: 90dvh;
     }
   }
 }
@@ -112,7 +113,7 @@ $font-xs: 12px;
   min-width: 0;
 }
 
-.filters > * {
+.filters>* {
   min-width: 0;
 }
 
@@ -127,7 +128,7 @@ $font-xs: 12px;
 }
 
 :host ::ng-deep .filters mage-card-navbar,
-:host ::ng-deep .filters mage-card-navbar > *,
+:host ::ng-deep .filters mage-card-navbar>*,
 :host ::ng-deep .filters mage-card-navbar .card-navbar,
 :host ::ng-deep .filters mage-card-navbar .search-container,
 :host ::ng-deep .filters mage-card-navbar .search-wrapper,
@@ -184,6 +185,7 @@ $font-xs: 12px;
 }
 
 :host {
+
   ::ng-deep mage-card-navbar input.search-input,
   ::ng-deep input.search-input.ng-untouched.ng-pristine.ng-valid,
   ::ng-deep input.search-input.ng-valid.ng-dirty.ng-touched,
@@ -546,6 +548,7 @@ $font-xs: 12px;
 .mt-5 {
   margin-top: 5px !important;
 }
+
 .mb-5 {
   margin-bottom: 5px !important;
-}
+}
\ No newline at end of file
diff --git a/web-app/admin/src/app/admin/admin-users/dashboard/user-dashboard.component.scss b/web-app/admin/src/app/admin/admin-users/dashboard/user-dashboard.component.scss
index 5e121b1de..9a802ca45 100644
--- a/web-app/admin/src/app/admin/admin-users/dashboard/user-dashboard.component.scss
+++ b/web-app/admin/src/app/admin/admin-users/dashboard/user-dashboard.component.scss
@@ -9,8 +9,8 @@ $font-xs: 12px;
 
   &:has(admin-users) {
     height: 92vh;
+    height: 92dvh;
     overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
 
     @media (max-height: 500px) {
       overflow-y: scroll;
@@ -20,6 +20,7 @@ $font-xs: 12px;
   admin-users {
     .container {
       height: 90vh;
+      height: 90dvh;
     }
   }
 }
@@ -112,7 +113,7 @@ $font-xs: 12px;
   min-width: 0;
 }
 
-.filters > * {
+.filters>* {
   min-width: 0;
 }
 
@@ -127,7 +128,7 @@ $font-xs: 12px;
 }
 
 :host ::ng-deep .filters mage-card-navbar,
-:host ::ng-deep .filters mage-card-navbar > *,
+:host ::ng-deep .filters mage-card-navbar>*,
 :host ::ng-deep .filters mage-card-navbar .card-navbar,
 :host ::ng-deep .filters mage-card-navbar .search-container,
 :host ::ng-deep .filters mage-card-navbar .search-wrapper,
@@ -601,4 +602,4 @@ $font-xs: 12px;
 .muted {
   font-size: $font-xs;
   color: #6b7280;
-}
+}
\ No newline at end of file
diff --git a/web-app/admin/src/css/style.scss b/web-app/admin/src/css/style.scss
index 7c8d7567f..d9c4fadbf 100644
--- a/web-app/admin/src/css/style.scss
+++ b/web-app/admin/src/css/style.scss
@@ -259,7 +259,7 @@ h5 {
   margin-bottom: 16px;
 }
 
-.coordinate-editor > div {
+.coordinate-editor>div {
   margin-right: 8px;
   margin-left: 8px;
 }
@@ -478,7 +478,7 @@ h5 {
     0 2px 2px 0 rgba(0, 0, 0, 0.098), 0 1px 5px 0 rgba(0, 0, 0, 0.084);
 }
 
-.card > .card-content {
+.card>.card-content {
   padding: 16px;
 }
 
@@ -587,6 +587,7 @@ admin {
   overflow-y: auto;
   height: 100%;
   max-height: calc(100vh - 104px);
+  max-height: calc(100dvh - 104px);
   position: relative;
   display: block;
 }
@@ -662,7 +663,7 @@ admin {
   border-color: #f0f0f0;
 }
 
-.admin-dashboard-navbar > .container-fluid > .navbar-header > .navbar-brand {
+.admin-dashboard-navbar>.container-fluid>.navbar-header>.navbar-brand {
   color: #204976;
 }
 
@@ -1134,4 +1135,4 @@ h4.image-delete {
     width: 100%;
     vertical-align: middle;
   }
-}
+}
\ No newline at end of file
diff --git a/web-app/admin/src/styles.scss b/web-app/admin/src/styles.scss
index 7efa7d8b5..64a244259 100644
--- a/web-app/admin/src/styles.scss
+++ b/web-app/admin/src/styles.scss
@@ -120,7 +120,6 @@
 .table-scroll {
   overflow-y: auto;
   overflow-x: hidden;
-  -webkit-overflow-scrolling: touch;
   overscroll-behavior: contain;
   border-bottom: 1px solid #e5e7eb;
 }
@@ -354,8 +353,8 @@
 
   &:has(admin-users) {
     height: 92vh;
+    height: 92dvh;
     overflow-y: hidden;
-    -webkit-overflow-scrolling: touch;
 
     @media (max-height: 500px) {
       overflow-y: scroll;
@@ -365,6 +364,7 @@
   admin-users {
     .container {
       height: 90vh;
+      height: 90dvh;
     }
   }
 }
@@ -656,4 +656,4 @@ td.mat-cell i.fab {
     background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%) !important;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25), 0 8px 16px rgba(0, 0, 0, 0.15) !important;
   }
-}
+}
\ No newline at end of file

From 315fa1c4dbae347bad291bf5c8c6f798ac526055 Mon Sep 17 00:00:00 2001
From: Ryan Carpenter <ryan.carpenter@omnifederal.com>
Date: Thu, 30 Apr 2026 16:04:29 -0600
Subject: [PATCH 18/19] unit tests

---
 .../admin-dashboard/admin-dashboard.spec.ts   | 254 +++++++++++----
 .../admin-feed/admin-feed.component.spec.ts   | 289 +++++++++++++++---
 2 files changed, 443 insertions(+), 100 deletions(-)

diff --git a/web-app/admin/src/app/admin/admin-dashboard/admin-dashboard.spec.ts b/web-app/admin/src/app/admin/admin-dashboard/admin-dashboard.spec.ts
index e74106c60..9c7a18a33 100644
--- a/web-app/admin/src/app/admin/admin-dashboard/admin-dashboard.spec.ts
+++ b/web-app/admin/src/app/admin/admin-dashboard/admin-dashboard.spec.ts
@@ -16,17 +16,17 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatIconTestingModule } from '@angular/material/icon/testing';
-import { MatFormFieldModule as MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule as MatInputModule } from '@angular/material/input';
-import { MatButtonModule as MatButtonModule } from '@angular/material/button';
-import { MatCardModule as MatCardModule } from '@angular/material/card';
-import { MatListModule as MatListModule } from '@angular/material/list';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatListModule } from '@angular/material/list';
 import { MatBadgeModule } from '@angular/material/badge';
-import { MatSelectModule as MatSelectModule } from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
 import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatAutocompleteModule as MatAutocompleteModule } from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatNativeDateModule } from '@angular/material/core';
-import { MatTableModule as MatTableModule } from '@angular/material/table';
+import { MatTableModule } from '@angular/material/table';
 
 import { RouterTestingModule } from '@angular/router/testing';
 import { AdminUserService } from '../services/admin-user.service';
@@ -88,6 +88,60 @@ const TEST_USERS: any[] = [
     },
     email: 'kiku@example.com',
     phones: []
+  },
+  {
+    id: '4',
+    username: 'sakura_',
+    displayName: 'Sakura',
+    active: true,
+    enabled: true,
+    authentication: 'LOCAL',
+    createdAt: new Date().toDateString(),
+    lastUpdated: new Date().toDateString(),
+    recentEventIds: [],
+    role: {
+      id: 'Test',
+      name: 'role',
+      permissions: []
+    },
+    email: 'sakura@example.com',
+    phones: []
+  },
+  {
+    id: '5',
+    username: 'yuki_',
+    displayName: 'Yuki',
+    active: true,
+    enabled: true,
+    authentication: 'LOCAL',
+    createdAt: new Date().toDateString(),
+    lastUpdated: new Date().toDateString(),
+    recentEventIds: [],
+    role: {
+      id: 'Test',
+      name: 'role',
+      permissions: []
+    },
+    email: 'yuki@example.com',
+    phones: []
+  },
+  {
+    id: '6',
+    username: 'momo_',
+    displayName: 'Momo',
+    active: true,
+    enabled: true,
+    authentication: 'LOCAL',
+    createdAt: new Date().toDateString(),
+    lastUpdated: new Date().toDateString(),
+    recentEventIds: [],
+    role: {
+      id: 'Test',
+      name: 'role',
+      permissions: []
+    },
+    email: 'momo@example.com',
+    phones: []
   }
 ];
 
@@ -95,7 +149,7 @@ const TEST_DEVICES: any[] = [
   {
     id: 'd1',
     uid: 'Primary Desktop',
-    registered: true,
+    registered: false,
     appVersion: 'Web Client',
     userAgent: '',
     iconClass: ''
@@ -103,7 +157,7 @@ const TEST_DEVICES: any[] = [
   {
     id: 'd2',
     uid: 'iOS Device',
-    registered: true,
+    registered: false,
     appVersion: 'mobile',
     userAgent: 'iOS',
     iconClass: ''
@@ -115,6 +169,30 @@ const TEST_DEVICES: any[] = [
     appVersion: 'mobile',
     userAgent: 'android',
     iconClass: ''
+  },
+  {
+    id: 'd4',
+    uid: 'Tablet Device',
+    registered: false,
+    appVersion: 'mobile',
+    userAgent: 'tablet',
+    iconClass: ''
+  },
+  {
+    id: 'd5',
+    uid: 'Backup Phone',
+    registered: false,
+    appVersion: 'mobile',
+    userAgent: 'mobile',
+    iconClass: ''
+  },
+  {
+    id: 'd6',
+    uid: 'Field Laptop',
+    registered: false,
+    appVersion: 'Web Client',
+    userAgent: '',
+    iconClass: ''
   }
 ];
 
@@ -132,6 +210,40 @@ const mockDeviceService: Partial<AdminDeviceService> & any = {
     .and.callFake((_id: string, patch: any) => {
       const updated = { ...TEST_DEVICES[0], ...patch };
       return of(updated);
+    }),
+  getDashboardDevicePage: jasmine
+    .createSpy('getDashboardDevicePage')
+    .and.callFake((options: any) => {
+      const start = options?.start || 0;
+      const limit = options?.limit || 5;
+      const term = (options?.term || '').toLowerCase();
+
+      const filteredDevices = TEST_DEVICES.filter((device) => {
+        if (options?.registered !== undefined) {
+          if (device.registered !== options.registered) {
+            return false;
+          }
+        }
+
+        if (!term) {
+          return true;
+        }
+
+        return (device.uid || '').toLowerCase().includes(term);
+      });
+
+      const devices = filteredDevices.slice(start, start + limit);
+      const nextStart =
+        start + limit < filteredDevices.length ? start + limit : null;
+      const prevStart = start - limit >= 0 ? Math.max(start - limit, 0) : null;
+
+      return of({
+        start,
+        nextStart,
+        prevStart,
+        totalCount: filteredDevices.length,
+        devices
+      });
     })
 };
 
@@ -150,16 +262,12 @@ const mockUserPagingService: Partial<UserPagingService> & any = {
   refresh: jasmine.createSpy('refresh').and.returnValue(of([])),
   users: jasmine.createSpy('users').and.callFake((_state: any) => TEST_USERS),
   count: jasmine.createSpy('count').and.returnValue(TEST_USERS.length),
-  hasNext: jasmine.createSpy('hasNext').and.returnValue(true),
-  hasPrevious: jasmine.createSpy('hasPrevious').and.returnValue(false),
-  next: jasmine.createSpy('next').and.returnValue(of([TEST_USERS[1]])),
-  previous: jasmine.createSpy('previous').and.returnValue(of([TEST_USERS[0]])),
   search: jasmine
     .createSpy('search')
     .and.callFake((_state: any, term: string) => {
       return of(
-        TEST_USERS.filter((u) =>
-          (u.displayName || '')
+        TEST_USERS.filter((user) =>
+          (user.displayName || '')
             .toLowerCase()
             .includes((term || '').toLowerCase())
         )
@@ -170,30 +278,7 @@ const mockUserPagingService: Partial<UserPagingService> & any = {
 const mockDevicePagingService: Partial<DevicePagingService> & any = {
   constructDefault: jasmine
     .createSpy('constructDefault')
-    .and.returnValue(deviceStateAndData),
-  refresh: jasmine.createSpy('refresh').and.returnValue(of([])),
-  devices: jasmine
-    .createSpy('devices')
-    .and.callFake((_state: any) => TEST_DEVICES),
-  count: jasmine.createSpy('count').and.returnValue(TEST_DEVICES.length),
-  hasNext: jasmine.createSpy('hasNext').and.returnValue(true),
-  hasPrevious: jasmine.createSpy('hasPrevious').and.returnValue(false),
-  next: jasmine.createSpy('next').and.returnValue(of([TEST_DEVICES[1]])),
-  previous: jasmine
-    .createSpy('previous')
-    .and.returnValue(of([TEST_DEVICES[0]])),
-  search: jasmine
-    .createSpy('search')
-    .and.callFake((_state: any, term: string) => {
-      return of(
-        TEST_DEVICES.filter((d) =>
-          (d.uid || '')
-            .toString()
-            .toLowerCase()
-            .includes((term || '').toLowerCase())
-        )
-      );
-    })
+    .and.returnValue(deviceStateAndData)
 };
 
 describe('AdminDashboardComponent', () => {
@@ -234,16 +319,11 @@ describe('AdminDashboardComponent', () => {
 
     (mockUserPagingService.constructDefault as jasmine.Spy).calls.reset();
     (mockUserPagingService.refresh as jasmine.Spy).calls.reset();
-    (mockDevicePagingService.constructDefault as jasmine.Spy).calls.reset();
-    (mockDevicePagingService.refresh as jasmine.Spy).calls.reset();
     (mockUserPagingService.search as jasmine.Spy).calls.reset();
-    (mockDevicePagingService.search as jasmine.Spy).calls.reset();
-    (mockUserPagingService.next as jasmine.Spy).calls.reset();
-    (mockUserPagingService.previous as jasmine.Spy).calls.reset();
-    (mockDevicePagingService.next as jasmine.Spy).calls.reset();
-    (mockDevicePagingService.previous as jasmine.Spy).calls.reset();
+    (mockDevicePagingService.constructDefault as jasmine.Spy).calls.reset();
     (mockUserService.updateUser as jasmine.Spy).calls.reset();
     (mockDeviceService.updateDevice as jasmine.Spy).calls.reset();
+    (mockDeviceService.getDashboardDevicePage as jasmine.Spy).calls.reset();
 
     fixture = TestBed.createComponent(AdminDashboardComponent);
     component = fixture.componentInstance;
@@ -254,12 +334,17 @@ describe('AdminDashboardComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should call paging refresh in ngOnInit and populate lists', fakeAsync(() => {
+  it('should initialize paging data and populate dashboard lists', fakeAsync(() => {
     tick();
+
+    expect(mockUserPagingService.constructDefault).toHaveBeenCalled();
+    expect(mockDevicePagingService.constructDefault).toHaveBeenCalled();
     expect(mockUserPagingService.refresh).toHaveBeenCalled();
-    expect(mockDevicePagingService.refresh).toHaveBeenCalled();
-    expect(component.inactiveUsers.length).toBe(TEST_USERS.length);
-    expect(component.unregisteredDevices.length).toBe(TEST_DEVICES.length);
+    expect(mockDeviceService.getDashboardDevicePage).toHaveBeenCalled();
+
+    expect(component.inactiveUsers).toEqual(TEST_USERS.slice(0, 5));
+    expect(component.unregisteredDevices).toEqual(TEST_DEVICES.slice(0, 5));
+    expect(component.deviceTotalCount).toBe(TEST_DEVICES.length);
   }));
 
   it('should activate user and emit event', fakeAsync(() => {
@@ -268,12 +353,13 @@ describe('AdminDashboardComponent', () => {
     spyOn(component.onUserActivated, 'emit');
 
     (mockUserService.updateUser as jasmine.Spy).and.callFake(
-      (_id: string, _user: any) => of(_user)
+      (_id: string, updatedUser: any) => of(updatedUser)
     );
 
     component.activateUser(user);
     tick();
 
+    expect(mockUserService.updateUser).toHaveBeenCalledWith(user.id, user);
     expect(user.active).toBeTrue();
     expect(component.onUserActivated.emit).toHaveBeenCalledWith({ user });
   }));
@@ -283,9 +369,15 @@ describe('AdminDashboardComponent', () => {
     component.onDeviceEnabled = new EventEmitter();
     spyOn(component.onDeviceEnabled, 'emit');
 
-    component.registerDevice(new MouseEvent('click'), device);
+    const event = new MouseEvent('click');
+    spyOn(event, 'preventDefault');
+    spyOn(event, 'stopPropagation');
+
+    component.registerDevice(event, device);
     tick();
 
+    expect(event.preventDefault).toHaveBeenCalled();
+    expect(event.stopPropagation).toHaveBeenCalled();
     expect(mockDeviceService.updateDevice).toHaveBeenCalledWith(device.id, {
       registered: true
     });
@@ -301,44 +393,86 @@ describe('AdminDashboardComponent', () => {
 
   it('should search users', fakeAsync(() => {
     component.userSearch = 'Lily Hoshikawa';
+
     component.search();
     tick();
+
+    expect(mockUserPagingService.search).toHaveBeenCalledWith(
+      userStateAndData.inactive,
+      'Lily Hoshikawa'
+    );
     expect(component.inactiveUsers).toEqual([TEST_USERS[0]]);
   }));
 
   it('should search devices', fakeAsync(() => {
     component.deviceSearch = 'iOS Device';
+
     component.searchDevices();
     tick();
+
+    expect(mockDeviceService.getDashboardDevicePage).toHaveBeenCalledWith({
+      start: 0,
+      limit: component.devicePageSize,
+      registered: false,
+      user: true,
+      includePagination: true,
+      term: 'iOS Device'
+    });
     expect(component.unregisteredDevices).toEqual([TEST_DEVICES[1]]);
+    expect(component.deviceTotalCount).toBe(1);
   }));
 
   it('should handle previous and next user pages', fakeAsync(() => {
+    tick();
+
     expect(component.hasNext()).toBeTrue();
     expect(component.hasPrevious()).toBeFalse();
 
     component.next();
     tick();
-    expect(component.inactiveUsers).toEqual([TEST_USERS[1]]);
+
+    expect(component.userPageIndex).toBe(1);
+    expect(component.inactiveUsers).toEqual([TEST_USERS[5]]);
+    expect(component.hasNext()).toBeFalse();
+    expect(component.hasPrevious()).toBeTrue();
 
     component.previous();
     tick();
-    expect(component.inactiveUsers).toEqual([TEST_USERS[0]]);
+
+    expect(component.userPageIndex).toBe(0);
+    expect(component.inactiveUsers).toEqual(TEST_USERS.slice(0, 5));
   }));
 
   it('should handle previous and next device pages', fakeAsync(() => {
+    tick();
+
     expect(component.hasNextDevice()).toBeTrue();
     expect(component.hasPreviousDevice()).toBeFalse();
 
     component.nextDevice();
     tick();
-    expect(component.unregisteredDevices).toEqual([TEST_DEVICES[1]]);
+
+    expect(component.deviceStart).toBe(5);
+    expect(component.unregisteredDevices).toEqual([TEST_DEVICES[5]]);
+    expect(component.hasNextDevice()).toBeFalse();
+    expect(component.hasPreviousDevice()).toBeTrue();
 
     component.previousDevice();
     tick();
-    expect(component.unregisteredDevices).toEqual([TEST_DEVICES[0]]);
+
+    expect(component.deviceStart).toBe(0);
+    expect(component.unregisteredDevices).toEqual(TEST_DEVICES.slice(0, 5));
   }));
 
+  it('should not navigate to a user without an id', () => {
+    const router = TestBed.inject(RouterTestingModule as any);
+
+    component.goToUser(null as any);
+    component.goToUser({});
+
+    expect(router).toBeTruthy();
+  });
+
   it('should set icon classes correctly', () => {
     expect(component.iconClass(TEST_DEVICES[0])).toContain('desktop');
     expect(component.iconClass(TEST_DEVICES[2])).toContain('android');
@@ -346,6 +480,12 @@ describe('AdminDashboardComponent', () => {
     expect(
       component.iconClass({ ...TEST_DEVICES[1], userAgent: 'mobile' })
     ).toContain('mobile');
+    expect(
+      component.iconClass({
+        ...TEST_DEVICES[1],
+        iconClass: 'custom-device-icon'
+      })
+    ).toBe('custom-device-icon');
     expect(component.iconClass(null as any)).toEqual('');
   });
 });
diff --git a/web-app/admin/src/app/admin/admin-feeds/admin-feed/admin-feed.component.spec.ts b/web-app/admin/src/app/admin/admin-feeds/admin-feed/admin-feed.component.spec.ts
index 8ce64885c..442949c61 100644
--- a/web-app/admin/src/app/admin/admin-feeds/admin-feed/admin-feed.component.spec.ts
+++ b/web-app/admin/src/app/admin/admin-feeds/admin-feed/admin-feed.component.spec.ts
@@ -1,10 +1,15 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { CUSTOM_ELEMENTS_SCHEMA, ElementRef, NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+  CUSTOM_ELEMENTS_SCHEMA,
+  ElementRef,
+  NO_ERRORS_SCHEMA
+} from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, convertToParamMap } from '@angular/router';
-import { MatDialog as MatDialog } from '@angular/material/dialog';
-import { MatSnackBar as MatSnackBar } from '@angular/material/snack-bar';
-import { of, throwError } from 'rxjs'
+import { MatDialog } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { of, throwError } from 'rxjs';
 
 import { AdminFeedComponent } from './admin-feed.component';
 import { AdminUserService } from '../../services/admin-user.service';
@@ -50,6 +55,29 @@ describe('AdminFeedComponent', () => {
     summary: 'Example Summary'
   } as any;
 
+  const mockFeedEvents = [
+    {
+      id: 'event-1',
+      name: 'Event One',
+      feedId: 'feed-1'
+    },
+    {
+      id: 'event-2',
+      name: 'Event Two',
+      feed: { id: 'feed-1' }
+    },
+    {
+      id: 'event-3',
+      name: 'Event Three',
+      feeds: [{ id: 'feed-1' }]
+    },
+    {
+      id: 'event-4',
+      name: 'Different Feed Event',
+      feedId: 'feed-2'
+    }
+  ] as any[];
+
   beforeEach(waitForAsync(() => {
     feedServiceSpy = jasmine.createSpyObj<FeedService>('FeedService', [
       'fetchFeed',
@@ -85,12 +113,18 @@ describe('AdminFeedComponent', () => {
 
     feedServiceSpy.fetchFeed.and.returnValue(of(mockFeed));
     feedServiceSpy.fetchServiceType.and.returnValue(of(mockServiceType));
+
     adminEventsServiceSpy.getEvents.and.returnValue(
-      of({ items: [], totalCount: 0 } as any)
+      of({
+        items: mockFeedEvents,
+        totalCount: mockFeedEvents.length
+      } as any)
     );
+
     eventServiceSpy.addFeed.and.returnValue(
       of({ name: 'Example Event' } as any)
     );
+
     eventServiceSpy.removeFeed.and.returnValue(of({} as any));
     feedServiceSpy.deleteFeed.and.returnValue(of({} as any));
 
@@ -99,7 +133,7 @@ describe('AdminFeedComponent', () => {
     } as any);
 
     TestBed.configureTestingModule({
-      imports: [FormsModule, ReactiveFormsModule],
+      imports: [FormsModule, ReactiveFormsModule, NoopAnimationsModule],
       declarations: [AdminFeedComponent],
       providers: [
         { provide: FeedService, useValue: feedServiceSpy },
@@ -111,7 +145,7 @@ describe('AdminFeedComponent', () => {
         { provide: Router, useValue: routerSpy },
         { provide: ActivatedRoute, useValue: routeStub }
       ],
-      schemas: [ CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA ]
+      schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
     }).compileComponents();
   }));
 
@@ -135,12 +169,13 @@ describe('AdminFeedComponent', () => {
     expect(adminEventsServiceSpy.getEvents).toHaveBeenCalledWith({
       feedId: 'feed-1',
       page: 0,
-      page_size: 10
+      page_size: 1000
     } as any);
 
     expect(component.feed.id).toBe('feed-1');
     expect(component.feedServiceType.id).toBe('service-type-1');
-    expect(component.totalFeedEvents).toBe(0);
+    expect(component.totalFeedEvents).toBe(3);
+    expect(component.feedEvents.length).toBe(3);
   });
 
   it('should handle user permissions when getMyself succeeds', () => {
@@ -150,76 +185,218 @@ describe('AdminFeedComponent', () => {
     expect(component.hasUpdateEventPermission).toBeFalse();
   });
 
+  it('should set permissions to true when user has permissions', () => {
+    adminUserServiceSpy.getMyself.and.returnValue(
+      of({
+        id: 'user-1',
+        role: {
+          permissions: ['FEEDS_CREATE_FEED', 'UPDATE_EVENT']
+        }
+      } as any)
+    );
+
+    const f2 = TestBed.createComponent(AdminFeedComponent);
+    const c2 = f2.componentInstance;
+
+    f2.detectChanges();
+
+    expect(c2.hasFeedCreatePermission).toBeTrue();
+    expect(c2.hasFeedEditPermission).toBeTrue();
+    expect(c2.hasFeedDeletePermission).toBeTrue();
+    expect(c2.hasUpdateEventPermission).toBeTrue();
+  });
+
   it('should set permissions to false when getMyself errors', () => {
-    adminUserServiceSpy.getMyself.and.returnValue(throwError(() => new Error('fail')))
-  
-    const f2 = TestBed.createComponent(AdminFeedComponent)
-    const c2 = f2.componentInstance
-    f2.detectChanges()
-  
-    expect(c2.hasFeedCreatePermission).toBeFalse()
-    expect(c2.hasFeedEditPermission).toBeFalse()
-    expect(c2.hasFeedDeletePermission).toBeFalse()
-    expect(c2.hasUpdateEventPermission).toBeFalse()
-  })   
+    adminUserServiceSpy.getMyself.and.returnValue(
+      throwError(() => new Error('fail'))
+    );
+
+    const f2 = TestBed.createComponent(AdminFeedComponent);
+    const c2 = f2.componentInstance;
+
+    f2.detectChanges();
+
+    expect(c2.hasFeedCreatePermission).toBeFalse();
+    expect(c2.hasFeedEditPermission).toBeFalse();
+    expect(c2.hasFeedDeletePermission).toBeFalse();
+    expect(c2.hasUpdateEventPermission).toBeFalse();
+    expect(feedServiceSpy.fetchFeed).toHaveBeenCalledWith('feed-1');
+  });
 
   it('toggleNewEvent should flip addEvent and try to focus eventSelect when opening', () => {
     const focusSpy = jasmine.createSpy('focus');
+
     component.eventSelect = {
       nativeElement: { focus: focusSpy }
     } as ElementRef;
 
     jasmine.clock().install();
+
     component.toggleNewEvent();
     jasmine.clock().tick(0);
+
     jasmine.clock().uninstall();
 
     expect(component.addEvent).toBeTrue();
     expect(focusSpy).toHaveBeenCalled();
   });
 
-  it('addFeedToEvent should call addFeed and show success snackbar', () => {
+  it('addFeedToEvent should call addFeed, reload events, and show success snackbar', () => {
     const autocompleteEvent = { option: { id: 99 } } as any;
-    component.addFeedToEvent(autocompleteEvent);
 
-    component.feed = mockFeed;
+    adminEventsServiceSpy.getEvents.calls.reset();
+
     component.addFeedToEvent(autocompleteEvent);
 
     expect(eventServiceSpy.addFeed).toHaveBeenCalledWith('99', `"feed-1"`);
+    expect(adminEventsServiceSpy.getEvents).toHaveBeenCalledWith({
+      feedId: 'feed-1',
+      page: 0,
+      page_size: 1000
+    } as any);
     expect(snackBarSpy.open).toHaveBeenCalled();
+    expect(component.addEvent).toBeFalse();
+    expect(component.eventModel).toBeNull();
   });
 
-  it('removeFeedFromEvent should stop propagation, call removeFeed, and show snackbar', () => {
+  it('addFeedToEvent should show failure snackbar when addFeed errors', () => {
+    const autocompleteEvent = { option: { id: 99 } } as any;
+
+    eventServiceSpy.addFeed.and.returnValue(
+      throwError(() => new Error('add failed'))
+    );
+
+    component.addFeedToEvent(autocompleteEvent);
+
+    expect(eventServiceSpy.addFeed).toHaveBeenCalledWith('99', `"feed-1"`);
+    expect(snackBarSpy.open).toHaveBeenCalledWith(
+      'Failed to add feed to event',
+      undefined,
+      { duration: 5000 }
+    );
+  });
+
+  it('removeFeedFromEvent should stop propagation, call removeFeed, reload events, and show snackbar', () => {
     const stopSpy = jasmine.createSpy('stopPropagation');
     const mouseEvent = { stopPropagation: stopSpy } as any;
 
-    component.feed = mockFeed;
-    component.removeFeedFromEvent(mouseEvent, { id: 123 });
+    adminEventsServiceSpy.getEvents.calls.reset();
+
+    component.removeFeedFromEvent(mouseEvent, { id: 123, name: 'Example Event' });
 
     expect(stopSpy).toHaveBeenCalled();
     expect(eventServiceSpy.removeFeed).toHaveBeenCalledWith('123', 'feed-1');
+    expect(adminEventsServiceSpy.getEvents).toHaveBeenCalledWith({
+      feedId: 'feed-1',
+      page: 0,
+      page_size: 1000
+    } as any);
     expect(snackBarSpy.open).toHaveBeenCalled();
   });
 
-  it('onEventsPageChange should update paging and reload events', () => {
-    component.feed = mockFeed;
+  it('removeFeedFromEvent should show failure snackbar when removeFeed errors', () => {
+    const stopSpy = jasmine.createSpy('stopPropagation');
+    const mouseEvent = { stopPropagation: stopSpy } as any;
+
+    eventServiceSpy.removeFeed.and.returnValue(
+      throwError(() => new Error('remove failed'))
+    );
+
+    component.removeFeedFromEvent(mouseEvent, { id: 123 });
+
+    expect(stopSpy).toHaveBeenCalled();
+    expect(eventServiceSpy.removeFeed).toHaveBeenCalledWith('123', 'feed-1');
+    expect(snackBarSpy.open).toHaveBeenCalledWith(
+      'Failed to remove feed from event',
+      undefined,
+      { duration: 5000 }
+    );
+  });
 
+  it('onEventsPageChange should update paging and page events locally', () => {
     adminEventsServiceSpy.getEvents.calls.reset();
 
     component.onEventsPageChange({ pageIndex: 2, pageSize: 25 });
 
     expect(component.eventsPage).toBe(2);
     expect(component.eventsPerPage).toBe(25);
-    expect(adminEventsServiceSpy.getEvents).toHaveBeenCalledWith({
-      feedId: 'feed-1',
-      page: 2,
-      page_size: 25
-    } as any);
+    expect(adminEventsServiceSpy.getEvents).not.toHaveBeenCalled();
   });
 
-  it('deleteFeed should open dialog and do nothing when dialog returns false', () => {
-    component.feed = mockFeed;
+  it('loadAvailableEvents should search events and exclude events already attached to the feed', (done) => {
+    adminEventsServiceSpy.getEvents.and.returnValue(
+      of({
+        items: [
+          {
+            id: 'available-1',
+            name: 'Available Event',
+            acl: {
+              'user-1': {
+                permissions: ['update']
+              }
+            }
+          },
+          {
+            id: 'attached-1',
+            name: 'Attached Event',
+            feedId: 'feed-1',
+            acl: {
+              'user-1': {
+                permissions: ['update']
+              }
+            }
+          }
+        ]
+      } as any)
+    );
 
+    component.loadAvailableEvents('available').subscribe((events) => {
+      expect(adminEventsServiceSpy.getEvents).toHaveBeenCalledWith({
+        term: 'available',
+        excludeFeedId: 'feed-1',
+        page: 0,
+        page_size: 1000
+      } as any);
+      expect(events.length).toBe(1);
+      expect(events[0].id).toBe('available-1');
+      done();
+    });
+  });
+
+  it('loadAvailableEvents should keep all non-feed events when user has UPDATE_EVENT permission', (done) => {
+    adminUserServiceSpy.getMyself.and.returnValue(
+      of({
+        id: 'user-1',
+        role: {
+          permissions: ['UPDATE_EVENT']
+        }
+      } as any)
+    );
+
+    const f2 = TestBed.createComponent(AdminFeedComponent);
+    const c2 = f2.componentInstance;
+
+    adminEventsServiceSpy.getEvents.and.returnValue(
+      of({
+        items: [
+          {
+            id: 'available-without-acl',
+            name: 'Available Without ACL'
+          }
+        ]
+      } as any)
+    );
+
+    f2.detectChanges();
+
+    c2.loadAvailableEvents('').subscribe((events) => {
+      expect(events.length).toBe(1);
+      expect(events[0].id).toBe('available-without-acl');
+      done();
+    });
+  });
+
+  it('deleteFeed should open dialog and do nothing when dialog returns false', () => {
     dialogSpy.open.and.returnValue({ afterClosed: () => of(false) } as any);
 
     component.deleteFeed();
@@ -230,19 +407,45 @@ describe('AdminFeedComponent', () => {
   });
 
   it('deleteFeed should delete and navigate back to feeds when dialog returns true', () => {
-    component.feed = mockFeed;
-  
     dialogSpy.open.and.returnValue({ afterClosed: () => of(true) } as any);
-  
+
     component.deleteFeed();
-  
+
     expect(dialogSpy.open).toHaveBeenCalled();
     expect(feedServiceSpy.deleteFeed).toHaveBeenCalledWith(mockFeed);
-  
+
     expect(routerSpy.navigate).toHaveBeenCalledWith(
       ['../../feeds'],
-      jasmine.objectContaining({ relativeTo: jasmine.any(Object) })
+      jasmine.objectContaining({ relativeTo: routeStub })
     );
   });
-  
-});
+
+  it('tagEventsAutocompleteOverlayPane should add overlay pane class when autocomplete panel exists', () => {
+    const panel = document.createElement('div');
+    panel.id = 'autocomplete-id';
+
+    const overlayPane = document.createElement('div');
+    overlayPane.classList.add('cdk-overlay-pane');
+    overlayPane.appendChild(panel);
+    document.body.appendChild(overlayPane);
+
+    component.eventAutocompleteTrigger = {
+      autocomplete: {
+        id: 'autocomplete-id'
+      }
+    } as any;
+
+    jasmine.clock().install();
+
+    component.tagEventsAutocompleteOverlayPane();
+    jasmine.clock().tick(0);
+
+    jasmine.clock().uninstall();
+
+    expect(
+      overlayPane.classList.contains('events-add-autocomplete-overlay-pane')
+    ).toBeTrue();
+
+    document.body.removeChild(overlayPane);
+  });
+});
\ No newline at end of file

From 813c9c6c84957005d6a944af1ed2ae7106e7a063 Mon Sep 17 00:00:00 2001
From: Ryan <ryanslatten@vt.edu>
Date: Thu, 30 Apr 2026 19:16:15 -0400
Subject: [PATCH 19/19] fix add form css

---
 instance/package.json                         |  2 +-
 package-lock.json                             |  4 +-
 package.json                                  |  2 +-
 service/npm-shrinkwrap.json                   |  4 +-
 service/package.json                          |  2 +-
 .../src/app/logins/logins.component.scss      | 55 ++++++++++++++-----
 .../observation-edit.component.scss           |  3 +-
 web-app/package-lock.json                     |  6 +-
 web-app/package.json                          |  2 +-
 web-app/projects/core-lib/package-lock.json   |  4 +-
 web-app/projects/core-lib/package.json        |  2 +-
 .../observation-edit.component.scss           |  3 +-
 12 files changed, 58 insertions(+), 31 deletions(-)

diff --git a/instance/package.json b/instance/package.json
index 7ba743619..7a7f6a22f 100644
--- a/instance/package.json
+++ b/instance/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ngageoint/mage.dev-instance",
-  "version": "6.6.6",
+  "version": "6.6.7",
   "description": "Assemble a Mage Server deployment from the core service, the web-app, and selected plugins.  This is primarily a development tool because the dependencies point to relative directories instead of production packages.  This can however serve as a starting point to create a production Mage instance package.json.",
   "scripts": {
     "start": "npm run start:dev",
diff --git a/package-lock.json b/package-lock.json
index 7217410aa..eccf40f2a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ngageoint/mage.project",
-  "version": "6.6.6",
+  "version": "6.6.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ngageoint/mage.project",
-      "version": "6.6.6",
+      "version": "6.6.7",
       "hasInstallScript": true,
       "dependencies": {
         "@angular/cdk": "^17.3.10",
diff --git a/package.json b/package.json
index 13c41ce25..8ae0f5a43 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "@ngageoint/mage.project",
   "description": "This is the root package definition for the mage-server monorepo.",
   "private": true,
-  "version": "6.6.6",
+  "version": "6.6.7",
   "files": [],
   "scripts": {
     "postinstall": "npm-run-all service:ci web-app:ci arcgis:ci sftp:ci nga-msi:ci",
diff --git a/service/npm-shrinkwrap.json b/service/npm-shrinkwrap.json
index de95baa63..2182d530b 100644
--- a/service/npm-shrinkwrap.json
+++ b/service/npm-shrinkwrap.json
@@ -1,12 +1,12 @@
 {
   "name": "@ngageoint/mage.service",
-  "version": "6.6.6",
+  "version": "6.6.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ngageoint/mage.service",
-      "version": "6.6.6",
+      "version": "6.6.7",
       "dependencies": {
         "@ngageoint/geopackage": "4.2.6",
         "@ngageoint/mongodb-migrations": "1.0.0",
diff --git a/service/package.json b/service/package.json
index df1c5ef11..3261bc042 100644
--- a/service/package.json
+++ b/service/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ngageoint/mage.service",
-  "version": "6.6.6",
+  "version": "6.6.7",
   "displayName": "Mage Service",
   "description": "Mage is a geospatial situational awareness and data collection platform.  The Mage Service is the ReST service API that the Mage client apps use to interact with Mage data.",
   "keywords": [
diff --git a/web-app/admin/src/app/logins/logins.component.scss b/web-app/admin/src/app/logins/logins.component.scss
index 1ade040c9..8c7f5a9dd 100644
--- a/web-app/admin/src/app/logins/logins.component.scss
+++ b/web-app/admin/src/app/logins/logins.component.scss
@@ -322,15 +322,11 @@ $login-pagination-height: 40px;
 }
 
 .empty-table-row {
-  height: calc(
-    #{$login-table-frame-height} - #{$login-pagination-height} - 40px
-  );
+  height: calc(#{$login-table-frame-height} - #{$login-pagination-height} - 40px);
 }
 
 .empty-table-row td {
-  height: calc(
-    #{$login-table-frame-height} - #{$login-pagination-height} - 40px
-  ) !important;
+  height: calc(#{$login-table-frame-height} - #{$login-pagination-height} - 40px) !important;
   padding: 0 !important;
   border-bottom: none !important;
   white-space: normal !important;
@@ -339,12 +335,8 @@ $login-pagination-height: 40px;
 }
 
 .empty-state {
-  height: calc(
-    #{$login-table-frame-height} - #{$login-pagination-height} - 40px
-  );
-  min-height: calc(
-    #{$login-table-frame-height} - #{$login-pagination-height} - 40px
-  );
+  height: calc(#{$login-table-frame-height} - #{$login-pagination-height} - 40px);
+  min-height: calc(#{$login-table-frame-height} - #{$login-pagination-height} - 40px);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -384,11 +376,44 @@ $login-pagination-height: 40px;
 
   button {
     min-width: auto;
-    padding: 0;
+    padding: 0 8px;
     font-size: 12px;
     letter-spacing: 0.04em;
     text-transform: none !important;
-    color: #8b8b8b;
+    border-radius: 4px;
+    transition: color 160ms ease, background-color 160ms ease, opacity 160ms ease;
+
+    &:not(:disabled):not(.mat-mdc-button-disabled) {
+      color: #1e88e5 !important;
+      cursor: pointer;
+
+      --mdc-text-button-label-text-color: #1e88e5;
+      --mat-text-button-state-layer-color: #1e88e5;
+
+      &:hover {
+        background: rgba(30, 136, 229, 0.08);
+        color: #1565c0 !important;
+
+        --mdc-text-button-label-text-color: #1565c0;
+      }
+
+      &:focus-visible {
+        outline: 2px solid rgba(30, 136, 229, 0.35);
+        outline-offset: 2px;
+      }
+    }
+
+    &:disabled,
+    &[disabled],
+    &.mat-mdc-button-disabled {
+      color: #b8b8b8 !important;
+      opacity: 0.55;
+      cursor: not-allowed;
+      pointer-events: none;
+
+      --mdc-text-button-disabled-label-text-color: #b8b8b8;
+      --mdc-text-button-label-text-color: #b8b8b8;
+    }
   }
 }
 
@@ -415,4 +440,4 @@ $login-pagination-height: 40px;
   .integrated-navbar .suggestions {
     width: 100%;
   }
-}
+}
\ No newline at end of file
diff --git a/web-app/admin/src/app/observation/observation-edit/observation-edit.component.scss b/web-app/admin/src/app/observation/observation-edit/observation-edit.component.scss
index 14fd92020..119ec5110 100644
--- a/web-app/admin/src/app/observation/observation-edit/observation-edit.component.scss
+++ b/web-app/admin/src/app/observation/observation-edit/observation-edit.component.scss
@@ -89,6 +89,7 @@
   position: absolute;
   bottom: 16px;
   right: 16px;
+  z-index: 1;
 }
 
 .extended-fab-button {
@@ -110,7 +111,7 @@
   }
 }
 
-:host .extended-fab-button > ::ng-deep.mat-button-wrapper {
+:host .extended-fab-button> ::ng-deep.mat-button-wrapper {
   padding: unset;
 }
 
diff --git a/web-app/package-lock.json b/web-app/package-lock.json
index e68d69265..a9eed9b85 100644
--- a/web-app/package-lock.json
+++ b/web-app/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ngageoint/mage.web-app",
-  "version": "6.6.6",
+  "version": "6.6.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ngageoint/mage.web-app",
-      "version": "6.6.6",
+      "version": "6.6.7",
       "license": "Apache-2.0",
       "dependencies": {
         "@angular/animations": "17.3.12",
@@ -9661,7 +9661,7 @@
       }
     },
     "node_modules/engine.io": {
-      "version": "6.6.6",
+      "version": "6.6.7",
       "resolved": "https://registry.npmjs.org/engine.io/-/engine.io-6.6.6.tgz",
       "integrity": "sha512-U2SN0w3OpjFRVlrc17E6TMDmH58Xl9rai1MblNjAdwWp07Kk+llmzX0hjDpQdrDGzwmvOtgM5yI+meYX6iZ2xA==",
       "dev": true,
diff --git a/web-app/package.json b/web-app/package.json
index 9a72ff978..d2cf8b2fa 100644
--- a/web-app/package.json
+++ b/web-app/package.json
@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@ngageoint/mage.web-app",
-  "version": "6.6.6",
+  "version": "6.6.7",
   "description": "The Mage web-app is the UI for interacting with the Mage service in a web browser.",
   "keywords": [
     "NGA",
diff --git a/web-app/projects/core-lib/package-lock.json b/web-app/projects/core-lib/package-lock.json
index 97ccb7df1..09d94ff3e 100644
--- a/web-app/projects/core-lib/package-lock.json
+++ b/web-app/projects/core-lib/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@ngageoint/mage.web-core-lib",
-  "version": "6.6.6",
+  "version": "6.6.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@ngageoint/mage.web-core-lib",
-      "version": "6.6.6",
+      "version": "6.6.7",
       "dependencies": {
         "@rollup/plugin-commonjs": "25.0.8",
         "@rollup/plugin-node-resolve": "15.3.1",
diff --git a/web-app/projects/core-lib/package.json b/web-app/projects/core-lib/package.json
index d9b6a2857..29fd3702d 100644
--- a/web-app/projects/core-lib/package.json
+++ b/web-app/projects/core-lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ngageoint/mage.web-core-lib",
-  "version": "6.6.6",
+  "version": "6.6.7",
   "repository": {
     "type": "git",
     "url": "https://github.com/ngageoint/mage-server.git"
diff --git a/web-app/src/app/observation/observation-edit/observation-edit.component.scss b/web-app/src/app/observation/observation-edit/observation-edit.component.scss
index 14fd92020..119ec5110 100644
--- a/web-app/src/app/observation/observation-edit/observation-edit.component.scss
+++ b/web-app/src/app/observation/observation-edit/observation-edit.component.scss
@@ -89,6 +89,7 @@
   position: absolute;
   bottom: 16px;
   right: 16px;
+  z-index: 1;
 }
 
 .extended-fab-button {
@@ -110,7 +111,7 @@
   }
 }
 
-:host .extended-fab-button > ::ng-deep.mat-button-wrapper {
+:host .extended-fab-button> ::ng-deep.mat-button-wrapper {
   padding: unset;
 }