fix(uhk-web): render typing behavior presets tooltip as bullet list

Display the secondary role presets tooltip as a left-aligned bulleted
list and widen it to fit the longer entries.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: mondalaci

packages/uhk-web/src/app/components/device/typing-behavior-page/typing-behavior-page.component.html

@@ -30,13 +30,13 @@ <h3>Secondary roles</h3>
             </div>
             <circle-tooltip class="mt-2 ms-1"
                             [tooltip]="presetsTooltip"
-                            [width]="380"/>
+                            [width]="450"/>
             <ng-template #presetsTooltip>
-                <ng-container *ngFor="let preset of typingBehaviorPresets; trackBy: trackPresets; let isLast = last">
-                    <p [class.mb-0]="isLast">
-                        <span class="fw-bold">{{ preset.name }}</span> - {{ preset.tooltip }}
-                    </p>
-                </ng-container>
+                <ul class="presets-tooltip-list">
+                    <li *ngFor="let preset of typingBehaviorPresets; trackBy: trackPresets">
+                        <span class="fw-bold">{{ preset.name }}</span>: {{ preset.tooltip }}
+                    </li>
+                </ul>
             </ng-template>
         </div>
     </div>

packages/uhk-web/src/styles/_tooltip.scss

@@ -5,6 +5,16 @@
     .tooltip-inner {
         border: $tooltip-border-width solid $tooltip-border-color;
         max-width: var(--tooltip-max-width);
+
+        .presets-tooltip-list {
+            margin: 0;
+            padding-left: 1.25rem;
+            text-align: left;
+
+            li + li {
+                margin-top: 0.35rem;
+            }
+        }
     }
 
     .tooltip-arrow {