diff --git a/src/components/Note/NoteFooter/NoteFooter.module.scss b/src/components/Note/NoteFooter/NoteFooter.module.scss index 8b145a9..1aaa858 100644 --- a/src/components/Note/NoteFooter/NoteFooter.module.scss +++ b/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; diff --git a/src/components/Note/NoteFooter/NoteFooter.tsx b/src/components/Note/NoteFooter/NoteFooter.tsx index f74f9c1..1446a40 100644 --- a/src/components/Note/NoteFooter/NoteFooter.tsx +++ b/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 || ''} >