feat: Implement inertial horizontal scrolling for carousel components and enhance text selection handling

src/app/components/message/layout/Base.tsx

@@ -35,6 +35,7 @@ export const MessageTextBody = as<'div', css.MessageTextBodyVariants & { notice?
       size="T400"
       priority={notice ? '300' : '400'}
       className={classNames(css.MessageTextBody({ preWrap, jumboEmoji, emote }), className)}
+      data-allow-text-selection="true"
       {...props}
       ref={ref}
     />

src/app/components/message/layout/layout.css.ts

@@ -215,6 +215,8 @@ export const MessageTextBody = recipe({
     overflow: 'clip',
     overflowY: 'clip',
     lineHeight: '1.5',
+    userSelect: 'text',
+    WebkitUserSelect: 'text',
   },
   variants: {
     preWrap: {

src/app/components/page/Page.tsx

@@ -60,10 +60,12 @@ export const PageNavHeader = as<'header', css.PageNavHeaderVariants>(
 
 export function PageNavContent({
   scrollRef,
+  scrollProps,
   children,
 }: {
   children: ReactNode;
   scrollRef?: MutableRefObject<HTMLDivElement | null>;
+  scrollProps?: React.ComponentProps<typeof Scroll>;
 }) {
   return (
     <Box grow="Yes" direction="Column">
@@ -74,6 +76,7 @@ export function PageNavContent({
         size="300"
         hideTrack
         visibility="Hover"
+        {...scrollProps}
       >
         <div className={css.PageNavContent}>{children}</div>
       </Scroll>