51 lines
1.8 KiB
TypeScript
51 lines
1.8 KiB
TypeScript
import { style } from '@vanilla-extract/css';
|
|
import { color, config, toRem } from 'folds';
|
|
import { VOJO_HORSESHOE_RADIUS_PX } from '../../styles/horseshoe';
|
|
|
|
// Right-side profile pane sized like the members drawer family —
|
|
// wide enough for the identity card + chips without dominating the
|
|
// chat. Clamp keeps it readable on narrow desktops and prevents
|
|
// runaway width on ultra-wide displays.
|
|
//
|
|
// Left edge is rounded (TL + BL) to mirror the chat column's TR / BR
|
|
// carves across the 12px horseshoe void gap rendered by Room.tsx —
|
|
// same design language as the page-nav <-> chat split. `overflow:
|
|
// hidden` keeps the rounded corners clean against the header /
|
|
// scroll content; the void colour beneath is painted by the parent
|
|
// flex row, not by the panel itself.
|
|
export const panel = style({
|
|
flexShrink: 0,
|
|
width: `clamp(${toRem(300)}, 25%, ${toRem(380)})`,
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
backgroundColor: color.Surface.Container,
|
|
minHeight: 0,
|
|
overflow: 'hidden',
|
|
borderTopLeftRadius: toRem(VOJO_HORSESHOE_RADIUS_PX),
|
|
borderBottomLeftRadius: toRem(VOJO_HORSESHOE_RADIUS_PX),
|
|
});
|
|
|
|
// Match the chat header's left gutter (RoomViewHeaderDm uses S200
|
|
// override) so the title sits at the same x-offset as the chat
|
|
// header's avatar — keeps the two rows visually balanced.
|
|
export const header = style({
|
|
paddingLeft: config.space.S300,
|
|
});
|
|
|
|
// Functional overflow without a visible scrollbar. The pane's
|
|
// content (hero + info rows + actions) almost always fits, but
|
|
// moderation alerts can push past — we keep scrolling working for
|
|
// that case while hiding the scrollbar chrome that the user asked
|
|
// us to drop.
|
|
export const scrollWrap = style({
|
|
flex: 1,
|
|
minHeight: 0,
|
|
overflow: 'auto',
|
|
scrollbarWidth: 'none',
|
|
selectors: {
|
|
'&::-webkit-scrollbar': {
|
|
display: 'none',
|
|
},
|
|
},
|
|
});
|
|
|