fix: redesign session log player controls, fix tooltip overlap and drop dot separators

src/ui/locales/en.json

@@ -1184,7 +1184,7 @@
     "add": "Add:",
     "commandPalette": "Command Palette",
     "done": "Done",
-    "editModeInstructions": "Drag cards to reorder · Drag the column divider to resize columns · Drag the bottom edge of a card to resize its height · Trash to remove",
+    "editModeInstructions": "Drag cards to reorder. Drag the column divider to resize columns. Drag the bottom edge of a card to change its height. Use the trash button to remove a card.",
     "empty": "Empty",
     "clear": "Clear",
     "viewServerDetails": "View server details",
@@ -1264,7 +1264,7 @@
     "auditForwardingSaveError": "Failed to save audit forwarding settings",
     "sessionTimeout": "Session Timeout",
     "hours": "hours",
-    "sessionTimeoutRange": "Min 1h · Max 720h",
+    "sessionTimeoutRange": "Min 1h, max 720h",
     "monitoringDefaults": "Monitoring Defaults",
     "statusCheck": "Status Check",
     "sec": "sec",

src/ui/sidebar/AdminApiKeysSection.tsx

@@ -230,11 +230,13 @@ export function AdminApiKeysSection({
               <span className="text-[10px] font-mono text-muted-foreground truncate">
                 {key.tokenPrefix}…
               </span>
-              <span className="text-[10px] text-muted-foreground">
-                {key.createdAt.split("T")[0]} ·{" "}
-                {key.expiresAt
-                  ? key.expiresAt.split("T")[0]
-                  : t("admin.apiKeyNoExpiry")}
+              <span className="flex gap-2.5 text-[10px] text-muted-foreground">
+                <span>{key.createdAt.split("T")[0]}</span>
+                <span>
+                  {key.expiresAt
+                    ? key.expiresAt.split("T")[0]
+                    : t("admin.apiKeyNoExpiry")}
+                </span>
               </span>
             </div>
             <Button

src/ui/sidebar/AdminUserManagePanel.tsx

@@ -815,8 +815,9 @@ export function AdminUserManagePanel({
                       <span className="text-xs font-semibold truncate max-w-[180px]">
                         {cred.name}
                       </span>
-                      <span className="text-[10px] text-muted-foreground truncate">
-                        {cred.username || "-"} · {cred.type}
+                      <span className="flex gap-2.5 text-[10px] text-muted-foreground min-w-0">
+                        <span className="truncate">{cred.username || "-"}</span>
+                        <span className="shrink-0">{cred.type}</span>
                       </span>
                     </div>
                   </div>

src/ui/sidebar/ConnectionsPanel.tsx

@@ -189,9 +189,7 @@ function ConnectionRow({
         </div>
         <span className="text-[10px] text-muted-foreground/60 truncate pl-3">
           {hostName && hostName !== name ? (
-            <span className="text-muted-foreground/50">
-              {hostName} &middot;{" "}
-            </span>
+            <span className="text-muted-foreground/50 mr-2.5">{hostName}</span>
           ) : null}
           {subLabel}
         </span>

src/ui/sidebar/HostExportDialog.tsx

@@ -320,16 +320,23 @@ export function HostExportDialog({
         </div>
 
         <div className="shrink-0 text-xs text-muted-foreground">
-          {count === 0
-            ? t("hosts.export.noneSelected")
-            : `${t("hosts.export.summary", {
-                selected: count,
-                total: exportableHosts.length,
-              })} · ${
-                withCredentials
+          {count === 0 ? (
+            t("hosts.export.noneSelected")
+          ) : (
+            <span className="flex flex-wrap gap-x-3">
+              <span>
+                {t("hosts.export.summary", {
+                  selected: count,
+                  total: exportableHosts.length,
+                })}
+              </span>
+              <span>
+                {withCredentials
                   ? t("hosts.export.credentialsIncluded")
-                  : t("hosts.export.credentialsExcluded")
-              }`}
+                  : t("hosts.export.credentialsExcluded")}
+              </span>
+            </span>
+          )}
         </div>
 
         <DialogFooter className="shrink-0">

src/ui/sidebar/credential-tree/CredentialItem/CredentialItem.tsx

@@ -335,8 +335,9 @@ export function CredentialItem({
           <span className="text-[11px] text-muted-foreground/60 truncate leading-none font-mono">
             {cred.username}
             {usedByCount > 0 && (
-              <span className="text-muted-foreground/40">
-                {cred.username ? " · " : ""}
+              <span
+                className={`text-muted-foreground/40${cred.username ? " ml-2" : ""}`}
+              >
                 {usedByCount}h
               </span>
             )}