Avoid line breaks in webxdc-info (#5264)

* Avoid line breaks in webxdc-info

* Fix height for message bubble

---------

Co-authored-by: WofWca <wofwca@protonmail.com>

Author: nicodh

packages/frontend/scss/message/_message.scss

@@ -1,6 +1,9 @@
 @use '../mixins';
 @use '../variables';
 
+// limit for text width, needed to trigger ellipsis
+$info-text-max-width: 400px;
+
 .message-wrapper {
   --shortcut-menu-visibility: hidden;
   --shortcut-menu-multiplier: 0;
@@ -121,9 +124,59 @@
         // firefox does not support this, but chromium and webkit do https://caniuse.com/?search=user-drag
         -webkit-user-drag: none;
       }
-      div.name {
+      // nowrap and min-height address the problem that
+      // the height of a message bubble should not change
+      // after it's first load, even if the content changes
+      // after loading webxdcInfo async
+      // see https://github.com/deltachat/deltachat-desktop/issues/3753
+      div.info-text {
+        display: flex;
+        flex-direction: row;
+        max-width: $info-text-max-width;
+        min-width: 0;
+        white-space: nowrap;
         font-size: medium;
         font-weight: 300;
+        gap: 3px;
+      }
+      div.name {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+      div.document {
+        flex-shrink: 999999999999999;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        &:not(:empty)::after {
+          content: '–';
+          margin-left: 3px;
+        }
+        &:empty {
+          display: none;
+        }
+      }
+      div.summary {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        max-width: $info-text-max-width;
+
+        $font-size: 0.875rem;
+        $line-height: 1.15;
+        font-size: $font-size;
+        line-height: $line-height;
+        // Ensure that even if the element is empty
+        // (e.g. while we're loading `webxdcInfo`),
+        // it still takes height, so that when the info finally loads
+        // and `summary` is present, the message bubble doesn't get taller,
+        // which would result in the message list getting scrolled.
+        // See
+        // https://github.com/deltachat/deltachat-desktop/pull/5227#discussion_r2173774006.
+        min-height: calc($font-size * $line-height);
       }
       div.experimental {
         color: var(--colorDanger);

packages/frontend/src/components/attachment/messageAttachment.tsx

@@ -236,7 +236,7 @@ export function DraftAttachment({
   attachment: MessageTypeAttachmentSubset
 }) {
   const [webxdcInfo, setWebxdcInfo] = useState<T.WebxdcMessageInfo | null>(null)
-  const [isLoadingWebxdcInfo, setIsLoadingWebxdcInfo] = useState(false)
+  const [isLoadingWebxdcInfo, setIsLoadingWebxdcInfo] = useState(true)
   const accountId = selectedAccountId()
 
   const lastFileNameRef = useRef<string | null>(null)

packages/frontend/src/components/message/Message.tsx

@@ -31,7 +31,6 @@ import { isGenericAttachment, isImage } from '../attachment/Attachment'
 import { runtime } from '@deltachat-desktop/runtime-interface'
 import { AvatarFromContact } from '../Avatar'
 import { ConversationType } from './MessageList'
-import { truncateText } from '@deltachat-desktop/shared/util'
 import { getDirection } from '../../utils/getDirection'
 import { mapCoreMsgStatus2String } from '../helpers/MapMsgStatus'
 import { ContextMenuItem } from '../ContextMenu'
@@ -1118,7 +1117,7 @@ function WebxdcMessageContent({
 }) {
   const tx = useTranslationFunction()
   const [webxdcInfo, setWebxdcInfo] = useState<T.WebxdcMessageInfo | null>(null)
-  const [isLoadingWebxdcInfo, setIsLoadingWebxdcInfo] = useState(false)
+  const [isLoadingWebxdcInfo, setIsLoadingWebxdcInfo] = useState(true)
   const accountId = selectedAccountId()
 
   const fetchWebxdcInfo = useCallback(async () => {
@@ -1191,13 +1190,13 @@ function WebxdcMessageContent({
         // because there is a button below that does the same
       />
       <div
-        className='name'
+        className='info-text'
         title={`${info.document ? info.document + ' \n' : ''}${info.name}`}
       >
-        {info.document && truncateText(info.document, 24) + ' - '}
-        {truncateText(info.name, 42)}
+        <div className='document'>{info.document}</div>
+        <div className='name'>{info.name}</div>
       </div>
-      <div>{info.summary}</div>
+      <div className='summary'>{info.summary}</div>
       <Button
         className={styles.startWebxdcButton}
         styling='primary'

packages/frontend/src/components/screens/MainScreen/MainScreen.tsx

@@ -448,7 +448,7 @@ function ChatNavButtons({ chat }: { chat: T.FullChat }) {
 
 function AppIcon({ accountId, app }: { accountId: number; app: T.Message }) {
   const [webxdcInfo, setWebxdcInfo] = useState<T.WebxdcMessageInfo | null>(null)
-  const [isLoadingWebxdcInfo, setIsLoadingWebxdcInfo] = useState(false)
+  const [isLoadingWebxdcInfo, setIsLoadingWebxdcInfo] = useState(true)
 
   useEffect(() => {
     if (app.viewType === 'Webxdc') {