Further fix primary not display

src/components/Note/NoteFooter/NoteFooter.module.scss

@@ -11,10 +11,14 @@
 
 .footer {
   display: grid;
-  grid-template-columns: 128px 128px 128px 128px 1fr;
+  grid-template-columns: 128px 128px 128px 128px 16px;
   position: relative;
   width: 100%;
 
+  &.wide {
+    grid-template-columns: 140px 140px 140px 138px 16px;
+  }
+
   .context {
     background: none;
     display: flex;
@@ -33,6 +37,7 @@
     background-color: unset;
     width: fit-content;
     position: relative;
+    padding-right: 48px;
 
     .likeType {
       @include typeDiv;

src/components/Note/NoteFooter/NoteFooter.tsx

@@ -20,7 +20,7 @@ import NoteContextMenu from '../NoteContextMenu';
 import { getScreenCordinates } from '../../../utils';
 import ZapAnimation from '../../ZapAnimation/ZapAnimation';
 
-const NoteFooter: Component<{ note: PrimalNote, id?: string }> = (props) => {
+const NoteFooter: Component<{ note: PrimalNote, wide?: boolean, id?: string }> = (props) => {
 
   const account = useAccountContext();
   const toast = useToastContext();
@@ -220,8 +220,8 @@ const NoteFooter: Component<{ note: PrimalNote, id?: string }> = (props) => {
         return;
       }
 
-      const newLeft = 24;
-      const newTop = -35;
+      const newLeft = props.wide ? 36 : 24;
+      const newTop = props.wide ? -28 : -28;
 
       medZapAnimation.style.left = `${newLeft}px`;
       medZapAnimation.style.top = `${newTop}px`;
@@ -298,7 +298,6 @@ const NoteFooter: Component<{ note: PrimalNote, id?: string }> = (props) => {
         onTouchStart={opts.onTouchStart ?? (() => {})}
         onTouchEnd={opts.onTouchEnd ?? (() => {})}
         disabled={opts.disabled}
-        title={opts.title || ''}
       >
         <div class={`${buttonTypeClasses[opts.type]}`}>
           <div
@@ -334,7 +333,7 @@ const NoteFooter: Component<{ note: PrimalNote, id?: string }> = (props) => {
   }
 
   return (
-    <div id={props.id} class={styles.footer} ref={footerDiv}>
+    <div id={props.id} class={`${styles.footer} ${props.wide ? styles.wide : ''}`} ref={footerDiv}>
 
       <Show when={showZapAnim()}>
         <ZapAnimation

src/components/Note/NotePrimary/NotePrimary.tsx

@@ -22,10 +22,10 @@ const NotePrimary: Component<{ note: PrimalNote, id?: string }> = (props) => {
       <div class={styles.content}>
 
         <div class={styles.message}>
-          <ParsedNote note={props.note} />
+          <ParsedNote note={props.note} width={574} />
         </div>
 
-        <NoteFooter note={props.note} />
+        <NoteFooter note={props.note} wide={true} />
       </div>
     </div>
   )

src/components/NoteImage/NoteImage.tsx

@@ -49,7 +49,7 @@ const NoteImage: Component<{
   //   if (!img || ratio() <= 1.2) return 'auto';
 
   //   // width of the note over the ratio of the preview image
-  //   const h = 524 / ratio();
+  //   const h = props.width || 524 / ratio();
 
   //   return `${h}px`;
   // };
@@ -73,7 +73,7 @@ const NoteImage: Component<{
   };
 
   const willBeTooBig = () => {
-    const maxW = 524;
+    const maxW = props.width || 524;
 
     const h = maxW / ratio();
 
@@ -119,7 +119,7 @@ const NoteImage: Component<{
           src={src()}
           class={klass()}
           onerror={props.onError}
-          width={willBeTooBig() ? undefined : '524px'}
+          width={willBeTooBig() ? undefined : `${props.width || 524}px`}
         />
       </a>
     </Show>

src/components/ParsedNote/ParsedNote.tsx

@@ -133,6 +133,7 @@ const ParsedNote: Component<{
   noPreviews?: boolean,
   shorten?: boolean,
   isEmbeded?: boolean,
+  width?: number,
 }> = (props) => {
 
   const intl = useIntl();
@@ -146,6 +147,8 @@ const ParsedNote: Component<{
     return `note_${props.note.post.noteId}`;
   }
 
+  const noteWidth = () => props.width || 514;
+
   let thisNote: HTMLDivElement | undefined;
 
   const lightbox = new PhotoSwipeLightbox({
@@ -409,7 +412,7 @@ const ParsedNote: Component<{
         src={url}
         isDev={dev}
         media={image}
-        width={514}
+        width={noteWidth()}
         imageGroup={imageGroup}
         shortHeight={props.shorten}
       />
@@ -455,8 +458,8 @@ const ParsedNote: Component<{
 
         if (mVideo) {
           const ratio = mVideo.w / mVideo.h;
-          h = (524 / ratio);
-          w = h > 680 ? 680 * ratio : 524;
+          h = (noteWidth() / ratio);
+          w = h > 680 ? 680 * ratio : noteWidth();
           h = h > 680 ? 680 : h;
         }