diff --git a/webapp/channels/src/components/profile_popover/profile_popover.scss b/webapp/channels/src/components/profile_popover/profile_popover.scss index 2e93edd4bb2..308181a862a 100644 --- a/webapp/channels/src/components/profile_popover/profile_popover.scss +++ b/webapp/channels/src/components/profile_popover/profile_popover.scss @@ -15,18 +15,30 @@ $profilePopoverBorderWidth: 1px; border-radius: 4px; background: var(--center-channel-bg); box-shadow: var(--elevation-4); + overflow-x: hidden; overflow-y: auto; - .user-profile-popover-title { + .user-profile-popover_container { + display: flex; + height: 100%; + flex-direction: column; + } + + .user-profile-popover-title { + position: sticky; + z-index: 1; + top: 0; display: flex; - max-width: calc($profilePopoverWidth - 40px); flex-wrap: nowrap; align-items: center; justify-content: flex-start; justify-content: end; + justify-content: space-between; padding: 12px 8px 12px 8px; + background: var(--center-channel-bg); .user-popover__role { + max-width: calc($profilePopoverWidth - 40px); flex-grow: 1; background: unset; padding-inline-start: 8px; @@ -196,7 +208,6 @@ $profilePopoverBorderWidth: 1px; padding: 0 16px 12px 16px; .user-popover__subtitle { - display: flex; margin-bottom: 4px; font-size: 11px; font-weight: 600; @@ -239,6 +250,12 @@ $profilePopoverBorderWidth: 1px; background: none; } } + } + + .user-profile-popover-bottom-row { + position: sticky; + bottom: 0; + background: var(--center-channel-bg); .user-popover__bottom-row-container { display: flex; diff --git a/webapp/channels/src/components/profile_popover/profile_popover.tsx b/webapp/channels/src/components/profile_popover/profile_popover.tsx index 238cbc8363d..a601bd8b08a 100644 --- a/webapp/channels/src/components/profile_popover/profile_popover.tsx +++ b/webapp/channels/src/components/profile_popover/profile_popover.tsx @@ -154,7 +154,7 @@ const ProfilePopover = ({ const fullname = overwriteName || Utils.getFullName(user); return ( - <> +
+
+

- + ); }; diff --git a/webapp/channels/src/components/profile_popover/profile_popover_controller.tsx b/webapp/channels/src/components/profile_popover/profile_popover_controller.tsx index dc303e41a01..41c5a47fb86 100644 --- a/webapp/channels/src/components/profile_popover/profile_popover_controller.tsx +++ b/webapp/channels/src/components/profile_popover/profile_popover_controller.tsx @@ -10,6 +10,7 @@ import { useDismiss, useInteractions, useRole, + shift, FloatingFocusManager, FloatingOverlay, FloatingPortal, @@ -82,7 +83,7 @@ export function ProfilePopoverController open: isOpen, onOpenChange: setOpen, whileElementsMounted: autoUpdate, - middleware: [autoPlacement()], + middleware: [autoPlacement(), shift()], }); const {isMounted, styles: transitionStyles} = useTransitionStyles(floatingContext, TRANSITION_STYLE_PROPS);