From e59702569f8e7076952defa683452d293fa5d44a Mon Sep 17 00:00:00 2001
From: Waldir Pimenta <waldyrious@gmail.com>
Date: Wed, 6 Dec 2023 15:35:05 +0000
Subject: [PATCH] CSS adjustments to Conpherence

Summary:
**Fix Conpherence messages overlapping header in mobile mode**

Before:
{F413544}
After:
{F413546}

**Make Conpherence input box be one line even in desktop mode**

Before:
{F413541}
After:
{F413540}

This second change, in particular, is motivated by the fact that pressing `Enter` sends the message, whereas the multi-line box gives the impression that the `Enter` key would simply introduce a line break in the message. (That's still possible via `Shift`+`Enter`, btw.)

Test Plan:
- Visit a Conpherence room with some content in mobile mode;
  scroll down and notice that the messages no longer slightly overlap the header.
- Visit a Conpherence room in desktop mode;
  verify that the input box now has the height of a single line.

Reviewers: O1 Blessed Committers, valerio.bozzolan

Reviewed By: O1 Blessed Committers, valerio.bozzolan

Subscribers: speck, tobiaswiese, valerio.bozzolan, Matthew, Cigaryno

Tags: #conpherence

Differential Revision: https://we.phorge.it/D25485
---
 resources/celerity/map.php                            |  6 +++---
 .../rsrc/css/application/conpherence/message-pane.css | 11 +++++------
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/resources/celerity/map.php b/resources/celerity/map.php
index 5fc371bcf0..d0bb7523a7 100644
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@@ -7,7 +7,7 @@
  */
 return array(
   'names' => array(
-    'conpherence.pkg.css' => '76ed87e3',
+    'conpherence.pkg.css' => '2f25eb4f',
     'conpherence.pkg.js' => '020aebcf',
     'core.pkg.css' => 'c0bdb5b4',
     'core.pkg.js' => '2eeda9e0',
@@ -51,7 +51,7 @@ return array(
     'rsrc/css/application/conpherence/durable-column.css' => '2d57072b',
     'rsrc/css/application/conpherence/header-pane.css' => 'c9a3db8e',
     'rsrc/css/application/conpherence/menu.css' => '67f4680d',
-    'rsrc/css/application/conpherence/message-pane.css' => 'd244db1e',
+    'rsrc/css/application/conpherence/message-pane.css' => '50b1345e',
     'rsrc/css/application/conpherence/notification.css' => '85c48def',
     'rsrc/css/application/conpherence/participant-pane.css' => '69e0058a',
     'rsrc/css/application/conpherence/transaction.css' => '3a3f5e7e',
@@ -552,7 +552,7 @@ return array(
     'conpherence-durable-column-view' => '2d57072b',
     'conpherence-header-pane-css' => 'c9a3db8e',
     'conpherence-menu-css' => '67f4680d',
-    'conpherence-message-pane-css' => 'd244db1e',
+    'conpherence-message-pane-css' => '50b1345e',
     'conpherence-notification-css' => '85c48def',
     'conpherence-participant-pane-css' => '69e0058a',
     'conpherence-thread-manager' => 'aec8e38c',
diff --git a/webroot/rsrc/css/application/conpherence/message-pane.css b/webroot/rsrc/css/application/conpherence/message-pane.css
index 0dc33789f3..87be9c5897 100644
--- a/webroot/rsrc/css/application/conpherence/message-pane.css
+++ b/webroot/rsrc/css/application/conpherence/message-pane.css
@@ -9,7 +9,7 @@
   position: fixed;
   left: 240px;
   right: 240px;
-  top: 106px;
+  top: 115px;
   bottom: 0px;
   min-width: 300px;
   width: auto;
@@ -55,8 +55,8 @@
   position: fixed;
   left: 240px;
   right: 240px;
-  top: 106px;
-  bottom: 142px;
+  top: 115px;
+  bottom: 88px;
   overflow-x: hidden;
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
@@ -95,7 +95,7 @@
 
 .conpherence-message-pane .phui-form-view {
   border-width: 0;
-  height: 130px;
+  height: 76px;
   padding: 0 20px 12px;
   position: fixed;
   bottom: 0;
@@ -347,7 +347,7 @@ body .conpherence-message-pane .aphront-form-control {
 }
 
 .conpherence-message-pane .remarkup-assist-textarea {
-  height: 88px;
+  height: 34px;
   padding: 8px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -360,7 +360,6 @@ body .conpherence-message-pane .aphront-form-control {
   margin: 0;
   padding: 7px 8px 6px 38px;
   width: 100%;
-  height: 34px;
   resize: none;
   border-color: {$greyborder};
   border-top-left-radius: 3px;