fix: Horizontal scroll in main room if text is too long (#28434)

Co-authored-by: Hugo Costa <hugocarreiracosta@gmail.com>
RocketChat · Mar 20, 2023 · f57f42f · f57f42f
1 parent 94bdfa0
commit f57f42f
Show file tree

Hide file tree

Showing 9 changed files with 187 additions and 185 deletions.
diff --git a/apps/meteor/tests/e2e/e2e-encryption.spec.ts b/apps/meteor/tests/e2e/e2e-encryption.spec.ts
@@ -161,7 +161,7 @@ test.describe.serial('e2e-encryption', () => {
 
 		await poHomeChannel.content.sendMessage('hello world');
 
-		await expect(poHomeChannel.content.lastUserMessage.locator('p')).toHaveText('hello world');
+		await expect(poHomeChannel.content.lastUserMessageBody).toHaveText('hello world');
 		await expect(poHomeChannel.content.lastUserMessage.locator('.rcx-icon--name-key')).toBeVisible();
 
 		await poHomeChannel.tabs.kebab.click({ force: true });
@@ -171,7 +171,7 @@ test.describe.serial('e2e-encryption', () => {
 
 		await poHomeChannel.content.sendMessage('hello world not encrypted');
 
-		await expect(poHomeChannel.content.lastUserMessage.locator('p')).toHaveText('hello world not encrypted');
+		await expect(poHomeChannel.content.lastUserMessageBody).toHaveText('hello world not encrypted');
 		await expect(poHomeChannel.content.lastUserMessage.locator('.rcx-icon--name-key')).not.toBeVisible();
 
 		await poHomeChannel.tabs.kebab.click({ force: true });
@@ -181,7 +181,7 @@ test.describe.serial('e2e-encryption', () => {
 
 		await poHomeChannel.content.sendMessage('hello world encrypted again');
 
-		await expect(poHomeChannel.content.lastUserMessage.locator('p')).toHaveText('hello world encrypted again');
+		await expect(poHomeChannel.content.lastUserMessageBody).toHaveText('hello world encrypted again');
 		await expect(poHomeChannel.content.lastUserMessage.locator('.rcx-icon--name-key')).toBeVisible();
 	});
 
@@ -207,7 +207,7 @@ test.describe.serial('e2e-encryption', () => {
 
 		await poHomeChannel.content.sendMessage('hello world');
 
-		await expect(poHomeChannel.content.lastUserMessage.locator('p')).toHaveText('hello world');
+		await expect(poHomeChannel.content.lastUserMessageBody).toHaveText('hello world');
 		await expect(poHomeChannel.content.lastUserMessage.locator('.rcx-icon--name-key')).toBeVisible();
 	});
 });
diff --git a/apps/meteor/tests/e2e/federation/page-objects/fragments/home-content.ts b/apps/meteor/tests/e2e/federation/page-objects/fragments/home-content.ts
@@ -19,6 +19,10 @@ export class FederationHomeContent {
 		return this.page.locator('[data-qa-type="message"]').last();
 	}
 
+	get lastUserMessageBody(): Locator {
+		return this.lastUserMessage.locator('[data-qa-type="message-body"]');
+	}
+
 	get lastUserMessageNotSequential(): Locator {
 		return this.page.locator('[data-qa-type="message"][data-sequential="false"]').last();
 	}

diff --git a/apps/meteor/tests/e2e/federation/tests/messaging/dm.spec.ts b/apps/meteor/tests/e2e/federation/tests/messaging/dm.spec.ts
diff --git a/apps/meteor/tests/e2e/federation/tests/messaging/private.spec.ts b/apps/meteor/tests/e2e/federation/tests/messaging/private.spec.ts
diff --git a/apps/meteor/tests/e2e/federation/tests/messaging/public.spec.ts b/apps/meteor/tests/e2e/federation/tests/messaging/public.spec.ts
diff --git a/apps/meteor/tests/e2e/messaging.spec.ts b/apps/meteor/tests/e2e/messaging.spec.ts
@@ -29,8 +29,8 @@ test.describe.serial('Messaging', () => {
 
 		await poHomeChannel.content.sendMessage('hello world');
 
-		await expect(auxContext.poHomeChannel.content.lastUserMessage.locator('p')).toHaveText('hello world');
-		await expect(poHomeChannel.content.lastUserMessage.locator('p')).toHaveText('hello world');
+		await expect(auxContext.poHomeChannel.content.lastUserMessageBody).toHaveText('hello world');
+		await expect(poHomeChannel.content.lastUserMessageBody).toHaveText('hello world');
 
 		await auxContext.page.close();
 	});
@@ -43,8 +43,8 @@ test.describe.serial('Messaging', () => {
 
 		await poHomeChannel.content.sendMessage('hello world');
 
-		await expect(poHomeChannel.content.lastUserMessage.locator('p')).toHaveText('hello world');
-		await expect(auxContext.poHomeChannel.content.lastUserMessage.locator('p')).toHaveText('hello world');
+		await expect(poHomeChannel.content.lastUserMessageBody).toHaveText('hello world');
+		await expect(auxContext.poHomeChannel.content.lastUserMessageBody).toHaveText('hello world');
 
 		await auxContext.page.close();
 	});

diff --git a/apps/meteor/tests/e2e/page-objects/fragments/home-content.ts b/apps/meteor/tests/e2e/page-objects/fragments/home-content.ts
@@ -21,6 +21,10 @@ export class HomeContent {
 		return this.page.locator('[data-qa-type="message"]').last();
 	}
 
+	get lastUserMessageBody(): Locator {
+		return this.lastUserMessage.locator('[data-qa-type="message-body"]');
+	}
+
 	get lastUserMessageNotSequential(): Locator {
 		return this.page.locator('[data-qa-type="message"][data-sequential="false"]').last();
 	}

diff --git a/packages/gazzodown/src/blocks/HeadingBlock.tsx b/packages/gazzodown/src/blocks/HeadingBlock.tsx
@@ -12,14 +12,11 @@ const HeadingBlock = ({ children = [], level = 1 }: HeadingBlockProps): ReactEle
 	const HeadingTag = `h${level}` as const;
 
 	return (
-		<>
-			<HeadingTag style={{ display: 'inline-block' }}>
-				{children.map((block, index) => (
-					<PlainSpan key={index} text={block.value} />
-				))}
-			</HeadingTag>
-			<br />
-		</>
+		<HeadingTag>
+			{children.map((block, index) => (
+				<PlainSpan key={index} text={block.value} />
+			))}
+		</HeadingTag>
 	);
 };
 

diff --git a/packages/gazzodown/src/blocks/ParagraphBlock.tsx b/packages/gazzodown/src/blocks/ParagraphBlock.tsx
@@ -8,12 +8,9 @@ type ParagraphBlockProps = {
 };
 
 const ParagraphBlock = ({ children }: ParagraphBlockProps): ReactElement => (
-	<>
-		<p style={{ display: 'inline-block' }}>
-			<InlineElements children={children} />
-		</p>
-		<br />
-	</>
+	<div>
+		<InlineElements children={children} />
+	</div>
 );
 
 export default ParagraphBlock;