diff --git a/src/components/common/messaging/embed/Embed.module.scss b/src/components/common/messaging/embed/Embed.module.scss index c27d0a61..5175f73a 100644 --- a/src/components/common/messaging/embed/Embed.module.scss +++ b/src/components/common/messaging/embed/Embed.module.scss @@ -13,7 +13,6 @@ &.website { gap: 6px; - display: flex; flex-direction: row; > div:nth-child(1) { diff --git a/src/components/common/messaging/embed/EmbedMedia.tsx b/src/components/common/messaging/embed/EmbedMedia.tsx index 201b3d84..87ea8709 100644 --- a/src/components/common/messaging/embed/EmbedMedia.tsx +++ b/src/components/common/messaging/embed/EmbedMedia.tsx @@ -114,7 +114,7 @@ export default function EmbedMedia({ embed, width, height }: Props) { className={styles.image} src={client.proxyFile(url)} loading="lazy" - style={{ width, height }} + style={{ width: "100%", height: "100%" }} onClick={() => modalController.push({ type: "image_viewer", diff --git a/src/components/markdown/RemarkRenderer.tsx b/src/components/markdown/RemarkRenderer.tsx index c02edcbb..293f085f 100644 --- a/src/components/markdown/RemarkRenderer.tsx +++ b/src/components/markdown/RemarkRenderer.tsx @@ -184,6 +184,11 @@ const Container = styled.div<{ largeEmoji: boolean }>` */ const RE_QUOTE = /(^(?:>\s?){5})[>\s?]+(.*$)/gm; +/** + * Regex for matching HTML tags + */ +const RE_HTML_TAGS = /^(<\/?[a-zA-Z0-9]+>)(.*$)/gm; + /** * Sanitise Markdown input before rendering * @param content Input string @@ -194,6 +199,11 @@ function sanitise(content: string) { content // Strip excessive blockquote indentation .replace(RE_QUOTE, (_, m0, m1) => m0 + m1) + + // Append empty character if string starts with html tag + // This is to avoid inconsistencies in rendering Markdown inside/after HTML tags + // https://github.com/revoltchat/revite/issues/733 + .replace(RE_HTML_TAGS, (match) => `\u200E${match}`) ); } diff --git a/src/components/settings/roles/PermissionSelect.tsx b/src/components/settings/roles/PermissionSelect.tsx index 0afc8c08..7de9ac23 100644 --- a/src/components/settings/roles/PermissionSelect.tsx +++ b/src/components/settings/roles/PermissionSelect.tsx @@ -24,7 +24,6 @@ const PermissionEntry = styled.label<{ disabled?: boolean }>` width: 100%; margin: 8px 0; display: flex; - font-size: 1.1em; align-items: center; .title { diff --git a/src/lib/ErrorBoundary.tsx b/src/lib/ErrorBoundary.tsx index f755b788..4f430517 100644 --- a/src/lib/ErrorBoundary.tsx +++ b/src/lib/ErrorBoundary.tsx @@ -5,19 +5,33 @@ import styled from "styled-components/macro"; import { useEffect, useErrorBoundary, useState } from "preact/hooks"; +import { Button } from "@revoltchat/ui"; + import { GIT_REVISION } from "../revision"; const CrashContainer = styled.div` + // defined for the Button component + --error: #ed4245; + --primary-background: #2d2d2d; + height: 100%; padding: 12px; - background: black; + background: #191919; color: white; h3 { margin: 0; margin-bottom: 12px; } + + code { + font-size: 1.1em; + } + + .buttonDivider { + margin: 8px; + } `; interface Props { @@ -65,15 +79,17 @@ export default function ErrorBoundary({ children, section }: Props) { {section === "client" ? ( <>
{error?.stack}
diff --git a/src/pages/developer/Developer.tsx b/src/pages/developer/Developer.tsx
index aeeff64e..3c6009db 100644
--- a/src/pages/developer/Developer.tsx
+++ b/src/pages/developer/Developer.tsx
@@ -45,7 +45,7 @@ export default function Developer() {