UI: text wraps inside its box everywhere (global wrapping, shrinkable flex items, wrapping buttons, unknown icon fallback)

panel/web/src/app.css

@@ -38,7 +38,12 @@ body {
   -webkit-font-smoothing: antialiased;
 }
 
-body { background: var(--bg); }
+body { background: var(--bg); overflow-wrap: anywhere; }
+
+/* Flex and grid items may shrink below their content, so long names wrap or truncate inside their box instead of pushing it wider. */
+*, *::before, *::after { min-width: 0; }
+svg, img, canvas, video, input[type='checkbox'], input[type='radio'] { flex-shrink: 0; }
+
 
 a {
   color: var(--accent-2);
@@ -143,8 +148,11 @@ button, .btn {
   gap: 8px;
   font-weight: 520;
   transition: background 0.15s, border-color 0.15s, opacity 0.15s;
-  white-space: nowrap;
+  /* Labels may wrap when space runs out; compact buttons below stay on one line. */
+  white-space: normal;
+  max-width: 100%;
 }
+button.primary, button.ghost, button.danger, button.icon, .btn { white-space: nowrap; }
 button:hover { background: var(--surface-3); }
 button:disabled { opacity: 0.5; cursor: not-allowed; }
 button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
@@ -299,3 +307,12 @@ table.table {
 @media (max-width: 900px) {
   .page { padding: 20px 16px 48px; }
 }
+
+/* Code and preformatted text wrap inside their box rather than running past it. */
+code, pre, kbd, samp { overflow-wrap: anywhere; word-break: break-word; }
+pre { white-space: pre-wrap; }
+@media (max-width: 700px) {
+  button, .btn, button.primary, button.ghost, button.danger { white-space: normal; }
+  .page > header, .page header { flex-wrap: wrap; gap: 10px; }
+  .table-wrap { overflow-x: auto; }
+}

panel/web/src/components/PlayerLink.svelte

@@ -13,6 +13,6 @@
 {/if}
 
 <style>
-  .plink { color: inherit; text-decoration: none; border-radius: 4px; }
+  .plink { color: inherit; text-decoration: none; border-radius: 4px; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: inherit; vertical-align: bottom; }
   .plink:hover { color: var(--accent, #8b6cff); text-decoration: underline; text-underline-offset: 3px; }
 </style>

panel/web/src/lib/achievementIcons.ts

@@ -98,12 +98,12 @@ const isId = (v: string) => /^[a-z0-9_]+$/.test(v);
 export interface ResolvedIcon { emoji: string; background: string; borderColor: string; glow: string }
 
 export function resolveIcon(a: { icon_item?: string | null; icon_bg?: string | null; icon_border?: string | null }): ResolvedIcon {
-  const item = (a.icon_item ?? '').trim();
+  const item = (a.icon_item ?? '').trim().replace(/^minecraft:/, '');
   let emoji = '🏆';
   if (item) {
     const known = ITEM_ICONS.find((i) => i.id === item);
     if (known) emoji = known.emoji;
-    else if (!isId(item)) emoji = item; // already an emoji or symbol
+    else if (!isId(item) && [...item].length <= 4) emoji = item; // already an emoji or symbol
     else emoji = KEYWORDS.find(([re]) => re.test(item))?.[1] ?? '🏆';
   }