feat: apply figma browse mobile redesign

src/components/messageStream/MessageBubble.tsx

@@ -26,29 +26,31 @@ export function pickBubble(post: Post): BubbleComponent {
 export function MessageBubble({ post }: { post: Post }) {
   const { lang } = useI18n();
   const Bubble = pickBubble(post);
-  const isTextOnly = post.attachments.length === 0;
-  const isVisual = post.attachments.some(
-    (a) => a.kind === "image" || a.kind === "video",
-  );
+  const isVisual =
+    Bubble === AlbumBubble ||
+    Bubble === VideoBubble ||
+    Bubble === ImageBubble ||
+    Bubble === ImageWithTextBubble;
 
   return (
     <div
       id={`post-${post.id}`}
-      className="mx-auto w-full max-w-[380px] md:max-w-[680px] lg:max-w-[900px] xl:max-w-[1120px]"
+      className="mx-auto w-full max-w-[358px] md:max-w-[680px] lg:max-w-[900px] xl:max-w-[1120px]"
     >
       <article
-        className={`relative rounded-2xl bg-ark-panel text-left shadow-sm ${
-          isVisual ? "w-full" : "w-fit max-w-full"
-        } ${isTextOnly ? "px-3 py-2" : "p-2"}`}
+        className={`relative w-full overflow-hidden rounded-2xl bg-[#272632] text-left shadow-sm ${
+          isVisual ? "p-0" : "px-4 py-3"
+        }`}
       >
         <Bubble post={post} />
         <time
           dateTime={post.publishedAt}
-          className="ml-2 mt-1 inline-block float-right text-[10.5px] leading-none text-neutral-500"
+          className={`block text-right text-[12px] leading-[19px] text-[#A8A9AE] ${
+            isVisual ? "px-4 pb-3 pt-3" : "mt-3"
+          }`}
         >
           {formatDateTime(post.publishedAt, lang)}
         </time>
-        <span className="block clear-both" />
       </article>
     </div>
   );