MM-62545 Pin bottom actions and top line (#29860)

* pin bottom actions and top line.

* lint fixes

* lint fixes

---------

Co-authored-by: Mattermost Build <build@mattermost.com>

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;

webapp/channels/src/components/profile_popover/profile_popover.tsx

@@ -154,7 +154,7 @@ const ProfilePopover = ({
     const fullname = overwriteName || Utils.getFullName(user);
 
     return (
-        <>
+        <div className='user-profile-popover_container'>
             <ProfilePopoverTitle
                 channelId={channelId}
                 isBot={user.is_bot}
@@ -211,6 +211,8 @@ const ProfilePopover = ({
                     returnFocus={handleReturnFocus}
                     hide={hide}
                 />
+            </div>
+            <div className='user-profile-popover-bottom-row'>
                 <hr className='user-popover__bottom-row-hr'/>
                 <ProfilePopoverOverrideDisclaimer
                     haveOverrideProp={haveOverrideProp}
@@ -242,7 +244,7 @@ const ProfilePopover = ({
                     status={hideStatus ? null : status}
                 />
             </div>
-        </>
+        </div>
     );
 };
 

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<TriggerComponentType = HTMLSpanElement>
         open: isOpen,
         onOpenChange: setOpen,
         whileElementsMounted: autoUpdate,
-        middleware: [autoPlacement()],
+        middleware: [autoPlacement(), shift()],
     });
 
     const {isMounted, styles: transitionStyles} = useTransitionStyles(floatingContext, TRANSITION_STYLE_PROPS);