From 8071c297ff5fd2764b08d4331d8e365359219394 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Thu, 23 Jun 2022 13:46:08 +0900
Subject: [PATCH 01/13] Let room ID and event ID wrapped with break-all value
 on the view source dialog

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/structures/_ViewSource.scss      | 8 ++++++++
 src/components/structures/ViewSource.tsx | 4 +---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/res/css/structures/_ViewSource.scss b/res/css/structures/_ViewSource.scss
index 3dc3e21489e..d33905d184c 100644
--- a/res/css/structures/_ViewSource.scss
+++ b/res/css/structures/_ViewSource.scss
@@ -14,6 +14,14 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+.mx_ViewSource {
+    .mx_ViewSource_header {
+        .mx_CopyableText {
+            word-break: break-all;
+        }
+    }
+}
+
 .mx_ViewSource_separator {
     clear: both;
     border-bottom: 1px solid #e5e5e5;
diff --git a/src/components/structures/ViewSource.tsx b/src/components/structures/ViewSource.tsx
index c8628a7f96f..21255a1f968 100644
--- a/src/components/structures/ViewSource.tsx
+++ b/src/components/structures/ViewSource.tsx
@@ -167,12 +167,10 @@ export default class ViewSource extends React.Component<IProps, IState> {
         return (
             <BaseDialog className="mx_ViewSource" onFinished={this.props.onFinished} title={_t("View Source")}>
                 <div>
-                    <div>
+                    <div className="mx_ViewSource_header">
                         <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>

From 1946c010dbdb0587e71a75aff02b54fddf485052 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Thu, 23 Jun 2022 13:55:51 +0900
Subject: [PATCH 02/13] Include mx_ViewSource_separator

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/structures/_ViewSource.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/structures/_ViewSource.scss b/res/css/structures/_ViewSource.scss
index d33905d184c..b31ee5f9baf 100644
--- a/res/css/structures/_ViewSource.scss
+++ b/res/css/structures/_ViewSource.scss
@@ -20,7 +20,6 @@ limitations under the License.
             word-break: break-all;
         }
     }
-}
 
 .mx_ViewSource_separator {
     clear: both;
@@ -28,6 +27,7 @@ limitations under the License.
     padding-top: 0.7em;
     padding-bottom: 0.7em;
 }
+}
 
 .mx_ViewSource_heading {
     font-size: $font-17px;

From c5eaa059e5caa11df56ce492c28dcdaefb666e97 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Thu, 23 Jun 2022 13:56:41 +0900
Subject: [PATCH 03/13] Include pre

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/structures/_ViewSource.scss | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/res/css/structures/_ViewSource.scss b/res/css/structures/_ViewSource.scss
index b31ee5f9baf..2ccf99e1228 100644
--- a/res/css/structures/_ViewSource.scss
+++ b/res/css/structures/_ViewSource.scss
@@ -15,6 +15,15 @@ limitations under the License.
 */
 
 .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_ViewSource_header {
         .mx_CopyableText {
             word-break: break-all;
@@ -36,15 +45,6 @@ limitations under the License.
     margin-top: 0.7em;
 }
 
-.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_ViewSource_details {
     margin-top: 0.8em;
 }

From 3b3972aa6f02c71e027420410c5edc00f9d8830c Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Thu, 23 Jun 2022 13:57:24 +0900
Subject: [PATCH 04/13] Include mx_CopyableText_border

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/structures/_ViewSource.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/res/css/structures/_ViewSource.scss b/res/css/structures/_ViewSource.scss
index 2ccf99e1228..d3d1a90351c 100644
--- a/res/css/structures/_ViewSource.scss
+++ b/res/css/structures/_ViewSource.scss
@@ -51,8 +51,8 @@ pre {
 
 .mx_ViewSource_container {
     max-width: calc(100% - 24px);
-}
 
-.mx_ViewSource_container .mx_CopyableText_border {
+.mx_CopyableText_border {
     width: 100%;
 }
+}

From d4e0f293b266f464bcdef275a006f0c4cb50020a Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Thu, 23 Jun 2022 13:58:17 +0900
Subject: [PATCH 05/13] Include everything in mx_ViewSource

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/structures/_ViewSource.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/structures/_ViewSource.scss b/res/css/structures/_ViewSource.scss
index d3d1a90351c..f40339dafcc 100644
--- a/res/css/structures/_ViewSource.scss
+++ b/res/css/structures/_ViewSource.scss
@@ -36,7 +36,6 @@ pre {
     padding-top: 0.7em;
     padding-bottom: 0.7em;
 }
-}
 
 .mx_ViewSource_heading {
     font-size: $font-17px;
@@ -56,3 +55,4 @@ pre {
     width: 100%;
 }
 }
+}

From 1fbb9e8ea6d70ed62bf14e090717e602d11ae239 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Thu, 23 Jun 2022 13:58:50 +0900
Subject: [PATCH 06/13] yarn run lint:style --fix

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/structures/_ViewSource.scss | 58 ++++++++++++++---------------
 1 file changed, 29 insertions(+), 29 deletions(-)

diff --git a/res/css/structures/_ViewSource.scss b/res/css/structures/_ViewSource.scss
index f40339dafcc..17a6ce4c28c 100644
--- a/res/css/structures/_ViewSource.scss
+++ b/res/css/structures/_ViewSource.scss
@@ -15,14 +15,14 @@ limitations under the License.
 */
 
 .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;
-}
+    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_ViewSource_header {
         .mx_CopyableText {
@@ -30,29 +30,29 @@ pre {
         }
     }
 
-.mx_ViewSource_separator {
-    clear: both;
-    border-bottom: 1px solid #e5e5e5;
-    padding-top: 0.7em;
-    padding-bottom: 0.7em;
-}
+    .mx_ViewSource_separator {
+        clear: both;
+        border-bottom: 1px solid #e5e5e5;
+        padding-top: 0.7em;
+        padding-bottom: 0.7em;
+    }
 
-.mx_ViewSource_heading {
-    font-size: $font-17px;
-    font-weight: 400;
-    color: $primary-content;
-    margin-top: 0.7em;
-}
+    .mx_ViewSource_heading {
+        font-size: $font-17px;
+        font-weight: 400;
+        color: $primary-content;
+        margin-top: 0.7em;
+    }
 
-.mx_ViewSource_details {
-    margin-top: 0.8em;
-}
+    .mx_ViewSource_details {
+        margin-top: 0.8em;
+    }
 
-.mx_ViewSource_container {
-    max-width: calc(100% - 24px);
+    .mx_ViewSource_container {
+        max-width: calc(100% - 24px);
 
-.mx_CopyableText_border {
-    width: 100%;
-}
-}
+        .mx_CopyableText_border {
+            width: 100%;
+        }
+    }
 }

From 22fc5b73bf8b751f29ba4e232cba0aabd93db01c Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Thu, 23 Jun 2022 14:01:50 +0900
Subject: [PATCH 07/13] yarn run lint:js-fix

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 src/components/structures/ViewSource.tsx | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/components/structures/ViewSource.tsx b/src/components/structures/ViewSource.tsx
index 21255a1f968..7d896201d7b 100644
--- a/src/components/structures/ViewSource.tsx
+++ b/src/components/structures/ViewSource.tsx
@@ -166,18 +166,16 @@ 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 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>
-                    <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>
+                <div className="mx_ViewSource_separator" />
+                { isEditing ? this.editSourceContent() : this.viewSourceContent() }
                 { !isEditing && canEdit && (
                     <div className="mx_Dialog_buttons">
                         <button onClick={() => this.onEdit()}>{ _t("Edit") }</button>

From 253d2e11b3a45d309c5f9975f830feefb27e87ba Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Thu, 23 Jun 2022 14:23:59 +0900
Subject: [PATCH 08/13] Move border styles from mx_ViewSource_separator to
 mx_ViewSource_header

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/structures/_ViewSource.scss      | 11 ++++-------
 src/components/structures/ViewSource.tsx |  1 -
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/res/css/structures/_ViewSource.scss b/res/css/structures/_ViewSource.scss
index 17a6ce4c28c..a5fd6d93843 100644
--- a/res/css/structures/_ViewSource.scss
+++ b/res/css/structures/_ViewSource.scss
@@ -25,18 +25,15 @@ limitations under the License.
     }
 
     .mx_ViewSource_header {
+        border-bottom: 1px solid #e5e5e5;
+        padding-bottom: 0.7em;
+        margin-bottom: 0.7em;
+
         .mx_CopyableText {
             word-break: break-all;
         }
     }
 
-    .mx_ViewSource_separator {
-        clear: both;
-        border-bottom: 1px solid #e5e5e5;
-        padding-top: 0.7em;
-        padding-bottom: 0.7em;
-    }
-
     .mx_ViewSource_heading {
         font-size: $font-17px;
         font-weight: 400;
diff --git a/src/components/structures/ViewSource.tsx b/src/components/structures/ViewSource.tsx
index 7d896201d7b..2c27370d5d5 100644
--- a/src/components/structures/ViewSource.tsx
+++ b/src/components/structures/ViewSource.tsx
@@ -174,7 +174,6 @@ export default class ViewSource extends React.Component<IProps, IState> {
                         { _t("Event ID: %(eventId)s", { eventId }) }
                     </CopyableText>
                 </div>
-                <div className="mx_ViewSource_separator" />
                 { isEditing ? this.editSourceContent() : this.viewSourceContent() }
                 { !isEditing && canEdit && (
                     <div className="mx_Dialog_buttons">

From bdbd59d2f2cde07451c31942e635af3faff70211 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Thu, 23 Jun 2022 14:36:18 +0900
Subject: [PATCH 09/13] Use a variable for header border color

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/structures/_ViewSource.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/structures/_ViewSource.scss b/res/css/structures/_ViewSource.scss
index a5fd6d93843..7f89736b7d4 100644
--- a/res/css/structures/_ViewSource.scss
+++ b/res/css/structures/_ViewSource.scss
@@ -25,7 +25,7 @@ limitations under the License.
     }
 
     .mx_ViewSource_header {
-        border-bottom: 1px solid #e5e5e5;
+        border-bottom: 1px solid $quinary-content;
         padding-bottom: 0.7em;
         margin-bottom: 0.7em;
 

From c404c2e8b4b0ce524dd9553e6855c0730da61330 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Thu, 23 Jun 2022 14:39:42 +0900
Subject: [PATCH 10/13] Use a shorthand

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/structures/_ViewSource.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/res/css/structures/_ViewSource.scss b/res/css/structures/_ViewSource.scss
index 7f89736b7d4..8f1cbb4be78 100644
--- a/res/css/structures/_ViewSource.scss
+++ b/res/css/structures/_ViewSource.scss
@@ -18,7 +18,7 @@ limitations under the License.
     pre {
         text-align: left;
         font-size: $font-12px;
-        padding: 0.5em 1em 0.5em 1em;
+        padding: 0.5em 1em;
         word-wrap: break-word;
         white-space: pre-wrap;
         overflow-wrap: anywhere;

From 4cec3cc0f9be6069b565f6036780fdd1e0ab8916 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Thu, 23 Jun 2022 15:38:32 +0900
Subject: [PATCH 11/13] Apply spacing variables

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/structures/_ViewSource.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/res/css/structures/_ViewSource.scss b/res/css/structures/_ViewSource.scss
index 8f1cbb4be78..07642f76e57 100644
--- a/res/css/structures/_ViewSource.scss
+++ b/res/css/structures/_ViewSource.scss
@@ -26,8 +26,8 @@ limitations under the License.
 
     .mx_ViewSource_header {
         border-bottom: 1px solid $quinary-content;
-        padding-bottom: 0.7em;
-        margin-bottom: 0.7em;
+        padding-bottom: $spacing-12;
+        margin-bottom: $spacing-12;
 
         .mx_CopyableText {
             word-break: break-all;
@@ -38,11 +38,11 @@ limitations under the License.
         font-size: $font-17px;
         font-weight: 400;
         color: $primary-content;
-        margin-top: 0.7em;
+        margin-top: $spacing-12;
     }
 
     .mx_ViewSource_details {
-        margin-top: 0.8em;
+        margin-top: $spacing-12;
     }
 
     .mx_ViewSource_container {

From 4acca730ec9e1e07b04b48f7f90226e999c80d6f Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Thu, 23 Jun 2022 15:40:57 +0900
Subject: [PATCH 12/13] Remove a redundant declaration

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/structures/_ViewSource.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/res/css/structures/_ViewSource.scss b/res/css/structures/_ViewSource.scss
index 07642f76e57..0dbe32b56d7 100644
--- a/res/css/structures/_ViewSource.scss
+++ b/res/css/structures/_ViewSource.scss
@@ -16,7 +16,6 @@ limitations under the License.
 
 .mx_ViewSource {
     pre {
-        text-align: left;
         font-size: $font-12px;
         padding: 0.5em 1em;
         word-wrap: break-word;

From ad5f1901448d97429e0690f047dab1d19bef8ae6 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Thu, 23 Jun 2022 15:47:11 +0900
Subject: [PATCH 13/13] Apply border-box to remove mx_ViewSource_container

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
---
 res/css/structures/_ViewSource.scss      |  9 ++----
 src/components/structures/ViewSource.tsx | 36 ++++++++++--------------
 2 files changed, 18 insertions(+), 27 deletions(-)

diff --git a/res/css/structures/_ViewSource.scss b/res/css/structures/_ViewSource.scss
index 0dbe32b56d7..c063eeb49cd 100644
--- a/res/css/structures/_ViewSource.scss
+++ b/res/css/structures/_ViewSource.scss
@@ -44,11 +44,8 @@ limitations under the License.
         margin-top: $spacing-12;
     }
 
-    .mx_ViewSource_container {
-        max-width: calc(100% - 24px);
-
-        .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 2c27370d5d5..a334f7148b8 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>
                 </>
             );
         }