diff --git a/src/app/shared/forms/planet-tag-input-dialog.component.html b/src/app/shared/forms/planet-tag-input-dialog.component.html
index b26ea2446b..5c7957d719 100644
--- a/src/app/shared/forms/planet-tag-input-dialog.component.html
+++ b/src/app/shared/forms/planet-tag-input-dialog.component.html
@@ -18,7 +18,10 @@
       <mat-form-field>
         <mat-select i18n-placeholder placeholder="Subcollection of..." formControlName="attachedTo">
           <mat-option i18n>None</mat-option>
-          <mat-option *ngFor="let tag of tags" [value]="tag._id || tag.name">{{tag.name}}</mat-option>
+          <mat-option *ngFor="let tag of tags" [value]="tag._id || tag.name">
+            <span class="truncated-name mat-body-2">{{ tag.name }}</span>
+            <span class="count">({{ tag.count || 0 }})</span>
+          </mat-option>
         </mat-select>
       </mat-form-field>
       <span><button type="button" i18n mat-raised-button color="primary" [disabled]="!addTagForm.pending && !addTagForm.valid" (click)="addLabel()">Add Collection</button></span>
@@ -26,26 +29,26 @@
   </mat-expansion-panel>
   <mat-action-list *ngIf="selectMany">
     <ng-container *ngFor="let tag of tags">
-      <mat-list-item (click)="tag.subTags.length === 0 ? tagChange(tag._id || tag.name) : toggleSubcollection($event,tag._id)" class="cursor-pointer">
-        <p matLine>
-          <planet-tag-input-toggle-icon *ngIf="tag.subTags.length > 0" [isOpen]="subcollectionIsOpen.get(tag._id)"></planet-tag-input-toggle-icon>
-          <mat-checkbox *ngIf="tag.subTags.length === 0" (change)="checkboxChange($event, tag._id || tag.name)" [checked]="isInMap(tag._id || tag.name, selected)" [indeterminate]="isInMap(tag._id || tag.name, indeterminate)"></mat-checkbox>
-          <span [ngClass]="{ 'mat-body-2': tag.subTags.length > 0, 'mat-body-1': tag.subTags.length === 0 }">{{tag.name + ' (' + (tag.count || 0) + ')'}}</span>
-          <button mat-stroked-button *ngIf="isUserAdmin" (click)="editTagClick($event,tag)" i18n>Edit</button>
-          <span i18n-matTooltip matTooltip="You may only delete a collection with no subcollections" [matTooltipDisabled]="tag.subTags.length === 0">
-            <button mat-stroked-button *ngIf="isUserAdmin" [disabled]="tag.subTags.length > 0" (click)="deleteTag($event,tag)" i18n>Delete</button>
-          </span>
-        </p>
+      <mat-list-item (click)="tag.subTags.length === 0 ? tagChange(tag._id || tag.name) : toggleSubcollection($event, tag._id)" class="cursor-pointer list-item-spacing">
+        <planet-tag-input-toggle-icon *ngIf="tag.subTags.length > 0" [isOpen]="subcollectionIsOpen.get(tag._id)" class="icon-spacing"></planet-tag-input-toggle-icon>
+        <mat-checkbox *ngIf="tag.subTags.length === 0" (change)="checkboxChange($event, tag._id || tag.name)" [checked]="isInMap(tag._id || tag.name, selected)" [indeterminate]="isInMap(tag._id || tag.name, indeterminate)" class="checkbox-spacing"></mat-checkbox>
+        <span class="truncated-name mat-body-2">{{ tag.name }}</span>
+        <span class="count">({{ tag.count || 0 }})</span>
+        <span class="toolbar-fill"></span>
+        <button mat-stroked-button *ngIf="isUserAdmin" (click)="editTagClick($event, tag)" i18n class="button-spacing">Edit</button>
+        <span i18n-matTooltip matTooltip="You may only delete a collection with no subcollections" [matTooltipDisabled]="tag.subTags.length === 0">
+          <button mat-stroked-button *ngIf="isUserAdmin" [disabled]="tag.subTags.length > 0" (click)="deleteTag($event, tag)" i18n>Delete</button>
+        </span>
       </mat-list-item>
       <ng-container *ngIf="subcollectionIsOpen.get(tag._id)">
-        <mat-list-item *ngFor="let subTag of tag.subTags" (click)="tagChange(subTag._id || subTag.name, { parentTag: tag })" class="cursor-pointer">
-          <mat-icon mat-list-icon>subdirectory_arrow_right</mat-icon>
-          <p matLine>
-            <mat-checkbox (change)="checkboxChange($event, subTag._id || subTag.name)" [checked]="isInMap(subTag._id || subTag.name, selected)" [indeterminate]="isInMap(subTag._id || subTag.name, indeterminate)"></mat-checkbox>
-            <span class="mat-body-1">{{subTag.name + ' (' + (subTag.count || 0) + ')'}}</span>
-            <button mat-stroked-button *ngIf="isUserAdmin" (click)="editTagClick($event,subTag)" i18n>Edit</button>
-            <button mat-stroked-button *ngIf="isUserAdmin" (click)="deleteTag($event,subTag)" i18n>Delete</button>
-          </p>
+        <mat-list-item *ngFor="let subTag of tag.subTags" (click)="tagChange(subTag._id || subTag.name, { parentTag: tag })" class="cursor-pointer list-item-spacing">
+          <mat-icon mat-list-icon class="icon-spacing">subdirectory_arrow_right</mat-icon>
+          <mat-checkbox (change)="checkboxChange($event, subTag._id || subTag.name)" [checked]="isInMap(subTag._id || subTag.name, selected)" [indeterminate]="isInMap(subTag._id || subTag.name, indeterminate)" class="checkbox-spacing"></mat-checkbox>
+          <span class="truncated-name mat-body-2">{{ tag.name }}</span>
+          <span class="count">({{ tag.count || 0 }})</span>
+          <span class="toolbar-fill"></span>
+          <button mat-stroked-button *ngIf="isUserAdmin" (click)="editTagClick($event, subTag)" i18n class="button-spacing">Edit</button>
+          <button mat-stroked-button *ngIf="isUserAdmin" (click)="deleteTag($event, subTag)" i18n>Delete</button>
         </mat-list-item>
       </ng-container>
       <mat-divider></mat-divider>
@@ -54,21 +57,21 @@
   <mat-nav-list *ngIf="!selectMany">
     <mat-list-item (click)="selectOne('')" i18n>All</mat-list-item>
     <ng-container *ngFor="let tag of tags">
-      <mat-list-item class="tag-text" (click)="tag.subTags.length === 0 ? selectOne(tag._id || tag.name) : toggleSubcollection($event, tag._id)" 
-        [ngClass]="{ 'mat-body-2': tag.subTags.length > 0 }"
-      >
-        {{ (tag.name + ' (' + (tag.count || 0) + ')') | slice:0:30 }}{{ (tag.name.length + tag.count.toString().length > 30) ? '...' : '' }}
+      <mat-list-item class="tag-text" (click)="tag.subTags.length === 0 ? selectOne(tag._id || tag.name) : toggleSubcollection($event, tag._id)" [ngClass]="{ 'mat-body-2': tag.subTags.length > 0 }">
+        <span class="truncated-name mat-body-2">{{ tag.name }}</span>
+        <span class="count">({{ tag.count || 0 }})</span>
         <planet-tag-input-toggle-icon *ngIf="tag.subTags.length > 0" [isOpen]="subcollectionIsOpen.get(tag._id)"></planet-tag-input-toggle-icon>
         <span class="toolbar-fill"></span>
         <button mat-stroked-button *ngIf="isUserAdmin" (click)="editTagClick($event,tag)" i18n>Edit</button>
         <span i18n-matTooltip matTooltip="You may only delete a collection with no subcollections" [matTooltipDisabled]="tag.subTags.length === 0">
-          <button mat-stroked-button *ngIf="isUserAdmin" [disabled]="tag.subTags.length > 0" (click)="deleteTag($event,tag)" i18n>Delete</button>
+          <button mat-stroked-button *ngIf="isUserAdmin" [disabled]="tag.subTags.length > 0" (click)="deleteTag($event, tag)" i18n>Delete</button>
         </span>
       </mat-list-item>
       <ng-container *ngIf="subcollectionIsOpen.get(tag._id)">
         <mat-list-item *ngFor="let subTag of tag.subTags" (click)="selectOne(subTag._id || subTag.name)">
           <mat-icon>subdirectory_arrow_right</mat-icon>
-          {{ truncateTagName(subTag) }}
+          <span class="truncated-name mat-body-2">{{ tag.name }}</span>
+          <span class="count">({{ tag.count || 0 }})</span>
           <span class="toolbar-fill"></span>
           <button mat-stroked-button *ngIf="isUserAdmin" (click)="editTagClick($event,subTag)" i18n>Edit</button>
           <button mat-stroked-button *ngIf="isUserAdmin" (click)="deleteTag($event,subTag)" i18n>Delete</button>
diff --git a/src/app/shared/forms/planet-tag-input-dialog.component.ts b/src/app/shared/forms/planet-tag-input-dialog.component.ts
index 8c549c019e..041ad8bd21 100644
--- a/src/app/shared/forms/planet-tag-input-dialog.component.ts
+++ b/src/app/shared/forms/planet-tag-input-dialog.component.ts
@@ -14,28 +14,7 @@ import { DialogsPromptComponent } from '../../shared/dialogs/dialogs-prompt.comp
 
 @Component({
   'templateUrl': 'planet-tag-input-dialog.component.html',
-  'styles': [ `
-    :host {
-      display: block;
-      overflow: hidden;
-    }
-    :host mat-dialog-content {
-      overflow-y: auto;
-      max-height: calc(100vh - 100px); 
-    }
-    :host .mat-list-option span {
-      font-weight: inherit;
-    }
-    :host p[matLine] *, :host .mat-nav-list .mat-list-item * {
-      margin-right: 0.25rem;
-    }
-    :host p[matLine] *:last-child, :host .mat-nav-list .mat-list-item *:last-child {
-      margin-right: 0;
-    }
-    :host mat-dialog-actions {
-      padding: 0;
-    }
-  ` ]
+  'styleUrls': [ 'planet-tag-input-dialog.scss' ]
 })
 export class PlanetTagInputDialogComponent {
 
@@ -285,12 +264,6 @@ export class PlanetTagInputDialogComponent {
     return checkValue(this.selected.entries());
   }
 
-  truncateTagName(subTag: { name: string; count?: number }, maxLength: number): string {
-    if (this.deviceType === this.deviceTypes.DESKTOP) { maxLength = 50; } else { maxLength = 25; }
-    const truncatedName = subTag.name.length > maxLength ? subTag.name.slice(0, maxLength) + '...' : subTag.name;
-    return `${truncatedName} (${subTag.count || 0})`;
-  }
-
 }
 
 @Component({
diff --git a/src/app/shared/forms/planet-tag-input-dialog.scss b/src/app/shared/forms/planet-tag-input-dialog.scss
new file mode 100644
index 0000000000..05942a7880
--- /dev/null
+++ b/src/app/shared/forms/planet-tag-input-dialog.scss
@@ -0,0 +1,77 @@
+:host {
+  display: block;
+  overflow: hidden;
+}
+
+:host mat-dialog-content {
+  overflow-y: auto;
+  max-height: calc(100vh - 156px);
+  box-sizing: border-box;
+  padding-bottom: 16px;
+}
+
+:host .mat-list-option span {
+  font-weight: inherit;
+}
+
+:host p[matLine] *, :host .mat-nav-list .mat-list-item * {
+  margin-right: 0.25rem;
+}
+
+:host p[matLine] *:last-child, :host .mat-nav-list .mat-list-item *:last-child {
+  margin-right: 0;
+}
+
+:host .mat-nav-list {
+  margin-bottom: 16px;
+}
+
+.mat-list-item:last-of-type {
+  margin-bottom: 8px;
+}
+
+:host mat-dialog-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 4px;
+  padding: 16px;
+  box-sizing: border-box;
+  flex-wrap: wrap;
+  background-color: #fff;
+  position: sticky;
+  bottom: 0;
+  border-top: 1px solid #e0e0e0;
+}
+
+:host mat-dialog-actions button {
+  margin: 0;
+  padding: 4px;
+}
+
+.icon-spacing,
+.checkbox-spacing {
+  margin-right: 4px;
+}
+
+.button-spacing {
+  margin-right: 4px;
+  margin-left: 8px;
+}
+
+.truncated-name {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: break-word;
+  overflow-wrap: anywhere;
+}
+
+.count {
+  white-space: nowrap;
+}
+
+.mat-action-list .count {
+  margin-left: 2px;
+}