fix: float teacher introductions above a centered welcome
This commit is contained in:
1 parent
521e1ee167
commit
5de8ea823d
6 files changed
+53
-28
No files matched your search
@@ -8,19 +8,18 @@ export function CodingChatBody({ welcome, hidden, bubble, children }: {
|
||||
useLayoutEffect(() => {
|
||||
const body = ref.current;
|
||||
const content = body?.querySelector<HTMLElement>('.classroom-chat-view');
|
||||
if (!body || !content || hidden || !bubble) return;
|
||||
if (!body || !content || !welcome || hidden || !bubble) return;
|
||||
const update = () => {
|
||||
const area = body.getBoundingClientRect();
|
||||
const message = bubble.getBoundingClientRect();
|
||||
const overlaps = message.height > 0 && message.right > area.left && message.left < area.right && message.bottom > area.top;
|
||||
const rightInset = Math.ceil(area.right - message.left + 24);
|
||||
const besideTeacher = overlaps && area.width >= 900 && area.width - rightInset - 24 >= 420;
|
||||
// Reserve the same right rail for the welcome and bottom input. The teacher keeps its own fixed width.
|
||||
body.style.paddingLeft = besideTeacher ? '24px' : '';
|
||||
body.style.paddingRight = besideTeacher ? `${rightInset}px` : '';
|
||||
// Put compact-screen clearance inside the scrolling heading, never around the fixed bottom input.
|
||||
content.style.setProperty('--teacher-top-inset', welcome && overlaps && !besideTeacher
|
||||
? `${Math.max(0, Math.ceil(message.bottom - content.getBoundingClientRect().top))}px` : '0px');
|
||||
// The teacher floats over the page; it never narrows or shifts the main column.
|
||||
// Only compact screens need scrollable space to reveal the welcome below the overlay.
|
||||
if (overlaps && area.width < 900) {
|
||||
content.style.setProperty('--teacher-top-inset', `${Math.max(0, Math.ceil(message.bottom - content.getBoundingClientRect().top + 24))}px`);
|
||||
} else {
|
||||
content.style.removeProperty('--teacher-top-inset');
|
||||
}
|
||||
};
|
||||
update();
|
||||
const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(update);
|
||||
@@ -28,7 +27,6 @@ export function CodingChatBody({ welcome, hidden, bubble, children }: {
|
||||
window.addEventListener('resize', update);
|
||||
return () => {
|
||||
observer?.disconnect(); window.removeEventListener('resize', update);
|
||||
body.style.paddingLeft = ''; body.style.paddingRight = '';
|
||||
content.style.removeProperty('--teacher-top-inset');
|
||||
};
|
||||
}, [welcome, hidden, bubble]);
|
||||
|
||||
Reference in new issue
Block a user