From 3ccde7afa104483617cefe93ea718c2b9b6d8727 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Sat, 25 Jun 2022 12:50:58 +0000
Subject: [PATCH] Improve view source dialog style (#8883)

---
 res/css/structures/_ViewSource.scss      | 57 ++++++++++++------------
 src/components/structures/ViewSource.tsx | 57 ++++++++++--------------
 2 files changed, 52 insertions(+), 62 deletions(-)

diff --git a/res/css/structures/_ViewSource.scss b/res/css/structures/_ViewSource.scss
index 3dc3e21489..c063eeb49c 100644
--- a/res/css/structures/_ViewSource.scss
+++ b/res/css/structures/_ViewSource.scss
@@ -14,37 +14,38 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_ViewSource_separator {
-    clear: both;
-    border-bottom: 1px solid #e5e5e5;
-    padding-top: 0.7em;
-    padding-bottom: 0.7em;
-}
+.mx_ViewSource {
+    pre {
+        font-size: $font-12px;
+        padding: 0.5em 1em;
+        word-wrap: break-word;
+        white-space: pre-wrap;
+        overflow-wrap: anywhere;
+    }
 
-.mx_ViewSource_heading {
-    font-size: $font-17px;
-    font-weight: 400;
-    color: $primary-content;
-    margin-top: 0.7em;
-}
+    .mx_ViewSource_header {
+        border-bottom: 1px solid $quinary-content;
+        padding-bottom: $spacing-12;
+        margin-bottom: $spacing-12;
 
-.mx_ViewSource pre {
-    text-align: left;
-    font-size: $font-12px;
-    padding: 0.5em 1em 0.5em 1em;
-    word-wrap: break-word;
-    white-space: pre-wrap;
-    overflow-wrap: anywhere;
-}
+        .mx_CopyableText {
+            word-break: break-all;
+        }
+    }
 
-.mx_ViewSource_details {
-    margin-top: 0.8em;
-}
+    .mx_ViewSource_heading {
+        font-size: $font-17px;
+        font-weight: 400;
+        color: $primary-content;
+        margin-top: $spacing-12;
+    }
 
-.mx_ViewSource_container {
-    max-width: calc(100% - 24px);
-}
+    .mx_ViewSource_details {
+        margin-top: $spacing-12;
+    }
 
-.mx_ViewSource_container .mx_CopyableText_border {
-    width: 100%;
+    .mx_CopyableText_border {
+        box-sizing: border-box;
+        width: 100%;
+    }
 }
diff --git a/src/components/structures/ViewSource.tsx b/src/components/structures/ViewSource.tsx
index c8628a7f96..a334f7148b 100644
--- a/src/components/structures/ViewSource.tsx
+++ b/src/components/structures/ViewSource.tsx
@@ -79,13 +79,11 @@ export default class ViewSource extends React.Component<IProps, IState> {
                                 { _t("Decrypted event source") }
                             </span>
                         </summary>
-                        <div className="mx_ViewSource_container">
-                            <CopyableText getTextToCopy={copyDecryptedFunc}>
-                                <SyntaxHighlight language="json">
-                                    { stringify(decryptedEventSource) }
-                                </SyntaxHighlight>
-                            </CopyableText>
-                        </div>
+                        <CopyableText getTextToCopy={copyDecryptedFunc}>
+                            <SyntaxHighlight language="json">
+                                { stringify(decryptedEventSource) }
+                            </SyntaxHighlight>
+                        </CopyableText>
                     </details>
                     <details className="mx_ViewSource_details">
                         <summary>
@@ -93,13 +91,11 @@ export default class ViewSource extends React.Component<IProps, IState> {
                                 { _t("Original event source") }
                             </span>
                         </summary>
-                        <div className="mx_ViewSource_container">
-                            <CopyableText getTextToCopy={copyOriginalFunc}>
-                                <SyntaxHighlight language="json">
-                                    { stringify(originalEventSource) }
-                                </SyntaxHighlight>
-                            </CopyableText>
-                        </div>
+                        <CopyableText getTextToCopy={copyOriginalFunc}>
+                            <SyntaxHighlight language="json">
+                                { stringify(originalEventSource) }
+                            </SyntaxHighlight>
+                        </CopyableText>
                     </details>
                 </>
             );
@@ -109,13 +105,11 @@ export default class ViewSource extends React.Component<IProps, IState> {
                     <div className="mx_ViewSource_heading">
                         { _t("Original event source") }
                     </div>
-                    <div className="mx_ViewSource_container">
-                        <CopyableText getTextToCopy={copyOriginalFunc}>
-                            <SyntaxHighlight language="json">
-                                { stringify(originalEventSource) }
-                            </SyntaxHighlight>
-                        </CopyableText>
-                    </div>
+                    <CopyableText getTextToCopy={copyOriginalFunc}>
+                        <SyntaxHighlight language="json">
+                            { stringify(originalEventSource) }
+                        </SyntaxHighlight>
+                    </CopyableText>
                 </>
             );
         }
@@ -166,20 +160,15 @@ export default class ViewSource extends React.Component<IProps, IState> {
         const canEdit = mxEvent.isState() ? this.canSendStateEvent(mxEvent) : canEditContent(this.props.mxEvent);
         return (
             <BaseDialog className="mx_ViewSource" onFinished={this.props.onFinished} title={_t("View Source")}>
-                <div>
-                    <div>
-                        <CopyableText getTextToCopy={() => roomId} border={false}>
-                            { _t("Room ID: %(roomId)s", { roomId }) }
-                        </CopyableText>
-                    </div>
-                    <div>
-                        <CopyableText getTextToCopy={() => eventId} border={false}>
-                            { _t("Event ID: %(eventId)s", { eventId }) }
-                        </CopyableText>
-                    </div>
-                    <div className="mx_ViewSource_separator" />
-                    { isEditing ? this.editSourceContent() : this.viewSourceContent() }
+                <div className="mx_ViewSource_header">
+                    <CopyableText getTextToCopy={() => roomId} border={false}>
+                        { _t("Room ID: %(roomId)s", { roomId }) }
+                    </CopyableText>
+                    <CopyableText getTextToCopy={() => eventId} border={false}>
+                        { _t("Event ID: %(eventId)s", { eventId }) }
+                    </CopyableText>
                 </div>
+                { isEditing ? this.editSourceContent() : this.viewSourceContent() }
                 { !isEditing && canEdit && (
                     <div className="mx_Dialog_buttons">
                         <button onClick={() => this.onEdit()}>{ _t("Edit") }</button>