Redesign social conversations and shared music

apps/web/src/widgets/AppShell.module.css

@@ -257,6 +257,11 @@
   animation: pipuIn 0.2s ease-out;
 }
 
+/* Communication owns its scroll areas so its composer stays above either player. */
+.socialContent { display: flex; flex-direction: column; overflow: hidden; }
+.socialContent > :not(.routeIn) { flex-shrink: 0; }
+.socialContent .routeIn { display: flex; flex: 1; min-height: 0; }
+
 @media (max-width: 1023px) {
   .shell {
     --side-w: 72px;

apps/web/src/widgets/AppShell.tsx

@@ -311,7 +311,7 @@ function Shell() {
 function ShellMain() {
   const key = useRouterState({ select: (st) => st.location.pathname });
   return (
-    <main id="content" className={s.content} tabIndex={-1}>
+    <main id="content" className={`${s.content} ${key === '/friends' ? s.socialContent : ''}`} tabIndex={-1}>
       <DesktopOfflineBanner />
       <ListeningBanner />
       <div key={key} className={s.routeIn}>