Neo: 16px list gutter, forum cards apart in narrow lists, inside titles aligned (#5885)

- layout.padding_content: lists from 40rem sit 16px in (m-2 plus the items' 8px), like the side
  panels, instead of 12px until 48rem; the first card lines up with the panels' top.
- Forum rows: 16px apart in a narrow list on sm+ screens (a side column), where they had no gap.
- Browse inside title: its row takes the list items' spacing classes (without widths) in a
  @container/list, so it lines up with the cards instead of a fixed double p-2.

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

neo/packages/app/components/elements/browse.js

@@ -217,6 +217,12 @@ export default function Browse(props) {
     )
 
     const layout = layoutForList(data.module);
+    // The inside title lines up with the cards: its row takes the list items' spacing classes
+    // (container-query paddings and margins from `layoutForList`), without their widths.
+    const titleInset = useMemo(
+        () => layout.split(/\s+/).filter((c) => c && !/(^|:)w-/.test(c)).join(' '),
+        [layout]
+    );
     const Preload = useMemo(
         () => getSkeletonForList(sSkeleton, numColumns, true, layout, renderItem),
         [sSkeleton, numColumns, layout, renderItem]
@@ -434,14 +440,13 @@ export default function Browse(props) {
         <BlockWrapper {...props.blockWrapperProps}>
             <View className={`w-full ${isOneLine ? '  ' : 'web:h-full '}`}>
                 <View className="w-full" ></View>
-                <View className={`w-full ${props.showBg ? blockTheme['u-block-bg'] + ' ' + blockTheme['u-block-pad'] + ' ' + blockTheme['u-block-base'] : ''} ${responsiveClasses('rounded', props.blockWrapperProps?.config?.rounded)}`} style={isOneLine || !isWeb ? {} : styles}>
+                {/* `@container/list`: the title row's item classes query the list's width, like the items. */}
+                <View className={`w-full @container/list ${props.showBg ? blockTheme['u-block-bg'] + ' ' + blockTheme['u-block-pad'] + ' ' + blockTheme['u-block-base'] : ''} ${responsiveClasses('rounded', props.blockWrapperProps?.config?.rounded)}`} style={isOneLine || !isWeb ? {} : styles}>
                     {isShowTitleInside && (
-                        <Row className={`items-center justify-between gap-2 ${props.showBg ? '' : 'p-2 '}`}>
-                             <View className="p-2">
-                                <BlockTitle>
+                        <Row className={`items-center justify-between gap-2 ${titleInset}`}>
+                            <BlockTitle>
                                 {t(props.block.title)}
-                                </BlockTitle>
-                            </View>
+                            </BlockTitle>
                             {!!props.addLink && (
                                 <NeoButtonLink
                                     href={props.addLink.url}

neo/packages/app/default/functions.js

@@ -42,8 +42,10 @@ export function layoutForList(endpoint, unitMode = '') {
     if (!endpoint || requestUrl?.includes('bx_timeline') || paramsRequestUrl?.includes('bx_timeline') || unitName == "notifications")
         return 'w-full';
 
+    // Forum rows: 2px apart on phones; 16px apart in a narrow list on wider screens (a side
+    // column); from 40rem each card pads 8px instead.
     if (moduleName == 'bx_forum' || requestUrl?.includes('r=bx_forum'))
-         return 'w-full mb-0.5 sm:mb-0 @list-sm/list:p-2 @list-sm/list:m-0';
+         return 'w-full mb-0.5 sm:mb-4 @list-sm/list:p-2 @list-sm/list:m-0';
 
     if (moduleName == 'bx_groups' || requestUrl?.includes('r=bx_groups'))
         return 'w-full @list-sm/list:w-1/2 @list-md/list:w-1/3 @list-lg/list:w-1/4 p-1.5';

neo/packages/app/settings/layout.js

@@ -41,7 +41,9 @@ export const settingsLayout = {
         max_width_landing: 'w-full max-w-8xl ',
         max_width_block: ' max-w-8xl ',
        
-        padding_content: ' @list-sm/list:m-1 @list-md/list:m-2',
+        // Lists from 40rem sit 16px in (with the items' 8px padding), as the side panels do;
+        // narrower lists run their cards to the edges.
+        padding_content: ' @list-sm/list:m-2',
         feed_container: ' w-full flex-1 max-w-3xl sm:p-4 mx-auto ',
         post_container: ' max-w-3xl w-full flex-1 bg-card text-card-foreground rounded-2xl p-3 sm:py-4 lg:my-4 mx-auto ', // for hor = max-w-screen-xl, for ver = max-w-screen-lg