chore: wrap text of dialog desc when more than 90c long

ts/components/conversation/TimerNotification.tsx

@@ -78,7 +78,7 @@ function useFollowSettingsButtonClick(
             props.timespanSeconds ?? undefined
           );
         },
-        showExitIcon: true,
+        showExitIcon: false,
         onClickClose: onExit,
       })
     );

ts/components/dialog/SessionConfirm.tsx

@@ -1,6 +1,7 @@
-import { shell } from 'electron';
 import { Dispatch } from '@reduxjs/toolkit';
+import { shell } from 'electron';
 import React, { useState } from 'react';
+import styled from 'styled-components';
 import { MessageInteraction } from '../../interactions';
 import { updateConfirmModal } from '../../state/ducks/modalDialog';
 import { SessionWrapperModal } from '../SessionWrapperModal';
@@ -10,6 +11,15 @@ import { SessionSpinner } from '../basic/SessionSpinner';
 import { SpacerLG } from '../basic/Text';
 import { SessionIcon, SessionIconSize, SessionIconType } from '../icon';
 
+const StyledSubText = styled(SessionHtmlRenderer)<{ textLength: number }>`
+  font-size: var(--font-size-md);
+  line-height: 1.5;
+  max-width: ${props =>
+    props.textLength > 90
+      ? '60ch'
+      : '33ch'}; // this is ugly, but we want the dialog description to have multiple lines when a short text is displayed
+`;
+
 export interface SessionConfirmDialogProps {
   message?: string;
   messageSub?: string;
@@ -64,8 +74,6 @@ export const SessionConfirm = (props: SessionConfirmDialogProps) => {
   const cancelText = props.cancelText || window.i18n('cancel');
   const showHeader = !!props.title;
 
-  const messageSubText = messageSub ? 'session-confirm-main-message' : undefined;
-
   const onClickOkHandler = async () => {
     if (onClickOk) {
       setIsLoading(true);
@@ -101,7 +109,6 @@ export const SessionConfirm = (props: SessionConfirmDialogProps) => {
 
     window.inboxStore?.dispatch(updateConfirmModal(null));
   };
-
   return (
     <SessionWrapperModal
       title={title}
@@ -119,7 +126,7 @@ export const SessionConfirm = (props: SessionConfirmDialogProps) => {
           </>
         )}
 
-        <SessionHtmlRenderer tag="span" className={messageSubText} html={message} />
+        <StyledSubText tag="span" textLength={message.length} html={message} />
         <SessionHtmlRenderer tag="span" className="session-confirm-sub-message" html={messageSub} />
 
         <SessionSpinner loading={isLoading} />

ts/themes/globals.tsx

@@ -141,7 +141,7 @@ export const THEME_GLOBALS: ThemeGlobals = {
   '--button-path-connecting-color': COLORS.PATH.CONNECTING,
   '--button-path-error-color': COLORS.PATH.ERROR,
 
-  '--modal-background-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.3)`,
+  '--modal-background-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.6)`,
   '--modal-drop-shadow': `0px 0px 10px rgba(${hexColorToRGB(COLORS.BLACK)}, 0.22)`,
 
   '--lightbox-background-color': `rgba(${hexColorToRGB(COLORS.BLACK)}, 0.8)`,