Improve view source dialog style (#8883)

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 {
+.mx_ViewSource {
-    clear: both;
+    pre {
-    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 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;
-}
+    }
 
-.mx_ViewSource_details {
+    .mx_ViewSource_header {
-    margin-top: 0.8em;
+        border-bottom: 1px solid $quinary-content;
-}
+        padding-bottom: $spacing-12;
+        margin-bottom: $spacing-12;
 
-.mx_ViewSource_container {
+        .mx_CopyableText {
-    max-width: calc(100% - 24px);
+            word-break: break-all;
-}
+        }
+    }
 
-.mx_ViewSource_container .mx_CopyableText_border {
+    .mx_ViewSource_heading {
+        font-size: $font-17px;
+        font-weight: 400;
+        color: $primary-content;
+        margin-top: $spacing-12;
+    }
+
+    .mx_ViewSource_details {
+        margin-top: $spacing-12;
+    }
+
+    .mx_CopyableText_border {
+        box-sizing: border-box;
         width: 100%;
+    }
 }

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>
                     </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>
                     </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>
                 </>
             );
         }
@@ -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 className="mx_ViewSource_header">
-                    <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>
                 { !isEditing && canEdit && (
                     <div className="mx_Dialog_buttons">
                         <button onClick={() => this.onEdit()}>{ _t("Edit") }</button>