layout improvments

lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/ActionButtons.tsx

@@ -17,9 +17,13 @@ export function ActionButtons({ item }: ActionButtonsProps) {
     item.position?.coordinates as [number, number] | undefined,
   )
 
+  const showNavigationButton = item.layer?.itemType.show_navigation_button ?? true
+  const showShareButton = item.layer?.itemType.show_share_button ?? true
+  const isOtherProfile = myProfile.myProfile?.id !== item.id
+
   return (
     <>
-      {item.position?.coordinates && myProfile.myProfile?.id !== item.id && (
+      {item.position?.coordinates && isOtherProfile && showNavigationButton && (
         <a
           href={getNavigationUrl()}
           target='_blank'
@@ -32,7 +36,7 @@ export function ActionButtons({ item }: ActionButtonsProps) {
           <LuNavigation className='tw:h-4 tw:w-4' />
         </a>
       )}
-      {myProfile.myProfile?.id !== item.id && <ShareButton item={item} />}
+      {isOtherProfile && showShareButton && <ShareButton item={item} />}
     </>
   )
 }

lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/ItemAvatar.tsx

@@ -8,6 +8,7 @@ import type { Item } from '#types/Item'
 interface ItemAvatarProps {
   item: Item
   big?: boolean
+  extraLarge?: boolean
   showQrButton?: boolean
   onQrClick?: () => void
 }
@@ -15,14 +16,17 @@ interface ItemAvatarProps {
 export function ItemAvatar({
   item,
   big = false,
+  extraLarge = false,
   showQrButton = false,
   onQrClick,
 }: ItemAvatarProps) {
   const appState = useAppState()
   const [imageLoaded, setImageLoaded] = useState(false)
 
+  const imageSize = extraLarge ? 320 : 160
   const avatar =
-    (item.image && appState.assetsApi.url + item.image + '?width=160&heigth=160') ??
+    (item.image &&
+      appState.assetsApi.url + item.image + `?width=${imageSize}&heigth=${imageSize}`) ??
     item.image_external
 
   const hasAvatar = !!avatar
@@ -38,12 +42,12 @@ export function ItemAvatar({
 
   if (!hasAvatar) return null
 
+  const avatarSize = extraLarge ? 'tw:w-32' : big ? 'tw:w-16' : 'tw:w-10'
+
   return (
     <div className='tw:avatar tw:relative'>
       <div
-        className={`${
-          big ? 'tw:w-16' : 'tw:w-10'
-        } tw:inline tw:items-center tw:justify-center tw:overflow-visible`}
+        className={`${avatarSize} tw:inline tw:items-center tw:justify-center tw:overflow-visible`}
       >
         <img
           className='tw:w-full tw:h-full tw:object-cover tw:rounded-full tw:border-white'

lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/ItemTitle.tsx

@@ -105,7 +105,7 @@ export function ItemTitle({
     >
       <div
         ref={titleRef}
-        className={`${fontSize} tw:font-bold`}
+        className={`${fontSize} tw:font-bold ${!big ? 'tw:truncate' : ''}`}
         title={title}
         data-cy='profile-title'
       >

lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/QRModal.tsx

@@ -3,6 +3,7 @@ import QRCode from 'react-qr-code'
 import DialogModal from '#components/Templates/DialogModal'
 
 import { useShareLogic } from './hooks'
+import { ItemAvatar } from './ItemAvatar'
 import { ShareButton } from './ShareButton'
 
 import type { Item } from '#types/Item'
@@ -21,16 +22,19 @@ export function QRModal({ item, isOpen, onClose }: QRModalProps) {
       isOpened={isOpen}
       showCloseButton={true}
       onClose={onClose}
-      className='tw:w-[calc(100vw-2rem)] tw:max-w-96'
+      className='tw:w-[calc(100vw-2rem)] tw:!max-w-96'
     >
       <div onClick={(e) => e.stopPropagation()} className='tw:text-center tw:p-4'>
         <p className='tw:text-xl tw:font-bold'>Share your Profile to expand your Network!</p>
 
-        <div className='tw:p-8 tw:my-8 tw:rounded-lg tw:inline-block tw:border-base-300 tw:bg-base-200 tw:border-1 '>
-          <QRCode value={inviteLink} size={192} />
+        <div className='tw:flex tw:flex-col tw:items-center tw:gap-4 tw:my-8'>
+          <ItemAvatar item={item} extraLarge={true} />
+          <div className='tw:p-8 tw:mt-4 tw:rounded-lg tw:inline-block tw:border-base-300 tw:bg-base-200 tw:border-1'>
+            <QRCode value={inviteLink} size={156} />
+          </div>
         </div>
 
-        <div className='tw:flex tw:items-center tw:gap-2 tw:w-full tw:border-base-300 tw:border-2 tw:rounded-lg tw:p-3'>
+        <div className='tw:flex tw:items-center tw:gap-2 tw:w-full tw:border-base-300 tw:border-1 tw:rounded-selector tw:p-2'>
           <span className='tw:text-sm tw:truncate tw:flex-1 tw:min-w-0'>{inviteLink}</span>
           <ShareButton item={item} dropdownDirection='up' />
         </div>

lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView/index.tsx

@@ -32,7 +32,7 @@ export function HeaderView({
 
   const hasAvatar = !!(item.image ?? item.image_external)
   const isMyProfile = myProfile.myProfile?.id === item.id
-  const showQrButton = big && isMyProfile
+  const showQrButton = big && isMyProfile && (item.layer?.itemType.show_qr_button ?? true)
 
   return (
     <>

lib/src/Components/Profile/ProfileView.tsx

@@ -174,7 +174,7 @@ export function ProfileView({ attestationApi }: { attestationApi?: ItemsApi<any>
         <MapOverlayPage
           key={item.id}
           data-cy='profile-view'
-          className={`tw:@container tw:p-0! tw:overflow-scroll tw:m-4! tw:md:w-[calc(50%-32px)] tw:w-[calc(100%-32px)] tw:min-w-80 tw:max-w-3xl tw:left-0! tw:sm:left-auto! tw:top-0 tw:bottom-0 tw:transition-opacity tw:duration-500 ${!selectPosition ? 'tw:opacity-100 tw:pointer-events-auto' : 'tw:opacity-0 tw:pointer-events-none'} tw:max-h-[1000px]`}
+          className={`tw:@container tw:overflow-hidden tw:p-0! tw:m-4! tw:md:w-[calc(50%-32px)] tw:w-[calc(100%-32px)] tw:min-w-80 tw:max-w-3xl tw:left-0! tw:sm:left-auto! tw:top-0 tw:bottom-0 tw:transition-opacity tw:duration-500 ${!selectPosition ? 'tw:opacity-100 tw:pointer-events-auto' : 'tw:opacity-0 tw:pointer-events-none'} tw:max-h-[1000px]`}
         >
           <>
             <div className={'tw:px-6 tw:pt-6'} data-cy='profile-header'>