From 2d4264c39d2f6712cf172f35f80ff9d4cd706f12 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Tue, 23 Jul 2019 18:06:37 +0100
Subject: [PATCH] Keep widget URL in permission screen to one line

This keeps the widget URL to one line max, so that the allow button will always
be visible. The full URL can be viewed by hovering.

Fixes https://github.com/vector-im/riot-web/issues/10402
---
 res/css/views/rooms/_AppsDrawer.scss           | 8 +++++++-
 src/components/views/elements/AppPermission.js | 6 +++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/res/css/views/rooms/_AppsDrawer.scss b/res/css/views/rooms/_AppsDrawer.scss
index e426598b0f..9ca6954af7 100644
--- a/res/css/views/rooms/_AppsDrawer.scss
+++ b/res/css/views/rooms/_AppsDrawer.scss
@@ -1,5 +1,6 @@
 /*
 Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -310,7 +311,7 @@ form.mx_Custom_Widget_Form div {
 }
 
 .mx_AppPermissionWarningText {
-    max-width: 400px;
+    max-width: 90%;
     margin: 10px auto 10px auto;
     color: $primary-fg-color;
 }
@@ -321,7 +322,12 @@ form.mx_Custom_Widget_Form div {
 }
 
 .mx_AppPermissionWarningTextURL {
+    display: inline-block;
+    max-width: 100%;
     color: $accent-color;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
 .mx_AppPermissionButton {
diff --git a/src/components/views/elements/AppPermission.js b/src/components/views/elements/AppPermission.js
index c9f9778a0e..1e019c0287 100644
--- a/src/components/views/elements/AppPermission.js
+++ b/src/components/views/elements/AppPermission.js
@@ -1,6 +1,7 @@
 /*
 Copyright 2017 Vector Creations Ltd
 Copyright 2018, 2019 New Vector Ltd
+Copyright 2019 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -67,7 +68,10 @@ export default class AppPermission extends React.Component {
                     <img src={require("../../../../res/img/feather-customised/warning-triangle.svg")} alt={_t('Warning!')} />
                 </div>
                 <div className='mx_AppPermissionWarningText'>
-                    <span className='mx_AppPermissionWarningTextLabel'>{ _t('Do you want to load widget from URL:') }</span> <span className='mx_AppPermissionWarningTextURL'>{ this.state.curlBase }</span>
+                    <span className='mx_AppPermissionWarningTextLabel'>{_t('Do you want to load widget from URL:')}</span>
+                    <span className='mx_AppPermissionWarningTextURL'
+                        title={this.state.curlBase}
+                    >{this.state.curlBase}</span>
                     { e2eWarningText }
                     { cookieWarning }
                 </div>