From 73a1913447f1887acfe2a06c652fd4ee16df1560 Mon Sep 17 00:00:00 2001
From: Andrew <159703254+andrewsoonqn@users.noreply.github.com>
Date: Fri, 10 Jul 2026 15:08:33 +0800
Subject: [PATCH] Put package initial first in tile monogram (GC, not CG)

---
 resources/web/dialog/SpeedDial/speeddial.js | 10 +++++-----
 resources/web/dialog/SpeedDial/style.css    |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/resources/web/dialog/SpeedDial/speeddial.js b/resources/web/dialog/SpeedDial/speeddial.js
index f8f7f9a252..4b81bac7cc 100644
--- a/resources/web/dialog/SpeedDial/speeddial.js
+++ b/resources/web/dialog/SpeedDial/speeddial.js
@@ -113,8 +113,8 @@ function actionLabel(action, actions) {
   return label;
 }
 
-// Monogram code for a tile: title initial, escalated to +pkg initial then a 1-based ordinal
-// only when actions collide - so same-titled actions still get visually distinct tiles.
+// Monogram code for a tile: title initial, escalated on collision by PREPENDING the pkg
+// initial (pi+ti, e.g. "GC"), then a 1-based ordinal - so same-titled actions stay distinct.
 function tileCode(action, actions) {
   var list = actions || [];
   var ti = (action.title || " ").charAt(0).toUpperCase();
@@ -124,11 +124,11 @@ function tileCode(action, actions) {
   var pi = (action.pkg || " ").charAt(0).toUpperCase();
   var samePkg = sameTitle.filter(function (o) { return (o.pkg || " ").charAt(0).toUpperCase() === pi; });
   if (samePkg.length <= 1)
-    return ti + pi;
+    return pi + ti;
   for (var i = 0; i < samePkg.length; i++)
     if (samePkg[i].id === action.id)
-      return ti + pi + (i + 1);
-  return ti + pi;
+      return pi + ti + (i + 1);
+  return pi + ti;
 }
 
 function syncClearButton() {
diff --git a/resources/web/dialog/SpeedDial/style.css b/resources/web/dialog/SpeedDial/style.css
index ca86bc2b36..6a4fc738ae 100644
--- a/resources/web/dialog/SpeedDial/style.css
+++ b/resources/web/dialog/SpeedDial/style.css
@@ -44,7 +44,7 @@ body {
   color: hsl(var(--h) var(--speed-tile-text-s, 72%) var(--speed-tile-text-l, 38%));
   font-weight: 700;
   /* why: mirror .tile centering - tileCode can be 2-3 chars (e.g. "EA1") on collision, and a
-     bare <button> inherits 13px + UA padding, clipping the code. inline-flex + 12px + pad:0 fits it. */
+     bare <button> inherits 13px + UA padding, clipping the code (e.g. "AE1"). inline-flex + 12px + pad:0 fits it. */
   font-size: 12px;
   padding: 0;
   display: inline-flex;