2.2.5

Fix UI issues

assets/css/ui.css

@@ -447,12 +447,12 @@
    Used for the Places / Activities / Work triggers in the profile bar.  */
 
 .profile-scroll .cs-wrap {
-  height: 80px;
+  height: 100px;
 }
 
 .cs-btn.profile-card {
-  width: 80px;
-  height: 80px;
+  width: 100px;
+  height: 100px;
   padding: 0;
   position: relative;
   flex-direction: column;
@@ -490,21 +490,32 @@
   left: 0;
   right: 0;
   height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  /* Block (not flex) so text-overflow:ellipsis cuts cleanly on the trailing
+     edge — e.g. "Forest / Wo…" — instead of a flex item clipping both sides.
+     line-height vertically centres the single line; text-align centres short
+     labels while long ones ellipsise against the right pad that clears the
+     arrow. */
+  display: block;
+  line-height: 24px;
+  text-align: center;
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   background: rgba(30,18,8,0.52);
   color: #fff;
-  padding: 0 14px 0 4px;
+  padding: 0 17px 0 6px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+/* When the label overflows it must read left-to-right so the ellipsis lands on
+   the end ("Forest / Wo…"); centred overflow would clip the start too. */
+.cs-btn.profile-card.on .cs-btn-label {
+  text-align: left;
+}
+
 .cs-btn.profile-card .cs-arrow {
   position: absolute;
   right: 6px;
@@ -540,11 +551,11 @@
 
 @media (max-width: 640px) {
   .profile-scroll .cs-wrap {
-    height: 68px;
+    height: 80px;
   }
   .cs-btn.profile-card {
-    width: 68px;
-    height: 68px;
+    width: 80px;
+    height: 80px;
   }
   .cs-btn.profile-card .cs-arrow {
     bottom: 7px;
@@ -555,6 +566,7 @@
   }
   .cs-btn.profile-card .cs-btn-label {
     height: 20px;
+    line-height: 20px;
     font-size: 9px;
   }
 }