diff --git a/packages/phoenix-event-display/src/managers/ui-manager/color-options.ts b/packages/phoenix-event-display/src/managers/ui-manager/color-options.ts
index bd2b05ff9..6d6d2692e 100644
--- a/packages/phoenix-event-display/src/managers/ui-manager/color-options.ts
+++ b/packages/phoenix-event-display/src/managers/ui-manager/color-options.ts
@@ -88,7 +88,11 @@ export class ColorOptions {
     colorByOptionsToInclude?: ColorByOptionKeys[],
   ) {
     this.collectionName = collectionFolder.name;
-    this.colorOptionsFolder = collectionFolder.addChild('Color Options');
+    this.colorOptionsFolder = collectionFolder.addChild(
+      'Color Options',
+      undefined,
+      'color-options',
+    );
 
     this.colorOptionsFolder.addConfig({
       type: 'color',
diff --git a/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-ui.ts b/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-ui.ts
index f392020cf..adf80bf66 100644
--- a/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-ui.ts
+++ b/packages/phoenix-event-display/src/managers/ui-manager/phoenix-menu/phoenix-menu-ui.ts
@@ -298,7 +298,11 @@ export class PhoenixMenuUI implements PhoenixUI<PhoenixMenuNode> {
     collectionName: string,
     cuts: Cut[],
   ) {
-    const cutsOptionsNode = collectionNode.addChild('Cut Options');
+    const cutsOptionsNode = collectionNode.addChild(
+      'Cut Options',
+      undefined,
+      'cut-options',
+    );
 
     cutsOptionsNode
       .addConfig({
@@ -340,7 +344,11 @@ export class PhoenixMenuUI implements PhoenixUI<PhoenixMenuNode> {
     collectionNode: PhoenixMenuNode,
     collectionName: string,
   ) {
-    const drawOptionsNode = collectionNode.addChild('Draw Options');
+    const drawOptionsNode = collectionNode.addChild(
+      'Draw Options',
+      undefined,
+      'draw-options',
+    );
 
     drawOptionsNode.addConfig({
       type: 'slider',
diff --git a/packages/phoenix-ng/projects/phoenix-app/src/assets/icons/color-options.svg b/packages/phoenix-ng/projects/phoenix-app/src/assets/icons/color-options.svg
new file mode 100644
index 000000000..fb040d2fb
--- /dev/null
+++ b/packages/phoenix-ng/projects/phoenix-app/src/assets/icons/color-options.svg
@@ -0,0 +1,5 @@
+<svg width="0" height="0" class="hidden">
+	<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="color-options">
+		<path fill="var(--phoenix-options-icon-path, #fff)" d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10c1.4,0,2.5-1.1,2.5-2.5c0-0.6-0.2-1.2-0.6-1.6c-0.4-0.5-0.6-1-0.6-1.4c0-1.1,0.9-2,2-2H17c2.8,0,5-2.2,5-5C22,5.6,17.5,2,12,2z M6.5,13C5.7,13,5,12.3,5,11.5S5.7,10,6.5,10S8,10.7,8,11.5S7.3,13,6.5,13z M9.5,9C8.7,9,8,8.3,8,7.5S8.7,6,9.5,6S11,6.7,11,7.5S10.3,9,9.5,9z M14.5,9C13.7,9,13,8.3,13,7.5S13.7,6,14.5,6S16,6.7,16,7.5S15.3,9,14.5,9z M17.5,13c-0.8,0-1.5-0.7-1.5-1.5s0.7-1.5,1.5-1.5s1.5,0.7,1.5,1.5S18.3,13,17.5,13z"/>
+	</symbol>
+</svg>
diff --git a/packages/phoenix-ng/projects/phoenix-app/src/assets/icons/cut-options.svg b/packages/phoenix-ng/projects/phoenix-app/src/assets/icons/cut-options.svg
new file mode 100644
index 000000000..6585cb10e
--- /dev/null
+++ b/packages/phoenix-ng/projects/phoenix-app/src/assets/icons/cut-options.svg
@@ -0,0 +1,5 @@
+<svg width="0" height="0" class="hidden">
+	<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="cut-options">
+		<path d="M3 4h18l-7 8.5V19l-4 2v-8.5L3 4z" fill="none" stroke="var(--phoenix-options-icon-path, #fff)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+	</symbol>
+</svg>
diff --git a/packages/phoenix-ng/projects/phoenix-app/src/assets/icons/draw-options.svg b/packages/phoenix-ng/projects/phoenix-app/src/assets/icons/draw-options.svg
new file mode 100644
index 000000000..b3c323301
--- /dev/null
+++ b/packages/phoenix-ng/projects/phoenix-app/src/assets/icons/draw-options.svg
@@ -0,0 +1,5 @@
+<svg width="0" height="0" class="hidden">
+	<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="draw-options">
+		<path d="M17 3l4 4L8 20l-5 1 1-5L17 3z" fill="none" stroke="var(--phoenix-options-icon-path, #fff)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+	</symbol>
+</svg>
diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/phoenix-menu/phoenix-menu-item/phoenix-menu-item.component.html b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/phoenix-menu/phoenix-menu-item/phoenix-menu-item.component.html
index 4c7196da1..66f87d8f8 100644
--- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/phoenix-menu/phoenix-menu-item/phoenix-menu-item.component.html
+++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/phoenix-menu/phoenix-menu-item/phoenix-menu-item.component.html
@@ -1,191 +1,236 @@
-<div class="phoenix-menu-item" #phoenixMenuItem>
-  <div class="phoenix-menu-item-left align-items-center">
-    <!-- If the item has some toggle function -->
-    <ng-container *ngIf="currentNode.onToggle; else nodeName">
-      <mat-slide-toggle
-        [checked]="currentNode.toggleState"
-        (change)="currentNode.toggleSelfAndDescendants($event.checked)"
-      >
-        <ng-container *ngTemplateOutlet="nodeName"></ng-container>
-      </mat-slide-toggle>
-    </ng-container>
-    <!-- If the item has no toggle function -->
-    <ng-template #nodeName>
-      <span class="d-flex w-100 align-items-center">
-        <span *ngIf="currentNode.icon" class="icon-wrapper item-icon">
+<!-- Leaf nodes holding only configs (Draw/Cut/Color Options) are shown as a
+     compact icon button; everything else as a full menu row. -->
+<div
+  *ngIf="isCompact; else fullItem"
+  class="phoenix-menu-item-compact"
+  #phoenixMenuItem
+>
+  <button
+    class="btn-blank compact-option-button"
+    [title]="currentNode.name"
+    (click)="
+      calculateConfigTop(); currentNode.configActive = !currentNode.configActive
+    "
+  >
+    <span class="icon-wrapper">
+      <svg>
+        <use
+          attr.href="assets/icons/{{ currentNode.icon }}.svg#{{
+            currentNode.icon
+          }}"
+        ></use>
+      </svg>
+    </span>
+    <span class="compact-option-label">{{ compactLabel }}</span>
+  </button>
+  <ng-container *ngTemplateOutlet="configPopup"></ng-container>
+</div>
+
+<ng-template #fullItem>
+  <div class="phoenix-menu-item" #phoenixMenuItem>
+    <div class="phoenix-menu-item-left align-items-center">
+      <!-- If the item has some toggle function -->
+      <ng-container *ngIf="currentNode.onToggle; else nodeName">
+        <mat-slide-toggle
+          [checked]="currentNode.toggleState"
+          (change)="currentNode.toggleSelfAndDescendants($event.checked)"
+        >
+          <ng-container *ngTemplateOutlet="nodeName"></ng-container>
+        </mat-slide-toggle>
+      </ng-container>
+      <!-- If the item has no toggle function -->
+      <ng-template #nodeName>
+        <span class="d-flex w-100 align-items-center">
+          <span *ngIf="currentNode.icon" class="icon-wrapper item-icon">
+            <svg>
+              <use
+                attr.href="assets/icons/{{ currentNode.icon }}.svg#{{
+                  currentNode.icon
+                }}"
+              ></use>
+            </svg>
+          </span>
+          <span class="item-name" [title]="currentNode.name">{{
+            currentNode.name
+          }}</span>
+        </span>
+      </ng-template>
+    </div>
+    <div class="phoenix-menu-item-right">
+      <div *ngIf="currentNode.configs.length > 0">
+        <button
+          class="icon-wrapper icon-button btn-blank item-settings"
+          (click)="
+            calculateConfigTop();
+            currentNode.configActive = !currentNode.configActive
+          "
+        >
           <svg>
-            <use
-              attr.href="assets/icons/{{ currentNode.icon }}.svg#{{
-                currentNode.icon
-              }}"
-            ></use>
+            <use href="assets/icons/gear.svg#gear"></use>
           </svg>
-        </span>
-        <span class="item-name" [title]="currentNode.name">{{
-          currentNode.name
-        }}</span>
-      </span>
-    </ng-template>
-  </div>
-  <div class="phoenix-menu-item-right">
-    <div *ngIf="currentNode.configs.length > 0">
+        </button>
+        <ng-container *ngTemplateOutlet="configPopup"></ng-container>
+      </div>
       <button
-        class="icon-wrapper icon-button btn-blank item-settings"
-        (click)="
-          calculateConfigTop();
-          currentNode.configActive = !currentNode.configActive
-        "
+        class="icon-wrapper icon-button btn-blank item-expand"
+        *ngIf="currentNode.children.length > 0"
+        (click)="currentNode.childrenActive = !currentNode.childrenActive"
+        [ngClass]="{ expanded: currentNode.childrenActive }"
+        data-testid="dropdown"
       >
         <svg>
-          <use href="assets/icons/gear.svg#gear"></use>
+          <use href="assets/icons/expand.svg#expand"></use>
         </svg>
       </button>
+    </div>
+  </div>
+</ng-template>
+
+<div class="phoenix-menu-children" *ngIf="currentNode.childrenActive">
+  <div class="phoenix-menu-options-bar" *ngIf="compactChildren.length > 0">
+    <app-phoenix-menu-item
+      *ngFor="let childNode of compactChildren"
+      [currentNode]="childNode"
+    >
+    </app-phoenix-menu-item>
+  </div>
+  <app-phoenix-menu-item
+    *ngFor="let childNode of regularChildren"
+    [currentNode]="childNode"
+  >
+  </app-phoenix-menu-item>
+</div>
+
+<!-- Config popup shared by the full row (gear button) and the compact icon button -->
+<ng-template #configPopup>
+  <div
+    class="item-config-backdrop"
+    *ngIf="currentNode.configActive"
+    (click)="currentNode.configActive = false"
+  ></div>
+  <div
+    class="item-config"
+    [hidden]="!currentNode.configActive"
+    [ngStyle]="{ 'top.px': configTop }"
+  >
+    <ng-container
+      *ngFor="let config of castConfigsToAny(currentNode.configs)"
+      [ngSwitch]="config.type"
+    >
+      <!-- Config types -->
       <div
-        class="item-config-backdrop"
-        *ngIf="currentNode.configActive"
-        (click)="currentNode.configActive = false"
-      ></div>
-      <div
-        class="item-config"
-        [hidden]="!currentNode.configActive"
-        [ngStyle]="{ 'top.px': configTop }"
+        class="item-config-single"
+        [ngClass]="{ 'range-slider-row': config.type === 'rangeSlider' }"
+        *ngIf="!config.hidden"
       >
-        <ng-container
-          *ngFor="let config of castConfigsToAny(currentNode.configs)"
-          [ngSwitch]="config.type"
+        <label
+          class="item-config-label"
+          for="item-config-field"
+          *ngIf="config.type !== 'button'"
+          [ngClass]="{ 'font-weight-bold w-100': config.type === 'label' }"
         >
-          <!-- Config types -->
-          <div class="item-config-single" *ngIf="!config.hidden">
-            <label
-              class="item-config-label"
-              for="item-config-field"
-              *ngIf="config.type !== 'button'"
-              [ngClass]="{ 'font-weight-bold w-100': config.type === 'label' }"
-            >
-              {{ config.label }}
-            </label>
-            <div
-              class="item-config-data"
-              [ngClass]="{ 'p-0': config.type === 'button' }"
-              *ngIf="config.type !== 'label'"
-            >
-              <mat-checkbox
-                *ngSwitchCase="'checkbox'"
-                [checked]="config.isChecked"
-                (change)="
-                  config.onChange($event.checked);
-                  config.isChecked = $event.checked
-                "
-              ></mat-checkbox>
+          {{ config.label }}
+        </label>
+        <div
+          class="item-config-data"
+          [ngClass]="{ 'p-0': config.type === 'button' }"
+          *ngIf="config.type !== 'label'"
+        >
+          <mat-checkbox
+            *ngSwitchCase="'checkbox'"
+            [checked]="config.isChecked"
+            (change)="
+              config.onChange($event.checked); config.isChecked = $event.checked
+            "
+          ></mat-checkbox>
 
-              <app-config-slider
-                *ngSwitchCase="'slider'"
-                [value]="config.value"
-                (onChange)="config.onChange($event); config.value = $event"
-                [min]="config.min"
-                [max]="config.max"
-                [step]="config.step"
-                [allowCustomValue]="config.allowCustomValue"
-              >
-              </app-config-slider>
+          <app-config-slider
+            *ngSwitchCase="'slider'"
+            [value]="config.value"
+            (onChange)="config.onChange($event); config.value = $event"
+            [min]="config.min"
+            [max]="config.max"
+            [step]="config.step"
+            [allowCustomValue]="config.allowCustomValue"
+          >
+          </app-config-slider>
 
-              <button
-                *ngSwitchCase="'button'"
-                class="w-100"
-                (click)="config.onClick()"
-                mat-button
-                mat-stroked-button
-              >
-                {{ config.label }}
-              </button>
+          <button
+            *ngSwitchCase="'button'"
+            class="w-100"
+            (click)="config.onClick()"
+            mat-button
+            mat-stroked-button
+          >
+            {{ config.label }}
+          </button>
 
-              <input
-                *ngSwitchCase="'color'"
-                id="item-config-field"
-                type="color"
-                [value]="config.color"
-                (input)="
-                  config.onChange($event.target.value);
-                  config.color = $event.target.value
-                "
-              />
+          <input
+            *ngSwitchCase="'color'"
+            id="item-config-field"
+            type="color"
+            [value]="config.color"
+            (input)="
+              config.onChange($event.target.value);
+              config.color = $event.target.value
+            "
+          />
 
-              <div *ngSwitchCase="'rangeSlider'" class="range-slider">
-                <div class="range-slider-inputs d-flex align-items-center">
-                  <div class="range-slider-side">
-                    <mat-checkbox
-                      [(ngModel)]="config.enableMin"
-                      (change)="config.setEnableMin($event.checked)"
-                    ></mat-checkbox>
-                    <input
-                      type="number"
-                      placeholder="Min"
-                      class="form-control form-control-sm"
-                      [(ngModel)]="config.value"
-                      (input)="
-                        config.value = $event.target.value;
-                        config.onChange(config)
-                      "
-                      [step]="config.step"
-                    />
-                  </div>
-                  <div class="range-slider-side">
-                    <mat-checkbox
-                      [(ngModel)]="config.enableMax"
-                      (change)="config.setEnableMax($event.checked)"
-                    ></mat-checkbox>
-                    <input
-                      type="number"
-                      placeholder="Max"
-                      class="form-control form-control-sm"
-                      [(ngModel)]="config.highValue"
-                      (input)="
-                        config.highValue = $event.target.value;
-                        config.onChange(config)
-                      "
-                      [step]="config.step"
-                    />
-                  </div>
-                </div>
+          <div *ngSwitchCase="'rangeSlider'" class="range-slider">
+            <div class="range-slider-inputs d-flex align-items-center">
+              <div class="range-slider-side">
+                <mat-checkbox
+                  [(ngModel)]="config.enableMin"
+                  (change)="config.setEnableMin($event.checked)"
+                ></mat-checkbox>
+                <input
+                  type="number"
+                  placeholder="Min"
+                  class="form-control form-control-sm"
+                  [(ngModel)]="config.value"
+                  (input)="
+                    config.value = $event.target.value; config.onChange(config)
+                  "
+                  [step]="config.step"
+                />
+              </div>
+              <div class="range-slider-side">
+                <mat-checkbox
+                  [(ngModel)]="config.enableMax"
+                  (change)="config.setEnableMax($event.checked)"
+                ></mat-checkbox>
+                <input
+                  type="number"
+                  placeholder="Max"
+                  class="form-control form-control-sm"
+                  [(ngModel)]="config.highValue"
+                  (input)="
+                    config.highValue = $event.target.value;
+                    config.onChange(config)
+                  "
+                  [step]="config.step"
+                />
               </div>
-
-              <select
-                *ngSwitchCase="'select'"
-                id="item-config-field"
-                class="w-100"
-                [value]="config.value ?? config.options[0]"
-                (change)="config.onChange($event.target.value)"
-              >
-                <option
-                  *ngFor="let singleOption of config.options"
-                  [value]="singleOption"
-                >
-                  {{ singleOption }}
-                </option>
-              </select>
             </div>
           </div>
-          <!-- Config types END -->
-        </ng-container>
+
+          <select
+            *ngSwitchCase="'select'"
+            id="item-config-field"
+            class="w-100"
+            [value]="config.value ?? config.options[0]"
+            (change)="config.onChange($event.target.value)"
+          >
+            <option
+              *ngFor="let singleOption of config.options"
+              [value]="singleOption"
+            >
+              {{ singleOption }}
+            </option>
+          </select>
+        </div>
       </div>
-    </div>
-    <button
-      class="icon-wrapper icon-button btn-blank item-expand"
-      *ngIf="currentNode.children.length > 0"
-      (click)="currentNode.childrenActive = !currentNode.childrenActive"
-      [ngClass]="{ expanded: currentNode.childrenActive }"
-      data-testid="dropdown"
-    >
-      <svg>
-        <use href="assets/icons/expand.svg#expand"></use>
-      </svg>
-    </button>
+      <!-- Config types END -->
+    </ng-container>
   </div>
-</div>
-<div class="phoenix-menu-children" *ngIf="currentNode.childrenActive">
-  <app-phoenix-menu-item
-    *ngFor="let childNode of currentNode.children"
-    [currentNode]="childNode"
-  >
-  </app-phoenix-menu-item>
-</div>
+</ng-template>
diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/phoenix-menu/phoenix-menu-item/phoenix-menu-item.component.scss b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/phoenix-menu/phoenix-menu-item/phoenix-menu-item.component.scss
index b8911373f..d06623cc7 100644
--- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/phoenix-menu/phoenix-menu-item/phoenix-menu-item.component.scss
+++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/phoenix-menu/phoenix-menu-item/phoenix-menu-item.component.scss
@@ -42,58 +42,130 @@
     .item-settings {
       margin-right: 0.2rem;
     }
+  }
 
-    .item-config-backdrop {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100vw;
-      height: 100vh;
-      z-index: 110;
-    }
-
-    .item-config {
-      position: absolute;
-      right: 100%;
-      width: 14rem;
-      padding: 0.5rem;
-      background: var(--phoenix-background-color-secondary);
-      color: var(--phoenix-text-color-secondary);
-      box-shadow: var(--phoenix-box-shadow);
-      display: flex;
-      flex-direction: column;
-      z-index: 120;
-      max-height: 60vh;
-      overflow-y: auto;
-
-      /* Custom thin scrollbar to avoid clutter */
-      &::-webkit-scrollbar {
-        width: 4px;
-      }
-      &::-webkit-scrollbar-thumb {
-        background: var(--phoenix-text-color-secondary, #999);
-        border-radius: 4px;
+  @media screen and (max-width: 768px) {
+    font-size: 0.75rem;
+    padding: 0.5rem;
+  }
+}
+
+// Compact icon-button variant for leaf nodes holding only configs
+// (the collections' Draw/Cut/Color Options).
+.phoenix-menu-item-compact {
+  flex: 1;
+  min-width: 0;
+  color: var(--phoenix-text-color);
+
+  .compact-option-button {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.15rem;
+    padding: 0.3rem 0.2rem;
+    color: inherit;
+    border-radius: 0.3rem;
+    transition: all 0.4s;
+
+    &:hover {
+      background: var(--phoenix-options-icon-bg);
+      cursor: pointer;
+    }
+
+    .compact-option-label {
+      font-size: 0.65rem;
+      line-height: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100%;
+    }
+  }
+}
+
+.phoenix-menu-options-bar {
+  display: flex;
+  align-items: stretch;
+  gap: 0.25rem;
+  padding: 0.25rem 0.4rem;
+  background: var(--phoenix-background-color-secondary);
+
+  app-phoenix-menu-item {
+    display: flex;
+    flex: 1;
+    min-width: 0;
+  }
+}
+
+// Rules shared by the full row and the compact variant (the config popup is
+// rendered inside both).
+.phoenix-menu-item,
+.phoenix-menu-item-compact {
+  .item-config-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    z-index: 110;
+  }
+
+  .item-config {
+    position: absolute;
+    right: 100%;
+    width: 14rem;
+    padding: 0.5rem;
+    background: var(--phoenix-background-color-secondary);
+    color: var(--phoenix-text-color-secondary);
+    box-shadow: var(--phoenix-box-shadow);
+    display: flex;
+    flex-direction: column;
+    z-index: 120;
+    max-height: 60vh;
+    overflow-y: auto;
+    font-size: 0.8rem;
+
+    /* Custom thin scrollbar to avoid clutter */
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background: var(--phoenix-text-color-secondary, #999);
+      border-radius: 4px;
+    }
+
+    & > * {
+      margin-bottom: 0.4rem;
+
+      &:last-child {
+        margin-bottom: 0;
       }
+    }
 
-      & > * {
-        margin-bottom: 0.4rem;
+    .item-config-single {
+      display: flex;
+      flex-direction: row;
 
-        &:last-child {
-          margin-bottom: 0;
-        }
+      .item-config-label {
+        width: 30%;
       }
 
-      .item-config-single {
-        display: flex;
-        flex-direction: row;
+      .item-config-data {
+        flex-grow: 1;
+        padding-left: 0.5rem;
+        min-width: 0;
+      }
 
-        .item-config-label {
-          width: 30%;
-        }
+      // Cut rows have short symbol labels; give the space to the inputs.
+      &.range-slider-row {
+        align-items: center;
 
-        .item-config-data {
-          flex-grow: 1;
-          padding-left: 0.5rem;
+        .item-config-label {
+          width: auto;
+          min-width: 1.6rem;
+          flex-shrink: 0;
+          margin-bottom: 0;
         }
       }
     }
@@ -146,9 +218,6 @@
   }
 
   @media screen and (max-width: 768px) {
-    font-size: 0.75rem;
-    padding: 0.5rem;
-
     .icon-wrapper {
       width: 1rem;
       height: 1rem;
@@ -187,13 +256,25 @@
 
     mat-checkbox {
       flex-shrink: 0;
+      // Shrink the Material checkbox touch target so the inputs get the space.
+      --mdc-checkbox-state-layer-size: 24px;
     }
 
     input[type='number'] {
       min-width: 0;
       width: 100%;
-      padding: 0.1rem 0.2rem;
-      font-size: 0.7rem;
+      padding: 0.15rem 0.25rem;
+      font-size: 0.75rem;
+
+      // Hide the native spinner buttons which clip the numbers.
+      appearance: textfield;
+      -moz-appearance: textfield;
+
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
     }
   }
 }
diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/phoenix-menu/phoenix-menu-item/phoenix-menu-item.component.test.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/phoenix-menu/phoenix-menu-item/phoenix-menu-item.component.test.ts
index 63bab3e56..2cb0fc590 100644
--- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/phoenix-menu/phoenix-menu-item/phoenix-menu-item.component.test.ts
+++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/phoenix-menu/phoenix-menu-item/phoenix-menu-item.component.test.ts
@@ -37,4 +37,55 @@ describe('PhoenixMenuItemComponent', () => {
       [],
     );
   });
+
+  it('should detect compact options nodes', () => {
+    const optionsNode = component.currentNode.addChild(
+      'Color Options',
+      undefined,
+      'color-options',
+    );
+    optionsNode.addConfig({
+      type: 'button',
+      label: 'Random',
+      onClick: () => {},
+    });
+
+    // A leaf with only configs and an icon is compact.
+    expect(component.isCompactOptionsNode(optionsNode)).toBe(true);
+
+    // Nodes with a toggle, children, no configs or no icon are not.
+    const toggleNode = component.currentNode.addChild(
+      'Collection',
+      () => {},
+      'color-options',
+    );
+    toggleNode.addConfig({
+      type: 'button',
+      label: 'Random',
+      onClick: () => {},
+    });
+    expect(component.isCompactOptionsNode(toggleNode)).toBe(false);
+    expect(component.isCompactOptionsNode(component.currentNode)).toBe(false);
+  });
+
+  it('should partition children into compact and regular ones', () => {
+    const optionsNode = component.currentNode.addChild(
+      'Draw Options',
+      undefined,
+      'draw-options',
+    );
+    optionsNode.addConfig({ type: 'button', label: 'Test', onClick: () => {} });
+    const regularNode = component.currentNode.addChild('Collection', () => {});
+
+    expect(component.compactChildren).toEqual([optionsNode]);
+    expect(component.regularChildren).toEqual([regularNode]);
+  });
+
+  it('should shorten the compact label', () => {
+    component.currentNode.name = 'Draw Options';
+    expect(component.compactLabel).toBe('Draw');
+
+    component.currentNode.name = 'Something Else';
+    expect(component.compactLabel).toBe('Something Else');
+  });
 });
diff --git a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/phoenix-menu/phoenix-menu-item/phoenix-menu-item.component.ts b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/phoenix-menu/phoenix-menu-item/phoenix-menu-item.component.ts
index d96de7fdc..060e1db5d 100644
--- a/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/phoenix-menu/phoenix-menu-item/phoenix-menu-item.component.ts
+++ b/packages/phoenix-ng/projects/phoenix-ui-components/lib/components/phoenix-menu/phoenix-menu-item/phoenix-menu-item.component.ts
@@ -22,6 +22,41 @@ export class PhoenixMenuItemComponent {
 
   constructor(private cdr: ChangeDetectorRef) {}
 
+  /**
+   * Whether a node is a leaf holding only configs (like the collections'
+   * "Draw/Cut/Color Options"), which is displayed as a compact icon button
+   * in a toolbar instead of a full menu row.
+   */
+  isCompactOptionsNode(node: PhoenixMenuNode): boolean {
+    return (
+      !!node.icon &&
+      !node.onToggle &&
+      node.children.length === 0 &&
+      node.configs.length > 0
+    );
+  }
+
+  get isCompact(): boolean {
+    return this.isCompactOptionsNode(this.currentNode);
+  }
+
+  /** Label for the compact icon button, e.g. "Draw Options" -> "Draw". */
+  get compactLabel(): string {
+    return this.currentNode.name.replace(/\s+Options$/, '');
+  }
+
+  get compactChildren(): PhoenixMenuNode[] {
+    return this.currentNode.children.filter((child) =>
+      this.isCompactOptionsNode(child),
+    );
+  }
+
+  get regularChildren(): PhoenixMenuNode[] {
+    return this.currentNode.children.filter(
+      (child) => !this.isCompactOptionsNode(child),
+    );
+  }
+
   calculateConfigTop() {
     if (this.phoenixMenuItem) {
       const itemRect =