Fix if Contact has long bio, then shared chats are hidden (#4093)

* set min height for shared chats in profile view fixes #4092 * more clear varname * refactor styles a tiny bit to make status text scroll if there is little space * remove workaround from #4068, can't reproduce the bug of it anymore * fix that you can not click header button in dialog when they are on top of the navbar also see #4018 * add changelog entries
deltachat · Sep 8, 2024 · 99b5022 · 99b5022
1 parent 4fe7f4c
commit 99b5022
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 73 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,6 +18,8 @@
 - dev: improved `./bin/test_for_missing_translations.sh` script: It is now more correct, helpful and faster
 
 ### Fixed
+- fix that you can not click header button in dialog when they are on top of the navbar #4093
+- fix if Contact has long bio/signature, then shared chats were hidden #4093
 - dev: proper native source-map support during development for main process
 - dev: use correct log level when logging to console in main process
 - security: harden electron_functions, only runtime can use them now

diff --git a/packages/frontend/scss/dialogs/_view_profile.scss b/packages/frontend/scss/dialogs/_view_profile.scss
@@ -1,9 +1,3 @@
-.status-text {
-  padding: 15px 15px;
-  color: var(--globalText);
-  white-space: pre-wrap;
-}
-
 .mutual-chats {
   .chat-list-item {
     padding: 0px 20px;

diff --git a/packages/frontend/src/components/Dialog/styles.module.scss b/packages/frontend/src/components/Dialog/styles.module.scss
@@ -91,6 +91,7 @@ $paddingVertical: 20px;
   justify-content: center;
   padding: 0;
   width: $headerButtonSize;
+  -webkit-app-region: no-drag; // make it clickable, even when it is on top of navbar
 
   & + & {
     margin-left: 5px;

diff --git a/packages/frontend/src/components/dialogs/ViewProfile/index.tsx b/packages/frontend/src/components/dialogs/ViewProfile/index.tsx
@@ -230,87 +230,93 @@ export function ViewProfileInner({
     avatarPath = selfChatAvatar
   }
 
+  const maxMinHeightItems = 5
+  const mutualChatsMinHeight =
+    CHATLISTITEM_CHAT_HEIGHT *
+      Math.max(Math.min(maxMinHeightItems, chatListIds.length), 1)
+
   return (
     <>
-      <div>
-        <DialogContent>
-          <ProfileInfoHeader
-            address={addressLine}
-            avatarPath={avatarPath ? avatarPath : undefined}
-            color={contact.color}
-            displayName={displayName}
-            isVerified={contact.isProfileVerified}
-            wasSeenRecently={contact.wasSeenRecently}
-          />
-          {!isSelfChat && (
-            <div className='contact-attributes'>
-              {verifier && (
-                <div
-                  className={verifier.action && 'clickable'}
-                  onClick={verifier.action}
-                  style={{ display: 'flex' }}
-                >
-                  <InlineVerifiedIcon />
-                  {verifier.label}
-                </div>
-              )}
-              {contact.lastSeen !== 0 && (
-                <div>
-                  <i className='material-svg-icon material-icon-schedule' />
-                  <LastSeen timestamp={contact.lastSeen} />
-                </div>
-              )}
-            </div>
-          )}
-        </DialogContent>
-        <div
-          style={{
-            display: 'flex',
-            margin: '20px 0px',
-            justifyContent: 'center',
-          }}
-        >
-          {!isDeviceChat && (
-            <Button
-              type='primary'
-              aria-label={tx('send_message')}
-              onClick={onSendMessage}
-            >
-              {tx('send_message')}
-            </Button>
-          )}
-        </div>
-        {statusText != '' && (
-          <>
-            <div className='group-separator'>
-              {tx('pref_default_status_label')}
-            </div>
-            <div className='status-text'>
-              <MessagesDisplayContext.Provider
-                value={{
-                  context: 'contact_profile_status',
-                  contact_id: contact.id,
-                  closeProfileDialog: onClose,
-                }}
+      <DialogContent>
+        <ProfileInfoHeader
+          address={addressLine}
+          avatarPath={avatarPath ? avatarPath : undefined}
+          color={contact.color}
+          displayName={displayName}
+          isVerified={contact.isProfileVerified}
+          wasSeenRecently={contact.wasSeenRecently}
+        />
+        {!isSelfChat && (
+          <div className='contact-attributes'>
+            {verifier && (
+              <div
+                className={verifier.action && 'clickable'}
+                onClick={verifier.action}
+                style={{ display: 'flex' }}
               >
-                <MessageBody text={statusText} disableJumbomoji />
-              </MessagesDisplayContext.Provider>
-            </div>
-          </>
+                <InlineVerifiedIcon />
+                {verifier.label}
+              </div>
+            )}
+            {contact.lastSeen !== 0 && (
+              <div>
+                <i className='material-svg-icon material-icon-schedule' />
+                <LastSeen timestamp={contact.lastSeen} />
+              </div>
+            )}
+          </div>
+        )}
+      </DialogContent>
+      <div
+        style={{
+          display: 'flex',
+          margin: '20px 0px',
+          justifyContent: 'center',
+        }}
+      >
+        {!isDeviceChat && (
+          <Button
+            type='primary'
+            aria-label={tx('send_message')}
+            onClick={onSendMessage}
+          >
+            {tx('send_message')}
+          </Button>
         )}
       </div>
+      {statusText != '' && (
+        <>
+          <div className='group-separator'>
+            {tx('pref_default_status_label')}
+          </div>
+          <div className={styles.statusText}>
+            <MessagesDisplayContext.Provider
+              value={{
+                context: 'contact_profile_status',
+                contact_id: contact.id,
+                closeProfileDialog: onClose,
+              }}
+            >
+              <MessageBody text={statusText} disableJumbomoji />
+            </MessagesDisplayContext.Provider>
+          </div>
+        </>
+      )}
       {!(isDeviceChat || isSelfChat) && (
         <>
           <div className='group-separator'>{tx('profile_shared_chats')}</div>
-          <div className='mutual-chats' style={{ flexGrow: 1 }}>
+          <div
+            className='mutual-chats'
+            style={{ flexGrow: 1, minHeight: mutualChatsMinHeight }}
+          >
             <AutoSizer>
               {({ width, height }) => (
                 <ChatListPart
                   isRowLoaded={isChatLoaded}
                   loadMoreRows={loadChats}
                   rowCount={chatListIds.length}
                   width={width}
-                  height={height - 2}
+                  height={height}
                   itemKey={index => 'key' + chatListIds[index]}
                   itemHeight={CHATLISTITEM_CHAT_HEIGHT}
                 >

diff --git a/packages/frontend/src/components/dialogs/ViewProfile/styles.module.scss b/packages/frontend/src/components/dialogs/ViewProfile/styles.module.scss
@@ -6,5 +6,12 @@
 .viewProfileDialogBody {
   display: flex;
   flex-direction: column;
-  padding-bottom: 0.6px;
+  padding-bottom: 2px;
 }
+
+.statusText {
+  padding: 15px 15px;
+  color: var(--globalText);
+  white-space: pre-wrap;
+  overflow-y: scroll;
+}