diff --git a/js/app/bun.lock b/js/app/bun.lock
index f0a144d8e..7879fb30b 100644
--- a/js/app/bun.lock
+++ b/js/app/bun.lock
@@ -1,6 +1,5 @@
 {
   "lockfileVersion": 1,
-  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "@coparse/monorepo",
diff --git a/js/app/packages/app/component/split-layout/components/SplitContainer.tsx b/js/app/packages/app/component/split-layout/components/SplitContainer.tsx
index 5bac62286..3ab6603bf 100644
--- a/js/app/packages/app/component/split-layout/components/SplitContainer.tsx
+++ b/js/app/packages/app/component/split-layout/components/SplitContainer.tsx
@@ -107,7 +107,7 @@ export function SplitContainer(
             <div class="flex flex-col min-h-0 size-full">
               <SplitHeader ref={setHeaderRef} />
               <SplitToolbar ref={setToolbarRef} />
-              <div class="size-full overflow-hidden">{props.children}</div>
+              <div class="@container/split size-full overflow-hidden">{props.children}</div>
               <Show when={panel.handle.isSpotLight()}>
                 <MacroJump tabbableParent={ref} />
               </Show>
diff --git a/js/app/packages/macro-entity/src/components/EntityWithEverything.tsx b/js/app/packages/macro-entity/src/components/EntityWithEverything.tsx
index 40a98276e..46ff92447 100644
--- a/js/app/packages/macro-entity/src/components/EntityWithEverything.tsx
+++ b/js/app/packages/macro-entity/src/components/EntityWithEverything.tsx
@@ -502,16 +502,55 @@ export function EntityWithEverything(
       const isSearch = () => isSearchEntity(props.entity);
 
       return (
-        <div class="flex gap-1 items-center text-sm min-w-0 w-full truncate overflow-hidden">
+        <div class="flex gap-1 items-center text-sm min-w-0 w-full truncate overflow-hidden @max-sm/split:flex-col @max-sm/split:items-start @max-sm/split:gap-1 @max-sm/split:truncate-none">
           {/* sometimes senderName and senderEmail are the same */}
           <div
-            class="flex gap-2 font-semibold shrink-0"
+            class="flex gap-2 items-center font-semibold shrink-0 @max-sm/split:w-full @max-sm/split:truncate"
             classList={{
               'w-[20cqw]': !isSearch(),
             }}
           >
+            {/* Icon inline with sender in narrow mode */}
+            <div class="hidden @max-sm/split:flex size-[1em] shrink-0 items-center justify-center relative group/icon-checkbox">
+              {/* Checkbox for narrow mode - shown on hover or when checked */}
+              <button
+                type="button"
+                class="absolute inset-0 flex items-center justify-center opacity-0 group-hover/icon-checkbox:opacity-100 transition-opacity"
+                classList={{
+                  'opacity-100': props.checked,
+                }}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  props.onChecked?.(!props.checked, e.shiftKey);
+                }}
+                data-blocks-navigation
+              >
+                <div
+                  class="size-[0.875em] flex items-center justify-center rounded-xs border border-edge-muted pointer-events-none"
+                  classList={{
+                    'bg-accent border-accent': props.checked,
+                  }}
+                >
+                  <Show when={props.checked}>
+                    <CheckIcon class="w-full h-full text-panel" />
+                  </Show>
+                </div>
+              </button>
+              {/* Icon - hidden on hover in narrow mode when not checked */}
+              <div
+                class="flex items-center justify-center group-hover/icon-checkbox:opacity-0 transition-opacity"
+                classList={{
+                  'opacity-0': props.checked,
+                }}
+              >
+                <Dynamic
+                  component={getIcon().icon}
+                  class={`flex size-full ${getIcon().foreground}`}
+                />
+              </div>
+            </div>
             {/* Sender Name */}
-            <div class="truncate">
+            <div class="truncate @max-sm/split:min-w-0">
               {displayedNames() ??
                 props.entity.senderName ??
                 props.entity.senderEmail?.split('@')[0]}
@@ -529,27 +568,46 @@ export function EntityWithEverything(
           </div>
           {/* Subject */}
           {/*<ImportantBadge active={props.importantIndicatorActive} />*/}
-          <div class="flex items-center w-full gap-2 flex-1 min-w-0">
-            <div
-              class="shrink-0 truncate"
-              classList={{
-                'font-regular text-ink-disabled': isSearch(),
-                'font-medium': !isSearch(),
-              }}
-            >
-              <Show when={isSearch()}> – </Show>
-              <Show when={searchHighlightName()} fallback={props.entity.name}>
-                {(name) => (
-                  <StaticMarkdown
-                    markdown={name()}
-                    theme={unifiedListMarkdownTheme}
-                    singleLine={true}
-                  />
-                )}
+          <div class="flex items-center w-full gap-2 flex-1 min-w-0 @max-sm/split:flex-col @max-sm/split:items-start @max-sm/split:w-full @max-sm/split:gap-1">
+            <div class="flex items-center gap-2 flex-1 min-w-0 @max-sm/split:w-full @max-sm/split:justify-between @max-sm/split:min-w-0">
+              <div
+                class="shrink-0 truncate @max-sm/split:min-w-0 @max-sm/split:flex-1"
+                classList={{
+                  'font-regular text-ink-disabled': isSearch(),
+                  'font-medium': !isSearch(),
+                }}
+              >
+                <Show when={isSearch()}>
+                  <span class="@max-sm/split:hidden"> – </span>
+                </Show>
+                <Show when={searchHighlightName()} fallback={props.entity.name}>
+                  {(name) => (
+                    <StaticMarkdown
+                      markdown={name()}
+                      theme={unifiedListMarkdownTheme}
+                      singleLine={true}
+                    />
+                  )}
+                </Show>
+              </div>
+              {/* Body snippet - inline in wide mode */}
+              <div class="truncate shrink grow opacity-60 @max-sm/split:hidden">
+                {props.entity.snippet}
+              </div>
+              {/* Timestamp inline with subject in narrow mode */}
+              <Show when={props.timestamp ?? props.entity.updatedAt}>
+                {(date) => {
+                  const formattedDate = createFormattedDate(date());
+                  return (
+                    <span class="hidden @max-sm/split:inline shrink-0 whitespace-nowrap text-xs font-mono uppercase text-ink-extra-muted">
+                      {formattedDate()}
+                    </span>
+                  );
+                }}
               </Show>
             </div>
-            {/* Body  */}
-            <div class="truncate shrink grow opacity-60">
+            {/* Body snippet - below subject in narrow mode */}
+            <div class="hidden @max-sm/split:block truncate w-full text-xs opacity-60">
               {props.entity.snippet}
             </div>
           </div>
@@ -579,55 +637,117 @@ export function EntityWithEverything(
     };
 
     return (
-      <div class="flex gap-2 items-center min-w-0 w-fit max-w-full overflow-hidden">
-        <span class="flex gap-1 truncate font-medium text-sm shrink-0 items-center">
-          <span
-            class="font-semibold truncate"
-            classList={{
-              'w-[20cqw]': !props.showUnrollNotifications,
-            }}
-          >
-            <Show when={searchHighlightName()} fallback={props.entity.name}>
-              {(name) => (
-                <StaticMarkdown
-                  markdown={name()}
-                  theme={unifiedListMarkdownTheme}
-                  singleLine={true}
-                />
-              )}
+      <div class="flex gap-2 items-center min-w-0 w-fit max-w-full overflow-hidden @max-sm/split:flex-col @max-sm/split:items-start @max-sm/split:w-full @max-sm/split:gap-1">
+        <span class="flex gap-1 truncate font-medium text-sm shrink-0 items-center @max-sm/split:w-full @max-sm/split:flex-col @max-sm/split:items-start @max-sm/split:gap-1">
+          <div class="flex items-center gap-2 w-full @max-sm/split:justify-between @max-sm/split:min-w-0">
+            {/* Icon inline with title in narrow mode */}
+            <div class="hidden @max-sm/split:flex size-[1em] shrink-0 items-center justify-center relative group/icon-checkbox-nonemail">
+              {/* Checkbox for narrow mode - shown on hover or when checked */}
+              <button
+                type="button"
+                class="absolute inset-0 flex items-center justify-center opacity-0 group-hover/icon-checkbox-nonemail:opacity-100 transition-opacity"
+                classList={{
+                  'opacity-100': props.checked,
+                }}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  props.onChecked?.(!props.checked, e.shiftKey);
+                }}
+                data-blocks-navigation
+              >
+                <div
+                  class="size-[0.875em] flex items-center justify-center rounded-xs border border-edge-muted pointer-events-none"
+                  classList={{
+                    'bg-accent border-accent': props.checked,
+                  }}
+                >
+                  <Show when={props.checked}>
+                    <CheckIcon class="w-full h-full text-panel" />
+                  </Show>
+                </div>
+              </button>
+              {/* Icon - hidden on hover in narrow mode when not checked */}
+              <div
+                class="flex items-center justify-center group-hover/icon-checkbox-nonemail:opacity-0 transition-opacity"
+                classList={{
+                  'opacity-0': props.checked,
+                }}
+              >
+                <Show
+                  when={
+                    props.entity.type === 'channel' &&
+                    props.entity.channelType === 'direct_message'
+                  }
+                  fallback={
+                    <Dynamic
+                      component={getIcon().icon}
+                      class={`flex size-full ${getIcon().foreground}`}
+                    />
+                  }
+                >
+                  <DirectMessageIcon entity={props.entity} />
+                </Show>
+              </div>
+            </div>
+            <span
+              class="font-semibold truncate @max-sm/split:min-w-0 @max-sm/split:flex-1"
+              classList={{
+                'w-[20cqw]': !props.showUnrollNotifications,
+              }}
+            >
+              <Show when={searchHighlightName()} fallback={props.entity.name}>
+                {(name) => (
+                  <StaticMarkdown
+                    markdown={name()}
+                    theme={unifiedListMarkdownTheme}
+                    singleLine={true}
+                  />
+                )}
+              </Show>
+            </span>
+            {/* Timestamp inline with title in narrow mode */}
+            <Show when={props.timestamp ?? props.entity.updatedAt}>
+              {(date) => {
+                const formattedDate = createFormattedDate(date());
+                return (
+                  <span class="hidden @max-sm/split:inline shrink-0 whitespace-nowrap text-xs font-mono uppercase text-ink-extra-muted">
+                    {formattedDate()}
+                  </span>
+                );
+              }}
             </Show>
-          </span>
+          </div>
 
           <Show when={showLatestMessageInfo()}>
-            <div class="flex items-center gap-1">
+            <div class="flex items-center gap-1 @max-sm/split:w-full @max-sm/split:flex-col @max-sm/split:items-start @max-sm/split:gap-1">
               {/*<ImportantBadge active={props.importantIndicatorActive} />*/}
-              <span class="font-medium shrink-0 truncate">
+              <span class="font-medium shrink-0 truncate @max-sm/split:w-full">
                 {userNameFromSender()}
               </span>
+              <Show when={latestMessage()}>
+                {(lastMessage) => (
+                  <div class="truncate shrink grow opacity-60 flex items-center @max-sm/split:w-full @max-sm/split:text-xs">
+                    {/* TODO (seamus): Channels endpoint does not return any information about attachments. If we have an empty message, assume it's attachments.*/}
+                    <Show
+                      when={lastMessage().content.trim()}
+                      fallback={
+                        <span class="italic text-ink-disabled">
+                          Attached items
+                        </span>
+                      }
+                    >
+                      {(content) => (
+                        <StaticMarkdown
+                          markdown={content()}
+                          theme={unifiedListMarkdownTheme}
+                          singleLine={true}
+                        />
+                      )}
+                    </Show>
+                  </div>
+                )}
+              </Show>
             </div>
-            <Show when={latestMessage()}>
-              {(lastMessage) => (
-                <div class="truncate shrink grow opacity-60 flex items-center">
-                  {/* TODO (seamus): Channels endpoint does not return any information about attachments. If we have an empty message, assume it's attachments.*/}
-                  <Show
-                    when={lastMessage().content.trim()}
-                    fallback={
-                      <span class="italic text-ink-disabled">
-                        Attached items
-                      </span>
-                    }
-                  >
-                    {(content) => (
-                      <StaticMarkdown
-                        markdown={content()}
-                        theme={unifiedListMarkdownTheme}
-                        singleLine={true}
-                      />
-                    )}
-                  </Show>
-                </div>
-              )}
-            </Show>
           </Show>
         </span>
       </div>
@@ -703,7 +823,7 @@ export function EntityWithEverything(
       <div
         data-entity
         data-entity-id={props.entity.id}
-        class="w-full min-w-0 grid flex-1 items-center suppress-css-bracket grid-cols-[2rem_1fr_auto] pr-2"
+        class="w-full min-w-0 grid flex-1 items-center suppress-css-bracket grid-cols-[2rem_1fr_auto] @max-sm/split:flex @max-sm/split:flex-col pr-2 @max-sm/split:px-2 @max-sm/split:py-2"
         onClick={(e) => {
           if (blocksNavigation(e)) return;
           props.onClick?.(props.entity, e);
@@ -735,7 +855,7 @@ export function EntityWithEverything(
       >
         <button
           type="button"
-          class="col-1 size-full relative group/button flex items-center justify-center bracket-never"
+          class="col-1 size-full relative group/button flex items-center justify-center bracket-never @max-sm/split:hidden"
           onClick={(e) => {
             props.onChecked?.(!props.checked, e.shiftKey);
           }}
@@ -754,7 +874,7 @@ export function EntityWithEverything(
             </Show>
           </div>
           <Show when={props.showLeftColumnIndicator && !props.checked}>
-            <div class="absolute inset-0 flex items-center justify-center -z-1">
+            <div class="absolute inset-0 flex items-center justify-center -z-1 @max-sm/split:hidden">
               <UnreadIndicator active={props.unreadIndicatorActive} />
             </div>
           </Show>
@@ -762,38 +882,72 @@ export function EntityWithEverything(
         {/* Left Column Indicator(s) */}
         {/* Icon and name - top left on mobile, first item on desktop */}
         <div
-          class="min-h-10 min-w-[50px] flex flex-row items-center gap-2 col-2"
+          class="min-h-10 min-w-[50px] flex flex-row items-center gap-2 col-2 @max-sm/split:col-auto @max-sm/split:w-full @max-sm/split:min-h-0 @max-sm/split:items-start"
           classList={{
             grow: props.contentPlacement === 'bottom-row',
             'opacity-70': props.fadeIfRead && !props.unreadIndicatorActive,
           }}
         >
-          <div class="flex size-5 shrink-0 items-center justify-center">
-            <Show
-              when={
-                props.entity.type === 'channel' &&
-                props.entity.channelType === 'direct_message'
-              }
-              fallback={
-                <Dynamic
-                  component={getIcon().icon}
-                  class={`flex size-full ${getIcon().foreground}`}
-                />
-              }
+          {/* Icon/Checkbox container - in narrow mode, shows icon by default, checkbox on hover */}
+          {/* For emails, icon is inline with sender, so hide this container in narrow mode */}
+          <div class="flex size-5 shrink-0 items-center justify-center relative group/icon-checkbox @max-sm/split:hidden">
+            {/* Checkbox for narrow mode - shown on hover or when checked, hidden at larger widths */}
+            <button
+              type="button"
+              class="hidden @max-sm/split:flex @min-sm/split:hidden absolute inset-0 items-center justify-center opacity-0 group-hover/icon-checkbox:opacity-100 transition-opacity"
+              classList={{
+                'opacity-100': props.checked,
+              }}
+              onClick={(e) => {
+                e.stopPropagation();
+                props.onChecked?.(!props.checked, e.shiftKey);
+              }}
+              data-blocks-navigation
             >
-              <DirectMessageIcon entity={props.entity} />
-            </Show>
+              <div
+                class="size-4 p-0.5 flex items-center justify-center rounded-xs border border-edge-muted pointer-events-none"
+                classList={{
+                  'bg-accent border-accent': props.checked,
+                }}
+              >
+                <Show when={props.checked}>
+                  <CheckIcon class="w-full h-full text-panel" />
+                </Show>
+              </div>
+            </button>
+            {/* Icon - hidden on hover in narrow mode when not checked */}
+            <div
+              class="flex items-center justify-center @max-sm/split:group-hover/icon-checkbox:opacity-0 @max-sm/split:transition-opacity"
+              classList={{
+                '@max-sm/split:opacity-0': props.checked,
+              }}
+            >
+              <Show
+                when={
+                  props.entity.type === 'channel' &&
+                  props.entity.channelType === 'direct_message'
+                }
+                fallback={
+                  <Dynamic
+                    component={getIcon().icon}
+                    class={`flex size-full ${getIcon().foreground}`}
+                  />
+                }
+              >
+                <DirectMessageIcon entity={props.entity} />
+              </Show>
+            </div>
           </div>
           <EntityTitle />
         </div>
         {/* Date and user - top right on mobile, end on desktop  */}
         <div
-          class="row-1 ml-2 @md:ml-4 self-center min-w-0 col-3"
+          class="row-1 ml-2 @md:ml-4 self-center min-w-0 col-3 @max-sm/split:col-auto @max-sm/split:row-auto @max-sm/split:ml-0 @max-sm/split:mt-1 @max-sm/split:self-start @max-sm/split:w-full"
           classList={{
             'opacity-50': props.fadeIfRead && !props.unreadIndicatorActive,
           }}
         >
-          <div class="flex flex-row items-center justify-end gap-2 min-w-0">
+          <div class="flex flex-row items-center justify-end gap-2 min-w-0 @max-sm/split:justify-start @max-sm/split:flex-wrap">
             <Show when={properties().length > 0}>
               <div class="pr-2 overflow-hidden shrink min-w-0">
                 <PropertyPills properties={properties()} />
@@ -817,14 +971,14 @@ export function EntityWithEverything(
               {(date) => {
                 const formattedDate = createFormattedDate(date());
                 return (
-                  <span class="shrink-0 whitespace-nowrap text-xs font-mono uppercase text-ink-extra-muted">
+                  <span class="shrink-0 whitespace-nowrap text-xs font-mono uppercase text-ink-extra-muted @max-sm/split:hidden">
                     {formattedDate()}
                   </span>
                 );
               }}
             </Show>
             <Show when={props.highlighted && props.onClickRowAction}>
-              <div class="absolute top-1 right-1 items-center flex">
+              <div class="absolute top-1 right-1 items-center flex @max-sm/split:hidden">
                 <Tooltip
                   tooltip={
                     <LabelAndHotKey
@@ -851,7 +1005,7 @@ export function EntityWithEverything(
         </div>
         {/* Content Hits from Search */}
         <Show when={contentHitData().length > 0}>
-          <div class="relative row-2 col-2 col-end-4 pb-2">
+          <div class="relative row-2 col-2 col-end-4 pb-2 @max-sm/split:row-auto @max-sm/split:col-auto @max-sm/split:w-full @max-sm/split:mt-1">
             <CollapsibleList items={contentHitData()} threadBorder>
               {(data, index, count) => (
                 <ContentHitRow
@@ -874,7 +1028,7 @@ export function EntityWithEverything(
             contentHitData().length === 0
           }
         >
-          <div class="relative col-2 col-end-4 pb-2">
+          <div class="relative col-2 col-end-4 pb-2 @max-sm/split:col-auto @max-sm/split:w-full @max-sm/split:mt-1">
             <CollapsibleList items={notDoneNotifications()} threadBorder>
               {(notification) => (
                 <NotificationRow