diff --git a/packages/ui/src/styles/messaging/message-timeline.css b/packages/ui/src/styles/messaging/message-timeline.css index 8cceedf7..ff29dc76 100644 --- a/packages/ui/src/styles/messaging/message-timeline.css +++ b/packages/ui/src/styles/messaging/message-timeline.css @@ -5,16 +5,32 @@ width: 100%; min-height: 0; flex: 1 1 auto; + position: relative; } .message-layout--with-timeline { grid-template-columns: minmax(0, 1fr) 64px; } +.message-layout--with-timeline::after { + content: ""; + position: absolute; + top: 0; + bottom: 0; + right: 64px; + width: 1px; + background-color: var(--border-muted); + pointer-events: none; +} + @media (max-width: 720px) { .message-layout--with-timeline { grid-template-columns: minmax(0, 1fr) 40px; } + + .message-layout--with-timeline::after { + right: 40px; + } } .message-stream-shell { @@ -22,19 +38,21 @@ display: flex; flex-direction: column; position: relative; -} + } -.message-stream-shell .message-stream { + + .message-stream-shell .message-stream { flex: 1 1 auto; min-height: 0; -} - -.message-timeline-sidebar { + } + + .message-timeline-sidebar { width: 64px; min-height: 0; display: flex; flex-direction: column; -} + } + @media (max-width: 720px) { .message-timeline-sidebar { diff --git a/packages/ui/src/styles/panels.css b/packages/ui/src/styles/panels.css index 7cf4a11b..96dc0553 100644 --- a/packages/ui/src/styles/panels.css +++ b/packages/ui/src/styles/panels.css @@ -488,6 +488,7 @@ @apply flex flex-1 min-h-0 flex-col; background-color: var(--surface-base); color: inherit; + overflow: hidden; } /* Session list component */ diff --git a/packages/ui/src/styles/panels/session-layout.css b/packages/ui/src/styles/panels/session-layout.css index 54531963..3db68f19 100644 --- a/packages/ui/src/styles/panels/session-layout.css +++ b/packages/ui/src/styles/panels/session-layout.css @@ -3,6 +3,7 @@ @apply flex flex-1 min-h-0 flex-col; background-color: var(--surface-base); color: inherit; + overflow: hidden; } .session-list-container {