From 427244ca02de0d8f29a9a310850267fe66781839 Mon Sep 17 00:00:00 2001
From: JC Brand <jc@opkode.com>
Date: Fri, 10 Jan 2025 08:39:33 +0200
Subject: [PATCH] Various style and positioning fixes

---
 src/plugins/roomslist/styles/roomsgroups.scss |  1 +
 src/plugins/rosterview/styles/roster.scss     | 32 +++++++++++--------
 .../templates/requesting_contact.js           |  2 +-
 .../rosterview/templates/roster_item.js       |  4 ++-
 .../rosterview/templates/unsaved_contact.js   |  2 +-
 src/shared/styles/forms.scss                  | 20 ++----------
 6 files changed, 27 insertions(+), 34 deletions(-)

diff --git a/src/plugins/roomslist/styles/roomsgroups.scss b/src/plugins/roomslist/styles/roomsgroups.scss
index 2f302f95ab..e1378d50b2 100644
--- a/src/plugins/roomslist/styles/roomsgroups.scss
+++ b/src/plugins/roomslist/styles/roomsgroups.scss
@@ -14,6 +14,7 @@
 
         converse-rooms-list {
             display: block;
+            margin-bottom: 1em;
 
             svg {
                 fill: var(--muc-color);
diff --git a/src/plugins/rosterview/styles/roster.scss b/src/plugins/rosterview/styles/roster.scss
index 99a6809b2d..a6071baa2c 100644
--- a/src/plugins/rosterview/styles/roster.scss
+++ b/src/plugins/rosterview/styles/roster.scss
@@ -46,21 +46,28 @@
 
             converse-roster-contact {
                 width: 100%;
+                margin: 0;
+                padding: 0;
                 overflow: hidden;
                 white-space: nowrap;
                 text-overflow: ellipsis;
                 display: flex;
                 justify-content: space-between;
 
-                .list-item-action {
-                    line-height: 2em;
-                }
-
-                &:hover {
+                .contact-actions {
                     .list-item-action {
-                        opacity: 1;
+                        line-height: 2em;
+                    }
+                    &:hover {
+                        .list-item-action {
+                            opacity: 1;
+                        }
+                    }
+                    converse-icon {
+                        padding-top: 0.5em;
                     }
                 }
+
             }
 
             .group-toggle {
@@ -77,11 +84,12 @@
                 }
             }
 
-            .current-xmpp-contact {
-                margin: 0.25em 0;
-            }
-
             .list-item {
+
+                .list-item-link {
+                    margin: 0;
+                }
+
                 &.requesting-xmpp-contact {
                     a {
                         line-height: var(--line-height);
@@ -89,8 +97,6 @@
                 }
 
                 .open-chat {
-                    margin: 0;
-                    padding: 0;
                     converse-icon.chat-status {
                         position: relative;
                         border: 2px solid var(--background-color);
@@ -108,8 +114,6 @@
                     }
 
                     .contact-name {
-                        padding: 0;
-                        margin: 0;
                         max-width: 85%;
                         float: none;
                         height: 100%;
diff --git a/src/plugins/rosterview/templates/requesting_contact.js b/src/plugins/rosterview/templates/requesting_contact.js
index ff279625a0..6d3a0e850a 100644
--- a/src/plugins/rosterview/templates/requesting_contact.js
+++ b/src/plugins/rosterview/templates/requesting_contact.js
@@ -34,7 +34,7 @@ export default (el) => {
             ${num_unread ? html`<span class="msgs-indicator badge">${num_unread}</span>` : ''}
             <span class="contact-name ${num_unread ? 'unread-msgs' : ''}">${display_name}</span>
         </a>
-        <span>
+        <span class="contact-actions">
             <a
                 class="accept-xmpp-request list-item-action list-item-action--visible"
                 @click=${el.acceptRequest}
diff --git a/src/plugins/rosterview/templates/roster_item.js b/src/plugins/rosterview/templates/roster_item.js
index c231e5e17e..77d00f653d 100644
--- a/src/plugins/rosterview/templates/roster_item.js
+++ b/src/plugins/rosterview/templates/roster_item.js
@@ -59,5 +59,7 @@ export default  (el) => {
       ${ num_unread ? html`<span class="msgs-indicator badge">${ num_unread }</span>` : '' }
       <span class="contact-name contact-name--${show} ${ num_unread ? 'unread-msgs' : ''}">${display_name}</span>
    </a>
-   ${ api.settings.get('allow_contact_removal') ? tplRemoveLink(el) : '' }`;
+   <span class="contact-actions">
+      ${ api.settings.get('allow_contact_removal') ? tplRemoveLink(el) : '' }
+   </span>`;
 }
diff --git a/src/plugins/rosterview/templates/unsaved_contact.js b/src/plugins/rosterview/templates/unsaved_contact.js
index 6aeac4e25a..32aa22cdd1 100644
--- a/src/plugins/rosterview/templates/unsaved_contact.js
+++ b/src/plugins/rosterview/templates/unsaved_contact.js
@@ -35,7 +35,7 @@ export default (el) => {
             ${num_unread ? html`<span class="msgs-indicator badge">${num_unread}</span>` : ''}
             <span class="contact-name ${num_unread ? 'unread-msgs' : ''}">${display_name}</span>
         </a>
-        <span>
+        <span class="contact-actions">
             <a
                 class="add-contact list-item-action"
                 @click="${(ev) => el.addContact(ev)}"
diff --git a/src/shared/styles/forms.scss b/src/shared/styles/forms.scss
index bd66cd772a..034d16268c 100644
--- a/src/shared/styles/forms.scss
+++ b/src/shared/styles/forms.scss
@@ -31,19 +31,6 @@
                 color: var(--text-color);
                 background-color: var(--background-color);
             }
-
-            &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
-                color: var(--secondary-color);
-            }
-            &::-moz-placeholder { /* Firefox 19+ */
-                color: var(--secondary-color);
-            }
-            &:-ms-input-placeholder { /* IE 10+ */
-                color: var(--secondary-color);
-            }
-            &:-moz-placeholder { /* Firefox 18- */
-                color: var(--secondary-color);
-            }
             &::placeholder {
                 color: var(--secondary-color);
             }
@@ -55,12 +42,11 @@
 
         .btn-group {
             .clear-input {
-                margin-top: 0.5em;
-                margin-bottom : 0.5em;
-                position: absolute;
-                right: 0.2em;
                 cursor: pointer;
                 font-size: var(--font-size);
+                margin-top: 0.4em;
+                position: absolute;
+                right: 0.2em;
             }
         }