From 50a220ab6d8e5021e8f000cb576f6182389b8dc2 Mon Sep 17 00:00:00 2001
From: Alvin Bauma <alvinbauma10@gmail.com>
Date: Thu, 8 Feb 2024 12:15:58 +0200
Subject: [PATCH] [FIX] Fix the contact autocompletion issue when composing a
 new message

---
 modules/contacts/site.css |  2 +-
 modules/smtp/modules.php  | 24 ++++++++++++------------
 modules/smtp/site.css     | 18 +++++++++---------
 3 files changed, 22 insertions(+), 22 deletions(-)

diff --git a/modules/contacts/site.css b/modules/contacts/site.css
index beb241826b..6d60236732 100644
--- a/modules/contacts/site.css
+++ b/modules/contacts/site.css
@@ -1,7 +1,7 @@
 .add_contact_controls { display: none; }
 .contact_suggestion { display: block; }
 .close_autocomplete { float: right; }
-#cc_contacts, #bcc_contacts, #to_contacts { z-index: 1; display: none; left: 34px; margin-top: -5px; position: absolute; background-color: #fff; border: solid 1px #ddd; padding: 10px; border-radius: 3px 3px 3px 3px; border-top: none; }
+#cc_contacts, #bcc_contacts, #to_contacts { z-index: 10; display: none; margin-top: -5px; position: absolute; background-color: #fff; border: solid 1px #ddd; padding: 10px; border-radius: 3px 3px 3px 3px; border-top: none; }
 .contact_pages { text-align: center; border-bottom: none !important; }
 .no_contact_sources { text-align: center; color: #999; font-size: 110%; margin-top: 60px; }
 .add_contact { margin-bottom: 30px; margin-top: 10px; color: #666; margin-right: 25px; float: left; clear: left; margin-left: 25px; width: 300px; }
diff --git a/modules/smtp/modules.php b/modules/smtp/modules.php
index cbbf3acafc..4b50eb58c5 100644
--- a/modules/smtp/modules.php
+++ b/modules/smtp/modules.php
@@ -1101,24 +1101,24 @@ protected function output() {
                 '<input type="hidden" class="compose_draft_id" name="draft_id" value="'.$this->html_safe($draft_id).'" />'.
                 '<input type="hidden" class="compose_in_reply_to" name="compose_in_reply_to" value="'.$this->html_safe($in_reply_to).'" />'.
                 
-                '<div class="form-floating mb-3 to_outer compose_container position-relative">'.
-                    '<div class="bubbles bubble_dropdown"></div>'.
-                    '<input autocomplete="off" value="'.$this->html_safe($to).'" required name="compose_to" class="compose_to form-control" type="text" placeholder="'.$this->trans('To').' kiki" id="compose_to" />'.
-                    '<label for="compose_to">'.$this->trans('To').'</label>'.
-                    '<a href="#" tabindex="-1" class="toggle_recipients position-absolute top-0 end-0 mt-2 me-2"><i class="bi bi-plus-square-fill fs-3"></i></a>'.
+                '<div class="to_outer">'.
+                    '<div class="mb-3 position-relative compose_container p-1 w-100">'.
+                        '<div class="bubbles bubble_dropdown"></div>'.
+                        '<input autocomplete="off" value="'.$this->html_safe($to).'" required name="compose_to" class="compose_to w-75" type="text" placeholder="'.$this->trans('To').'" id="compose_to" />'.
+                        '<a href="#" tabindex="-1" class="toggle_recipients position-absolute top-0 end-0 pe-2"><i class="bi bi-plus-square-fill fs-3"></i></a>'.
+                        '<div id="to_contacts"></div>'.
+                    '</div>'.
                 '</div>'.
-                '<div id="to_contacts"></div>'.
+
                 '<div class="recipient_fields">'.
-                    '<div class="form-floating mb-3 compose_container">'.
+                    '<div class="mb-3 compose_container">'.
                         '<div class="bubbles bubble_dropdown"></div>'.
-                        '<input autocomplete="off" value="'.$this->html_safe($cc).'" name="compose_cc" class="compose_cc form-control" type="text" placeholder="'.$this->trans('Cc').'" id="compose_cc" />'.
-                        '<label for="compose_cc">'.$this->trans('Cc').'</label>'.
+                        '<input autocomplete="off" value="'.$this->html_safe($cc).'" name="compose_cc" class="compose_cc" type="text" placeholder="'.$this->trans('Cc').'" id="compose_cc" />'.
                     '</div>'.
                     '<div id="cc_contacts"></div>'.
-                    '<div class="form-floating mb-3 compose_container">'.
+                    '<div class="mb-3 compose_container">'.
                         '<div class="bubbles bubble_dropdown"></div>'.
-                        '<input autocomplete="off" value="'.$this->html_safe($bcc).'" name="compose_bcc" class="compose_bcc form-control" type="text" placeholder="'.$this->trans('Bcc').'" id="compose_bcc" />'.
-                        '<label for="compose_bcc">'.$this->trans('Bcc').'</label>'.
+                        '<input autocomplete="off" value="'.$this->html_safe($bcc).'" name="compose_bcc" class="compose_bcc" type="text" placeholder="'.$this->trans('Bcc').'" id="compose_bcc" />'.
                     '</div>'.
                     '<div id="bcc_contacts"></div>'.
                 '</div>'.
diff --git a/modules/smtp/site.css b/modules/smtp/site.css
index 544eea4efb..a9c580e406 100644
--- a/modules/smtp/site.css
+++ b/modules/smtp/site.css
@@ -1,7 +1,7 @@
 .compose_page { width: 100%; height: 100%; min-height: 400px; background-color: #fff; width: 100%; }
 /* .compose_form { position: relative; display: block; padding: 20px; width: 80%; padding-left: 30px; padding-bottom: 0px; } */
 /* .compose_bcc, .compose_cc, .compose_subject, .compose_to { padding: 5px; margin: 5px; width: 95%; } */
-/* .compose_to, .compose_bcc, .compose_cc { border: unset; outline: none; white-space: nowrap; } */
+.compose_to, .compose_bcc, .compose_cc { border: unset; outline: none; white-space: nowrap; width: 95%; }
 /* .toggle_recipients { background-color: #fff;font-size: 120%; } */
 
 .compose_body { min-height: 300px !important; }
@@ -30,17 +30,17 @@
 .meter span {display: block; height: 100%; }
 .progress {background-color: #4323f5; animation: progressBar 1s ease-in-out; animation-fill-mode:both; }
 @keyframes progressBar { 0% { width: 0; } 100% { width: 100%; }}
-/* .compose_container { padding: 0 10px 0 0; border: 1px solid #ddd; margin-left: 5px; width: 100%; border-radius: 5px; margin-bottom: 10px; } */
-.bubbles { display: inline-block; margin-left: 37px; background-color: #fff; cursor: pointer; z-index: 10; top: 0;  }
-.bubble { font-size: .9rem; border: 1px solid #ddd; border-radius: 25px; padding: 1px 7px; display: inline-block; }
+.compose_container { border: 1px solid #ddd; border-radius: 5px }
+.bubbles { display: inline-block; background-color: #fff; cursor: pointer; padding: 5px; }
+.bubble { font-size: .9rem; border: 1px solid #ddd; border-radius: 4px; padding: 7px 14px; display: inline-block; margin: 0px 5px 5px 0px; }
 .bubble:hover { background-color: #eee; }
-.bubble:not(:first-child) { margin-left: 5px; }
-.bubble_close { font-size: 1.7em; float: right; margin-top: 12px; line-height: 0; margin-left: 7px; }
-.bubble_dropdown {position: absolute; display: inline-block; }
+/* .bubble:not(:first-child) { margin-left: 5px; } */
+.bubble_close { font-size: 1.7em; float: right; margin-top: 9px; line-height: 0; margin-left: 7px; }
+.bubble_dropdown {position: relative;display: inline-block;}
 .bubble_dropdown-toggle {cursor: pointer;}
-.bubble_dropdown-content {display: none; position: absolute; background-color: #f9f9f9; padding: 10px;border: 1px solid #ddd; min-width: 160px; z-index: 1;}
+.bubble_dropdown-content {display: none;position: absolute;background-color: #f9f9f9;padding: 10px;border: 1px solid #ddd; min-width: 160px; z-index: 1;}
 .bubble_dropdown-content.show {display: block;}
 .bubble_dropdown-content ul {list-style-type: none;padding: 0;margin: 0;}
 .bubble_dropdown-content ul li span, .bubble_dropdown-content ul li a {display: flex; align-items: center; padding: 8px 4px;text-decoration: none;color: #333;}
 .bubble_dropdown-content ul li span:hover, .bubble_dropdown-content ul li a:hover { background-color: #f1f1f1;cursor: pointer;}
-.bubble_dropdown-content ul li img { width: 16px;height: 16px;margin-right: 8px;}
+.bubble_dropdown-content ul li img { width: 16px;height: 16px;margin-right: 8px;}
\ No newline at end of file