From b95d23bb070f11a8a1dd00b40ab4526da1c2a94f Mon Sep 17 00:00:00 2001
From: Sahil Batra <sahil@zulip.com>
Date: Wed, 28 Jun 2023 12:40:12 +0530
Subject: [PATCH] bootstrap: Remove bootstrap CSS for input-append class.

We use input-append class only for some search elements
in the app and the CSS rules applied by bootstrap which
are really used are "white-space" and "margin-bottom"
for a couple of ".input-append" elements and "margin-left"
property on clear button which is re-added to the CSS for
specific elements in this commit.

Others are either redundant or overridden by the other CSS
for the specific elements.

The border-radius property for the clear button was applied
but since we use "x" for it, there is no border for that
button and hence it is redundant.
---
 web/styles/left_sidebar.css           | 17 ++++++-
 web/styles/right_sidebar.css          |  7 +++
 web/styles/subscriptions.css          |  1 +
 web/third/bootstrap/css/bootstrap.css | 64 +--------------------------
 4 files changed, 24 insertions(+), 65 deletions(-)

diff --git a/web/styles/left_sidebar.css b/web/styles/left_sidebar.css
index 01c1d662ae..18f05e1690 100644
--- a/web/styles/left_sidebar.css
+++ b/web/styles/left_sidebar.css
@@ -114,6 +114,10 @@ li.show-more-topics {
         & input {
             width: calc(100% - 50px);
         }
+
+        .clear_search_button {
+            margin-left: -1px;
+        }
     }
 
     & li {
@@ -714,8 +718,17 @@ li.topic-list-item {
     top: -0.5px;
     z-index: 1;
 
-    & input {
-        padding-right: 20px;
+    .input-append {
+        white-space: nowrap;
+        margin-bottom: 10px;
+
+        & input {
+            padding-right: 20px;
+        }
+
+        .clear_search_button {
+            margin-left: -1px;
+        }
     }
 }
 
diff --git a/web/styles/right_sidebar.css b/web/styles/right_sidebar.css
index 98da30cadb..04aa5812da 100644
--- a/web/styles/right_sidebar.css
+++ b/web/styles/right_sidebar.css
@@ -267,6 +267,9 @@ $user_status_emoji_width: 24px;
 }
 
 #user_search_section {
+    white-space: nowrap;
+    margin-bottom: 10px;
+
     & input {
         white-space: nowrap;
         text-overflow: ellipsis;
@@ -274,6 +277,10 @@ $user_status_emoji_width: 24px;
         padding-right: 20px;
         width: calc(100% - 40px - 3px);
     }
+
+    .clear_search_button {
+        margin-left: -1px;
+    }
 }
 
 @media (width < $sm_min) {
diff --git a/web/styles/subscriptions.css b/web/styles/subscriptions.css
index e5851ec6c9..1b9e19cbba 100644
--- a/web/styles/subscriptions.css
+++ b/web/styles/subscriptions.css
@@ -497,6 +497,7 @@ h4.user_group_setting_subsection_title {
 #clear_search_stream_name,
 #clear_search_group_name {
     right: 5px !important;
+    margin-left: -1px;
 }
 
 .stream-title {
diff --git a/web/third/bootstrap/css/bootstrap.css b/web/third/bootstrap/css/bootstrap.css
index 6b0589d7f3..e15fb914c3 100644
--- a/web/third/bootstrap/css/bootstrap.css
+++ b/web/third/bootstrap/css/bootstrap.css
@@ -455,63 +455,8 @@ input:focus:invalid:focus {
   vertical-align: middle;
   padding-left: 5px;
 }
-.input-append {
-  display: inline-block;
-  margin-bottom: 10px;
-  vertical-align: middle;
-  font-size: 0;
-  white-space: nowrap;
-}
-.input-append input,
-.input-append .dropdown-menu,
-.input-append .popover {
-  font-size: 14px;
-}
-.input-append input {
-  position: relative;
-  margin-bottom: 0;
-  vertical-align: top;
-  -webkit-border-radius: 0 4px 4px 0;
-  -moz-border-radius: 0 4px 4px 0;
-  border-radius: 0 4px 4px 0;
-}
-.input-append input:focus {
-  z-index: 2;
-}
-.input-append .btn,
-.input-append .btn-group > .dropdown-toggle {
-  vertical-align: top;
-  -webkit-border-radius: 0;
-  -moz-border-radius: 0;
-  border-radius: 0;
-}
-.input-append .active {
-  background-color: #a9dba9;
-  border-color: #46a546;
-}
-.input-append input {
-  -webkit-border-radius: 4px 0 0 4px;
-  -moz-border-radius: 4px 0 0 4px;
-  border-radius: 4px 0 0 4px;
-}
-.input-append input + .btn-group .btn:last-child {
-  -webkit-border-radius: 0 4px 4px 0;
-  -moz-border-radius: 0 4px 4px 0;
-  border-radius: 0 4px 4px 0;
-}
-.input-append .btn,
-.input-append .btn-group {
-  margin-left: -1px;
-}
-.input-append .btn:last-child,
-.input-append .btn-group:last-child > .dropdown-toggle {
-  -webkit-border-radius: 0 4px 4px 0;
-  -moz-border-radius: 0 4px 4px 0;
-  border-radius: 0 4px 4px 0;
-}
 .form-inline input,
-.form-inline .help-inline,
-.form-inline .input-append {
+.form-inline .help-inline {
   display: inline-block;
   margin-bottom: 0;
   vertical-align: middle;
@@ -523,9 +468,6 @@ input:focus:invalid:focus {
 .form-inline .btn-group {
   display: inline-block;
 }
-.form-inline .input-append {
-  margin-bottom: 0;
-}
 .nav {
   margin-left: 0;
   margin-bottom: 20px;
@@ -1322,10 +1264,6 @@ button.close {
   .row {
     margin-left: 0;
   }
-  .input-append input {
-    display: inline-block;
-    width: auto;
-  }
   .modal {
     position: fixed;
     top: 20px;