Compact permission chips and add header logo

Wrap permission status in a span so chips are small pills, not full table cells. Add the welcome UNA mark to the install topbar on every step.

install/css/styles.css

@@ -50,13 +50,23 @@ body.bx-install-body,
     position: relative;
     max-width: 720px;
     margin: 0 auto;
-    padding: 14px 20px;
+    padding: 10px 20px;
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    min-height: 48px;
+    min-height: 52px;
     box-sizing: border-box;
 }
+.bx-install-header-logo {
+    position: absolute;
+    left: 20px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 28px;
+    height: 28px;
+    border-radius: 7px;
+    z-index: 1;
+}
 
 .bx-install-brand-title {
     position: absolute;
@@ -70,7 +80,7 @@ body.bx-install-body,
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    max-width: calc(100% - 120px);
+    max-width: calc(100% - 160px);
     text-align: center;
     pointer-events: none;
 }
@@ -370,8 +380,12 @@ a.bx-btn-disabled,
 }
 
 /* Permissions table → modern list */
+.bx-install-permissions-table-wrap {
+    overflow-x: auto;
+}
 .bx-permissions-table {
     width: 100% !important;
+    table-layout: auto;
     border-collapse: separate !important;
     border-spacing: 0 !important;
     border: 1px solid var(--bx-inst-border);
@@ -394,11 +408,21 @@ a.bx-btn-disabled,
 }
 
 .bx-permissions-table td {
-    padding: 12px !important;
+    padding: 10px 12px !important;
     border-bottom: 1px solid var(--bx-inst-border);
     vertical-align: middle;
     font-family: var(--bx-inst-font) !important;
 }
+td.bx-permissions-ok,
+td.bx-permissions-wrong {
+    display: table-cell !important;
+    background: transparent !important;
+    border-radius: 0 !important;
+    padding: 10px 12px !important;
+    font-size: inherit !important;
+    font-weight: inherit !important;
+    line-height: inherit !important;
+}
 
 .bx-permissions-table tbody tr:last-child td {
     border-bottom: none;
@@ -413,6 +437,13 @@ a.bx-btn-disabled,
     font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
     font-size: 12px;
     color: #374151;
+    overflow-wrap: anywhere;
+    word-break: break-word;
+}
+.bx-permissions-table td:nth-child(2),
+.bx-permissions-table td:nth-child(3) {
+    white-space: nowrap;
+    width: 1%;
 }
 
 .bx-permissions-table td:not(:first-child) {
@@ -420,8 +451,8 @@ a.bx-btn-disabled,
 }
 
 .bx-install-chip,
-.bx-permissions-ok,
-.bx-permissions-wrong,
+span.bx-permissions-ok,
+span.bx-permissions-wrong,
 .bx-install-audit b.ok,
 .bx-install-audit b.fail,
 .bx-install-audit b.warn,
@@ -439,14 +470,14 @@ a.bx-btn-disabled,
     white-space: nowrap;
 }
 
-.bx-permissions-ok,
+span.bx-permissions-ok,
 .bx-install-chip-ok,
 .bx-install-audit b.ok {
     color: var(--bx-inst-ok) !important;
     background: var(--bx-inst-ok-bg) !important;
 }
 
-.bx-permissions-wrong,
+span.bx-permissions-wrong,
 .bx-install-chip-bad,
 .bx-install-audit b.fail {
     color: var(--bx-inst-bad) !important;

install/templates/_page.php

@@ -16,6 +16,7 @@
 <div class="bx-install-shell">
     <header class="bx-install-topbar">
         <div class="bx-install-topbar-inner">
+            <img class="bx-install-header-logo" src="img/logo.svg" alt="UNA" />
             <span class="bx-install-brand-title"><?=$sTitle; ?></span>
             <?php if (!empty($aToolbarItem)): ?>
             <a class="bx-install-help" title="<?=$aToolbarItem['title']; ?>" href="<?=$aToolbarItem['link']; ?>" target="<?=$aToolbarItem['target']; ?>">

studio/classes/BxDolStudioTools.php

@@ -216,7 +216,7 @@ EOF;
         return <<<EOF
 <tr class="bx-def-color-bg-hl-even">
     <td class="bx-def-padding-thd">{$s}</td>
-    <td class="bx-def-padding-thd {$sClass}">{$sResultPerm}</td>
+    <td class="bx-def-padding-thd"><span class="{$sClass}">{$sResultPerm}</span></td>
     <td class="bx-def-padding-thd">{$sAwaitedPerm}</td>
 </tr>
 EOF;