@linktr.ee/messaging-react 3.12.4-rc-1784100747 → 3.12.4-rc-1784101037

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.12.4-rc-1784100747",
+  "version": "3.12.4-rc-1784101037",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,7 +50,7 @@
   },
   "dependencies": {
     "@linktr.ee/component-library": "11.8.6",
-    "@linktr.ee/messaging-core": "2.3.0-rc-1784100747",
+    "@linktr.ee/messaging-core": "2.3.0-rc-1784101037",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/AttachmentCard/AttachmentCard.stories.tsx

@@ -17,7 +17,11 @@ export default meta
 
 const IMAGE_URL = '/image-thumbnail.jpg'
 
-const Template: StoryFn<ComponentProps> = (args) => <AttachmentCard {...args} />
+const Template: StoryFn<ComponentProps> = (args) => (
+  <div className="w-[280px]">
+    <AttachmentCard {...args} />
+  </div>
+)
 
 // Per-variant stories stay in Storybook for browsing/design review but are
 // individually covered by cells in AllVariants — skip in Chromatic.
@@ -216,7 +220,7 @@ export const AllVariants: StoryFn = () => {
   return (
     <div className="grid grid-cols-2 gap-6 p-6">
       {cards.map(({ label, props }) => (
-        <div key={label} className="flex flex-col gap-2">
+        <div key={label} className="flex w-[280px] flex-col gap-2">
           <span className="text-xs text-stone">{label}</span>
           <AttachmentCard {...props} />
         </div>

package/src/components/CustomMessage/LockedAttachment/LockedAttachment.stories.tsx

@@ -59,7 +59,7 @@ const MatrixTableRow: React.FC<{
 const MatrixTableCell: React.FC<{
   isMine: boolean
   children: React.ReactNode
-}> = ({ children }) => <div>{children}</div>
+}> = ({ children }) => <div className="w-[280px]">{children}</div>
 
 export const Text: StoryFn = () => {
   const [isUnlocking, setUnlocking] = useState(false)

package/src/components/CustomMessage/MessageAttachmentConversations.stories.tsx

@@ -88,7 +88,10 @@ const ChatRow: React.FC<{
         ) : null}
       </div>
     ) : null}
-    <div className={role === 'sender' ? 'flex justify-end' : 'flex justify-start'}>
+    <div className={classNames(
+      'w-[280px]',
+      role === 'sender' ? 'flex justify-end' : 'flex justify-start'
+    )}>
       {children}
     </div>
   </div>

package/src/components/CustomMessage/StreamAttachmentMessage.stories.tsx

@@ -44,7 +44,7 @@ const Bubbles: React.FC<{ isMyMessage: boolean; children: React.ReactNode }> = (
             : 'str-chat__message--other'
         )}
       >
-        <div className="str-chat__message-inner">{children}</div>
+        <div className="str-chat__message-inner w-[280px]">{children}</div>
       </div>
     </div>
   </div>

package/src/components/LinkAttachment/LinkAttachment.stories.tsx

@@ -220,7 +220,7 @@ export const LinkApps: StoryFn = () => (
           <tr key={label}>
             <RowLabel>{label}</RowLabel>
             {LINK_APPS.map((app) => (
-              <td key={app.key} className="align-top">
+              <td key={app.key} className="w-[280px] align-top">
                 {renderLinkAppCard(layout, state, app)}
               </td>
             ))}

package/src/components/MediaMessage/MediaMessage.stories.tsx

@@ -165,7 +165,7 @@ export const Attachment: StoryFn = () => (
           Visitor
         </td>
         {VARIANTS.map(({ label, attachment }) => (
-          <td key={label} className="align-top">
+          <td key={label} className="w-[280px] align-top">
             <MediaMessage
               isMyMessage={false}
               message={base({
@@ -182,7 +182,7 @@ export const Attachment: StoryFn = () => (
           Creator
         </td>
         {VARIANTS.map(({ label, attachment }) => (
-          <td key={label} className="align-top">
+          <td key={label} className="w-[280px] align-top">
             <MediaMessage
               isMyMessage={true}
               message={base({
@@ -207,7 +207,7 @@ export const Links: StoryFn = () => (
           Visitor
         </td>
         {LINK_VARIANTS.map(({ label, attachment }) => (
-          <td key={label} className="align-top">
+          <td key={label} className="w-[280px] align-top">
             <MediaMessage
               isMyMessage={false}
               message={base({
@@ -224,7 +224,7 @@ export const Links: StoryFn = () => (
           Creator
         </td>
         {LINK_VARIANTS.map(({ label, attachment }) => (
-          <td key={label} className="align-top">
+          <td key={label} className="w-[280px] align-top">
             <MediaMessage
               isMyMessage={true}
               message={base({
@@ -250,7 +250,7 @@ export const Compound: StoryFn = () => (
           MediaMessage.Visitor
         </td>
         {VARIANTS.map(({ label, attachment }) => (
-          <td key={label} className="align-top">
+          <td key={label} className="w-[280px] align-top">
             <MediaMessage.Visitor
               message={base({
                 attachments: [
@@ -266,7 +266,7 @@ export const Compound: StoryFn = () => (
           MediaMessage.Creator
         </td>
         {VARIANTS.map(({ label, attachment }) => (
-          <td key={label} className="align-top">
+          <td key={label} className="w-[280px] align-top">
             <MediaMessage.Creator
               message={base({
                 attachments: [

package/src/components/MessageAttachment/stories/StoryTable.tsx

@@ -51,9 +51,9 @@ export const StoryRow: React.FC<StoryRowProps> = ({
 }) => (
   <div className="grid grid-cols-[160px_minmax(0,1fr)_minmax(0,1fr)_minmax(0,1fr)] items-start gap-6 py-4">
     <p className="text-xs font-medium text-black/55">{label}</p>
-    <div>{composer ?? null}</div>
-    <div>{sent}</div>
-    <div>{received}</div>
+    <div className="w-[280px]">{composer ?? null}</div>
+    <div className="w-[280px]">{sent}</div>
+    <div className="w-[280px]">{received}</div>
   </div>
 )