From e9977b2a764dd3794b4b69130cfc23a8721f40fe Mon Sep 17 00:00:00 2001
From: Alice Harris <aliceaharris05@protonmail.com>
Date: Thu, 16 Jun 2022 15:37:59 +0100
Subject: [PATCH 1/3] fix: large images in website previews escape embed box

---
 src/components/common/messaging/embed/Embed.module.scss | 1 -
 src/components/common/messaging/embed/EmbedMedia.tsx    | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

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",

From c2a729a5e0edc2152ce29625d1da89ecc21b0167 Mon Sep 17 00:00:00 2001
From: Leda <ledathemis@protonmail.com>
Date: Sun, 17 Jul 2022 19:19:34 +0000
Subject: [PATCH 2/3] fix: render markdown inside/after HTML tags

fixes #733
---
 src/components/markdown/RemarkRenderer.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/src/components/markdown/RemarkRenderer.tsx b/src/components/markdown/RemarkRenderer.tsx
index e3b2f3d6..13c88667 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}`)
     );
 }
 

From 7cf7402cea76b0e6b299ab77b6a5df373cf24de8 Mon Sep 17 00:00:00 2001
From: Sophie L <beartechtalks@gmail.com>
Date: Mon, 8 Aug 2022 16:06:21 +0100
Subject: [PATCH 3/3] fix: styling fixes (#721)

---
 .../settings/roles/PermissionSelect.tsx       |  1 -
 src/lib/ErrorBoundary.tsx                     | 35 ++++++++++++++-----
 src/pages/developer/Developer.tsx             |  2 +-
 3 files changed, 28 insertions(+), 10 deletions(-)

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" ? (
                     <>
                         <h3>Client Crash Report</h3>
-                        <button onClick={ignoreError}>
+                        <Button onClick={ignoreError}>
                             Ignore error and try to reload app
-                        </button>
-                        <button onClick={reset}>
-                            {confirm ? "Are you sure?" : "Reset all app data"}
-                        </button>
-                        <button onClick={() => location.reload()}>
+                        </Button>
+                        <div class="buttonDivider" />
+                        <Button onClick={() => location.reload()}>
                             Refresh page
-                        </button>
+                        </Button>
+                        <div class="buttonDivider" />
+                        <Button palette="error" onClick={reset}>
+                            {confirm ? "Are you sure?" : "Reset all app data"}
+                        </Button>
                     </>
                 ) : (
                     <>
@@ -83,6 +99,9 @@ export default function ErrorBoundary({ children, section }: Props) {
                         </button>
                     </>
                 )}
+                <br />
+                <br />
+                <div>Revolt has crashed. Here's the error:</div>
                 <pre>
                     <code>{error?.stack}</code>
                 </pre>
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() {
             </div>
 
             <div style={{ padding: "16px" }}>
-                <a onClick={() => setCrash(true)}>click to crash app</a>
+                <a style={"cursor: pointer;"} onClick={() => setCrash(true)}>click to crash app</a>
                 {crash && (window as any).sus.sus()}
                 {/*<span>
                     <b>Voice Status:</b> {VoiceStatus[voice.status]}