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; }
+}