Fix visual bug in search panel (#1708)

* Remove weird right margin

* Add possibility to remove background color from search input

* Clear background on search panel

* Housekeeping

CHANGELOG.md

@@ -13,6 +13,8 @@
 
 - [#1709](https://github.com/lapce/lapce/pull/1709): Fix search result ordering
 
+ - [#1708](https://github.com/lapce/lapce/pull/1708): Fix visual issue when search panel is placed to either side panel
+
 ## 0.2.3
 
 ### Features/Changes

lapce-ui/src/search.rs

@@ -32,6 +32,7 @@ pub struct SearchInput {
     result_width: f64,
     search_input_padding: f64,
     mouse_pos: Point,
+    background_color: Option<&'static str>,
 }
 
 impl SearchInput {
@@ -64,9 +65,15 @@ fn new(view_id: WidgetId) -> Self {
             icons,
             mouse_pos: Point::ZERO,
             search_input_padding,
+            background_color: Some(LapceTheme::EDITOR_BACKGROUND),
         }
     }
 
+    pub fn clear_background_color(mut self) -> Self {
+        self.background_color = None;
+        self
+    }
+
     fn mouse_down(&self, ctx: &mut EventCtx, mouse_event: &MouseEvent) {
         for icon in self.icons.iter() {
             if icon.rect.contains(mouse_event.pos) {
@@ -127,9 +134,9 @@ fn layout(
         let icon_height = height - self.search_input_padding;
         let mut width = input_size.width + self.result_width + height * icon_len;
 
-        if width - 20.0 > bc.max().width {
+        if width > bc.max().width {
             let input_bc = BoxConstraints::tight(Size::new(
-                bc.max().width - height * icon_len - 20.0 - self.result_width,
+                bc.max().width - height * icon_len - self.result_width,
                 bc.max().height,
             ));
             input_size = self.input.layout(ctx, &input_bc, data, env);
@@ -172,12 +179,10 @@ fn update(
     fn paint(&mut self, ctx: &mut PaintCtx, data: &LapceTabData, env: &Env) {
         let buffer = data.editor_view_content(self.parent_view_id);
 
-        let rect = ctx.size().to_rect();
-        ctx.fill(
-            rect,
-            data.config
-                .get_color_unchecked(LapceTheme::EDITOR_BACKGROUND),
-        );
+        if let Some(background_color) = self.background_color {
+            let rect = ctx.size().to_rect();
+            ctx.fill(rect, data.config.get_color_unchecked(background_color));
+        }
         self.input.paint(ctx, data, env);
 
         let mut index = None;
@@ -272,7 +277,7 @@ pub fn new_search_panel(data: &LapceTabData) -> LapcePanel {
         .get(&data.search.editor_view_id)
         .unwrap();
 
-    let search_bar = SearchInput::new(editor_data.view_id);
+    let search_bar = SearchInput::new(editor_data.view_id).clear_background_color();
 
     let split = LapceSplit::new(data.search.split_id)
         .horizontal()