do not render session-id-editable border when textarea disabled

stylesheets/_session.scss

@@ -1344,6 +1344,7 @@ label {
 .session-id-editable textarea {
   resize: none;
   overflow: hidden;
+  user-select: all;
 }
 
 input {

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 {

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}