From 04db814d7641cdb33038b8076e004d2b4a1714ec Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Fri, 31 Jan 2020 14:03:04 +1100
Subject: [PATCH] do not render session-id-editable border when textarea
 disabled

---
 stylesheets/_session.scss                   |  1 +
 stylesheets/_session_left_pane.scss         | 17 ++++++++++-------
 ts/components/session/SessionIdEditable.tsx |  3 ++-
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/stylesheets/_session.scss b/stylesheets/_session.scss
index 6fe603f05..94109dd2e 100644
--- a/stylesheets/_session.scss
+++ b/stylesheets/_session.scss
@@ -1344,6 +1344,7 @@ label {
 .session-id-editable textarea {
   resize: none;
   overflow: hidden;
+  user-select: all;
 }
 
 input {
diff --git a/stylesheets/_session_left_pane.scss b/stylesheets/_session_left_pane.scss
index a6d83cc8e..ba412ecfe 100644
--- a/stylesheets/_session_left_pane.scss
+++ b/stylesheets/_session_left_pane.scss
@@ -297,13 +297,16 @@ $session-compose-margin: 20px;
       margin: 0px 20px;
     }
 
-    .session-id-editable textarea::-webkit-inner-spin-button {
-      margin: 0px 20px;
-      width: -webkit-fill-available;
-      flex-shrink: 0;
-      user-select: all;
-      overflow: hidden;
-      resize: none;
+    .session-id-editable {
+      textarea::-webkit-inner-spin-button {
+        margin: 0px 20px;
+        width: -webkit-fill-available;
+        flex-shrink: 0;
+      }
+    }
+
+    .session-id-editable-disabled {
+      border: none;
     }
 
     .session-button {
diff --git a/ts/components/session/SessionIdEditable.tsx b/ts/components/session/SessionIdEditable.tsx
index a7fd4aa09..c031cb4da 100644
--- a/ts/components/session/SessionIdEditable.tsx
+++ b/ts/components/session/SessionIdEditable.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 
 interface Props {
   placeholder?: string;
@@ -28,7 +29,7 @@ export class SessionIdEditable extends React.PureComponent<Props> {
     const { placeholder, editable, text } = this.props;
 
     return (
-      <div className="session-id-editable">
+      <div className={classNames('session-id-editable', !editable && 'session-id-editable-disabled')}>
         <textarea
           className="session-id-editable-textarea"
           ref={this.inputRef}