More Media Gallery fixes

ts/components/FileThumbnail.dom.tsx

@@ -18,7 +18,7 @@ export function FileThumbnail(props: PropsType): JSX.Element {
       className={tw(
         'flex items-center justify-center',
         'relative',
-        'mx-1.5 h-10 w-7.5',
+        'mx-0.75 h-10 w-7.5',
         'bg-contain bg-center bg-no-repeat',
         'bg-[url(../images/generic-file.svg)]'
       )}

ts/components/conversation/media-gallery/AttachmentSection.dom.tsx

@@ -75,7 +75,7 @@ export function AttachmentSection({
     case 'media':
       return (
         <section className={tw('ps-5')}>
-          <h2 className={tw('ps-1 pt-4 pb-2 font-semibold')}>{header}</h2>
+          <h2 className={tw('ps-1 pt-4 pb-2 type-body-medium')}>{header}</h2>
           <div className={tw('flex flex-row flex-wrap gap-1 pb-1')}>
             {verified.entries.map(mediaItem => {
               return (
@@ -94,8 +94,8 @@ export function AttachmentSection({
     case 'audio':
     case 'link':
       return (
-        <section className={tw('mb-3 border-b-border-primary px-6 pb-3')}>
-          <h2 className={tw('pt-1.5 pb-2 font-semibold')}>{header}</h2>
+        <section className={tw('mx-4 mb-3 border-b-border-primary px-2 pb-3')}>
+          <h2 className={tw('pt-1.5 pb-2 type-body-medium')}>{header}</h2>
           <div>
             {verified.entries.map(mediaItem => {
               return (

ts/components/conversation/media-gallery/LinkPreviewItem.dom.tsx

@@ -64,7 +64,7 @@ export function LinkPreviewItem({
       <div
         className={tw(
           'flex size-9 items-center justify-center',
-          'overflow-hidden rounded-sm bg-elevated-background-tertiary'
+          'overflow-hidden rounded-sm bg-label-secondary'
         )}
       >
         <AxoSymbol.Icon symbol="link" size={20} label={null} />

ts/components/conversation/media-gallery/MediaGallery.dom.tsx

@@ -168,8 +168,17 @@ function MediaSection({
     );
   });
 
+  const isGrid = mediaItems.at(0)?.type === 'media';
+
   return (
-    <div className={tw('flex min-w-0 grow flex-col divide-y')}>{sections}</div>
+    <div
+      className={tw(
+        'flex min-w-0 grow flex-col',
+        isGrid ? undefined : 'divide-y'
+      )}
+    >
+      {sections}
+    </div>
   );
 }