session-id-editable

_locales/en/messages.json

@@ -2409,7 +2409,7 @@
     "message": "Enter your <strong>Session ID</strong> below to link this device to your <strong>Session ID</strong>."
   },
   "enterSessionIDHere": {
-    "message": "Enter your Session ID here"
+    "message": "Enter your Session ID"
   },
   "continueYourSession": {
     "message": "Continue Your Session"

stylesheets/_session.scss

@@ -1350,6 +1350,16 @@ label {
   overflow: hidden;
   user-select: all;
   overflow-y: auto;
+  padding: 0px 5px 20px 5px;
+
+  &.session-id-editable-textarea:placeholder-shown {
+    padding: 20px 5px 0px 5px;
+  }
+
+  &.group-id-editable-textarea {
+    margin-top: 15px;
+    white-space: nowrap;
+  }
 }
 
 input {
@@ -1594,6 +1604,10 @@ input {
   }
 }
 .create-group-name-input {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+
   .session-id-editable {
     height: 60px !important;
 

stylesheets/_session_left_pane.scss

@@ -238,9 +238,11 @@ $session-compose-margin: 20px;
     box-shadow: 0 0 100px 0 rgba(0, 0, 0, 0.5);
     display: flex;
     flex-direction: column;
+    flex-grow: 1;
     align-items: center;
     overflow-y: auto;
     overflow-x: hidden;
+    
     .session-icon .exit {
       padding: 13px;
     }
@@ -307,6 +309,8 @@ $session-compose-margin: 20px;
     }
 
     .session-id-editable {
+      width: 90%;
+
       textarea::-webkit-inner-spin-button {
         margin: 0px 20px;
         width: -webkit-fill-available;

ts/components/session/SessionClosableOverlay.tsx

@@ -196,6 +196,7 @@ export class SessionClosableOverlay extends React.Component<Props, State> {
               editable={!noContactsForClosedGroup}
               placeholder={placeholder}
               value={groupName}
+              isGroup={true}
               maxLength={window.CONSTANTS.MAX_GROUPNAME_LENGTH}
               onChange={this.onGroupNameChanged}
               onPressEnter={() => onButtonClick(groupName, selectedMembers)}

ts/components/session/SessionIdEditable.tsx

@@ -9,6 +9,7 @@ interface Props {
   onChange?: any;
   onPressEnter?: any;
   maxLength?: number;
+  isGroup?: boolean;
 }
 
 export class SessionIdEditable extends React.PureComponent<Props> {
@@ -28,7 +29,7 @@ export class SessionIdEditable extends React.PureComponent<Props> {
   }
 
   public render() {
-    const { placeholder, editable, text, value, maxLength } = this.props;
+    const { placeholder, editable, text, value, maxLength, isGroup } = this.props;
 
     return (
       <div
@@ -38,7 +39,8 @@ export class SessionIdEditable extends React.PureComponent<Props> {
         )}
       >
         <textarea
-          className="session-id-editable-textarea"
+          className={classNames(
+            isGroup ? 'group-id-editable-textarea' : 'session-id-editable-textarea')}
           ref={this.inputRef}
           placeholder={placeholder}
           disabled={!editable}