diff --git a/src/components/AppLayout.vue b/src/components/AppLayout.vue
index 93f946b03..006d4826d 100644
--- a/src/components/AppLayout.vue
+++ b/src/components/AppLayout.vue
@@ -11,6 +11,10 @@ const leftSidebarWidth = computed(() =>
leftCollapsed.value ? '0' : 'var(--sidebar-width)'
)
+const statusLeftOffset = computed(() =>
+ leftCollapsed.value ? 'var(--space-md)' : 'calc(var(--sidebar-width) + var(--space-md))'
+)
+
function loadSidebarState() {
try {
const stored = localStorage.getItem(STORAGE_KEY)
@@ -67,11 +71,11 @@ onMounted(() => {
-
-
+
+
+
+
@@ -120,16 +124,13 @@ onMounted(() => {
overflow: visible;
}
-.status-bar {
- flex-shrink: 0;
- height: var(--status-bar-height);
- display: flex;
- align-items: center;
- padding: 0 var(--space-md);
- background: var(--color-bg-primary);
- border-top: 1px solid var(--color-border);
+.status-text {
+ position: absolute;
+ bottom: var(--space-md);
font-size: var(--font-size-sm);
color: var(--color-text-muted);
+ pointer-events: none;
+ z-index: 1;
}
/* Responsive: auto-collapse left sidebar on narrow screens */
@@ -137,6 +138,10 @@ onMounted(() => {
.left-sidebar {
width: 0 !important;
}
+
+ .status-text {
+ left: var(--space-md) !important;
+ }
}
@media (max-width: 600px) {
diff --git a/src/style.css b/src/style.css
index bcbeeded5..a6e31ff27 100644
--- a/src/style.css
+++ b/src/style.css
@@ -48,7 +48,6 @@
/* Layout */
--header-height: 48px;
- --status-bar-height: 24px;
--sidebar-width: 240px;
/* Borders */