diff --git a/frontend/src/shared/shell/KsTabs.vue b/frontend/src/shared/shell/KsTabs.vue
index b6eeb82e..7e076dc5 100644
--- a/frontend/src/shared/shell/KsTabs.vue
+++ b/frontend/src/shared/shell/KsTabs.vue
@@ -66,24 +66,31 @@ const isTabActive = (tabId: string) => activeTabId.value === tabId
-
+
@@ -172,26 +179,38 @@ const isTabActive = (tabId: string) => activeTabId.value === tabId
.ks-tabs__actions {
display: flex;
- gap: var(--spacing-2);
+ align-items: center;
+ gap: var(--ks-space-1);
flex-shrink: 0;
- border-left: 1px solid var(--color-border-primary);
- padding-left: var(--spacing-3);
+ border-left: 1px solid var(--ks-color-border);
+ padding-left: var(--ks-space-2);
+ margin-left: var(--ks-space-2);
}
-.ks-tabs__action {
- background: none;
- border: none;
- color: var(--color-text-secondary);
+.ks-tabs__action-btn {
+ display: inline-flex;
+ align-items: center;
+ gap: var(--ks-space-1);
+ background: var(--ks-color-surface);
+ border: 1px solid var(--ks-color-border);
+ color: var(--ks-color-text-muted);
cursor: pointer;
- padding: var(--spacing-1) var(--spacing-2);
- border-radius: var(--border-radius-sm);
- transition: all var(--transition-base);
- font-size: 14px;
+ padding: 3px 8px;
+ height: 26px;
+ border-radius: var(--ks-radius-sm);
+ transition: var(--ks-transition-fast);
+ font-size: var(--ks-font-caption);
+ white-space: nowrap;
}
-.ks-tabs__action:hover {
- background-color: var(--color-background-hover);
- color: var(--color-text-primary);
+.ks-tabs__action-btn:hover {
+ background-color: var(--ks-color-neutral-100);
+ color: var(--ks-color-text);
+ border-color: var(--ks-color-neutral-300);
+}
+
+.ks-tabs__action-icon {
+ flex-shrink: 0;
}
/* Scrollbar styling */