diff --git a/src/components/Layout/Panel.module.css b/src/components/Layout/Panel.module.css index 397ff48..d428a07 100644 --- a/src/components/Layout/Panel.module.css +++ b/src/components/Layout/Panel.module.css @@ -5,6 +5,18 @@ border-radius: 8px; background: var(--bg-primary, #fff); overflow: clip; + display: flex; + flex-direction: column; + min-height: 0; +} + +/* Card regions in bounded flex hosts (sidebar, PanelLayout pane): body fills and scrolls. */ +.panel[data-variant="card"] .body:not(.bodyHidden) { + flex: 1; + min-height: 0; + overflow: auto; + display: flex; + flex-direction: column; } /* --- Variant: table — fills available height, bounded scroll --- */ @@ -94,11 +106,14 @@ background: var(--bg-secondary, rgba(0, 0, 0, 0.02)); border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.08)); min-height: 40px; + position: relative; } .headerCollapsible { cursor: pointer; user-select: none; + /* Reserve space so action icons never overlap the collapse chevron */ + padding-right: 30px; } .headerCollapsible:hover { @@ -128,15 +143,20 @@ } .actions { - flex-shrink: 0; + flex-shrink: 1; + min-width: 0; display: flex; align-items: center; gap: 4px; + margin-left: auto; } -/* Stable chevron position: fixed at the right edge of the header, same spot - whether collapsed or expanded. Icon swaps (down = open, right = collapsed). */ +/* Collapse chevron: always rightmost, above action icons (never covered). */ .chevron { + position: absolute; + right: 14px; + top: 50%; + transform: translateY(-50%); flex-shrink: 0; display: inline-flex; align-items: center; @@ -145,6 +165,8 @@ height: 16px; font-size: 12px; color: var(--text-tertiary, #888); + z-index: 2; + pointer-events: none; } .body { diff --git a/src/components/Layout/Panel.tsx b/src/components/Layout/Panel.tsx index 0f30415..73e7c83 100644 --- a/src/components/Layout/Panel.tsx +++ b/src/components/Layout/Panel.tsx @@ -75,12 +75,12 @@ export const Panel: FC = ({ {title} {subtitle && {subtitle}} - {actions &&
e.stopPropagation()}>{actions}
} {collapsible && ( {collapsed ? : } )} + {actions &&
e.stopPropagation()}>{actions}
}
{children} diff --git a/src/components/UnifiedDataBar/ChatsTab.module.css b/src/components/UnifiedDataBar/ChatsTab.module.css index 4d68ac1..6943ffe 100644 --- a/src/components/UnifiedDataBar/ChatsTab.module.css +++ b/src/components/UnifiedDataBar/ChatsTab.module.css @@ -3,6 +3,8 @@ flex-direction: column; flex: 1; min-height: 0; + height: 100%; + overflow: hidden; gap: 8px; } @@ -100,6 +102,9 @@ .tree { display: flex; flex-direction: column; + flex: 1; + min-height: 0; + overflow-y: auto; } .chatItem { diff --git a/src/components/UnifiedDataBar/SourcesTab.module.css b/src/components/UnifiedDataBar/SourcesTab.module.css new file mode 100644 index 0000000..9f3dcc9 --- /dev/null +++ b/src/components/UnifiedDataBar/SourcesTab.module.css @@ -0,0 +1,22 @@ +.sourcesTab { + display: flex; + flex-direction: column; + flex: 1; + min-height: 0; + height: 100%; + overflow: hidden; +} + +.treeHost { + flex: 1; + min-height: 0; + overflow: hidden; + display: flex; + flex-direction: column; +} + +.empty { + padding: 12px; + font-size: 12px; + color: #888; +} diff --git a/src/components/UnifiedDataBar/SourcesTab.tsx b/src/components/UnifiedDataBar/SourcesTab.tsx index 7176f6c..1f8e30d 100644 --- a/src/components/UnifiedDataBar/SourcesTab.tsx +++ b/src/components/UnifiedDataBar/SourcesTab.tsx @@ -20,6 +20,7 @@ import { createUdbSourcesProvider } from './UdbSourcesProvider'; import type { UdbBackendNode } from './UdbSourcesProvider'; import { DataSourceSettingsModal } from './DataSourceSettingsModal'; import { useLanguage } from '../../providers/language/LanguageContext'; +import styles from './SourcesTab.module.css'; interface SourcesTabProps { context: UdbContext; @@ -84,15 +85,15 @@ const SourcesTab: React.FC = ({ if (!instanceId || !provider) { return ( -
+
{t('Keine Workspace-Instanz aktiv.')}
); } return ( -
-
+
+
{ collapsible: true, collapseKey: 'commcoach-session-udb', content: ( - + { collapsible: true, collapseKey: 'teamsbot-session-udb', content: ( - + = ( aria-label="Kontext" >
+ {allowCollapse && ( + + )} + {!isCollapsed && ( + <> - {allowCollapse && ( - + )}
{!isCollapsed && ( diff --git a/src/pages/views/workspace/WorkspacePage.module.css b/src/pages/views/workspace/WorkspacePage.module.css index 4711fba..75b9ffb 100644 --- a/src/pages/views/workspace/WorkspacePage.module.css +++ b/src/pages/views/workspace/WorkspacePage.module.css @@ -162,6 +162,20 @@ width: 44px; } +.contextSidebarCollapsed .contextToolbar { + flex-direction: column; + align-items: center; + justify-content: flex-start; + padding: 6px 4px; + gap: 6px; + border-bottom: none; +} + +.contextSidebarCollapsed .contextCollapseBtn { + width: 32px; + height: 32px; +} + /* When hosted inside a PanelLayout pane, the sidebar fills the pane width so the divider controls its size (instead of the fixed 320px). */ .contextSidebarFill {