Fix nav and profile styling

.changeset/fix-line-on-profiles.md

@@ -0,0 +1,5 @@
+---
+default: patch
+---
+
+Fixed the thin line appearing at the top of unstyled profiles.

src/app/components/nav/styles.css.ts

@@ -107,8 +107,8 @@ export const NavItem = recipe({
 
 export type RoomSelectorVariants = RecipeVariants<typeof NavItem>;
 export const NavItemContent = style({
-  paddingLeft: config.space.S300,
-  paddingRight: config.space.S200,
+  paddingLeft: config.space.S200,
+  paddingRight: config.space.S300,
   height: 'inherit',
   minWidth: 0,
   flexGrow: 1,

src/app/components/user-profile/UserRoomProfile.tsx

@@ -575,7 +575,7 @@ export function UserRoomProfile({ userId, initialProfile }: Readonly<UserRoomPro
           style={{
             backgroundColor: innerColor,
             borderRadius: toRem(5),
-            boxShadow: 'inset 0 1px 2px rgba(0, 0, 0, 0.1)',
+            boxShadow: showCustomHeroCard ? 'inset 0 1px 2px rgba(0, 0, 0, 0.1)' : undefined,
             padding: showCustomHeroCard && innerColor ? config.space.S200 : config.space.S300,
           }}
         >

src/app/features/room-nav/RoomNavCategoryButton.tsx

@@ -10,7 +10,7 @@ export const RoomNavCategoryButton = as<'button', { closed?: boolean }>(
           className={classNames(css.CategoryButton, className)}
           variant="Background"
           radii="400"
-          before={
+          after={
             <Icon
               className={css.CategoryButtonIcon}
               size="50"

src/app/features/room-nav/RoomNavItem.tsx

@@ -419,7 +419,14 @@ export function RoomNavItem({
                 style={hideTextStyling(hideText)}
               >
                 <NavItemContent style={hideTextStyling(hideText)}>
-                  <Box as="span" grow="Yes" alignItems="Center" style={hideTextStyling(hideText)}>
+                  <Box
+                    as="span"
+                    grow="Yes"
+                    alignItems="Center"
+                    justifyContent="Start"
+                    gap="200"
+                    style={hideTextStyling(hideText)}
+                  >
                     <AvatarPresence
                       badge={
                         presence &&

src/app/features/room/CallChatView.tsx

@@ -24,7 +24,15 @@ export function CallChatView() {
     setCurWidth(vcmsgSidebarWidth);
   }, [vcmsgSidebarWidth]);
   return (
-    <>
+    <Box
+      shrink="No"
+      style={{
+        position: 'relative',
+        width: screenSize === ScreenSize.Desktop ? toRem(curWidth) : '100%',
+        flexShrink: 0,
+        flexGrow: 0,
+      }}
+    >
       {!mobileOrTablet() && (
         <SidebarResizer
           setCurWidth={setCurWidth}
@@ -37,7 +45,7 @@ export function CallChatView() {
       )}
       <Page
         style={{
-          width: screenSize === ScreenSize.Desktop ? toRem(curWidth) : '100%',
+          width: '100%',
           flexShrink: 0,
           flexGrow: 0,
         }}
@@ -73,6 +81,6 @@ export function CallChatView() {
           <RoomView eventId={eventId} />
         </Box>
       </Page>
-    </>
+    </Box>
   );
 }