From d691d49538d1848ab4883924de67bf2aaba70f48 Mon Sep 17 00:00:00 2001
From: BlackGanglion <354788473@qq.com>
Date: Fri, 28 Mar 2025 21:33:46 +0800
Subject: [PATCH] fix: fix filter-editor style (#1114)

Include before/after visuals or gifs if this PR includes visual changes.

### Before

![image](https://github.com/user-attachments/assets/84377ff4-f887-45c4-8424-d76d8724f79e)


### After

![image](https://github.com/user-attachments/assets/4e77bc54-a061-4474-b53f-d91677528336)

---------

Co-authored-by: Harel M <harel.mazor@gmail.com>
---
 src/components/FilterEditorBlock.tsx |  6 +++---
 src/styles/_filtereditor.scss        | 29 +++++++---------------------
 2 files changed, 10 insertions(+), 25 deletions(-)

diff --git a/src/components/FilterEditorBlock.tsx b/src/components/FilterEditorBlock.tsx
index f19933cb..5e546686 100644
--- a/src/components/FilterEditorBlock.tsx
+++ b/src/components/FilterEditorBlock.tsx
@@ -11,6 +11,9 @@ class FilterEditorBlockInternal extends React.Component<FilterEditorBlockInterna
   render() {
     const t = this.props.t;
     return <div className="maputnik-filter-editor-block">
+      <div className="maputnik-filter-editor-block-content">
+        {this.props.children}
+      </div>
       <div className="maputnik-filter-editor-block-action">
         <InputButton
           className="maputnik-delete-filter"
@@ -20,9 +23,6 @@ class FilterEditorBlockInternal extends React.Component<FilterEditorBlockInterna
           <MdDelete />
         </InputButton>
       </div>
-      <div className="maputnik-filter-editor-block-content">
-        {this.props.children}
-      </div>
     </div>
   }
 }
diff --git a/src/styles/_filtereditor.scss b/src/styles/_filtereditor.scss
index 766eeac9..9dadce4b 100644
--- a/src/styles/_filtereditor.scss
+++ b/src/styles/_filtereditor.scss
@@ -14,26 +14,18 @@
   color: vars.$color-lowgray;
 }
 
-.maputnik-filter-editor-property {
-  display: inline-block;
-  width: 25%;
+.maputnik-filter-editor-single {
+  display: flex;
+  column-gap: 6px;
 }
 
 .maputnik-filter-editor-operator {
-  margin: 0 2%;
-  display: inline-block;
-  width: 17%;
-
   .maputnik-select {
     width: 100%;
   }
 }
 
 .maputnik-filter-editor-args {
-  display: inline-block;
-  width: 54%;
-  margin: 0 2%;
-
   .maputnik-string,
   .maputnik-number {
     width: 100%;
@@ -67,17 +59,10 @@
   @extend .maputnik-icon-button !optional; /* stylelint-disable-line */
 }
 
-.maputnik-filter-editor-block-action {
-  margin-top: vars.$margin-2;
-  margin-bottom: vars.$margin-2;
-  display: inline-block;
-  width: 6%;
-  margin-right: 1.5%;
-}
-
-.maputnik-filter-editor-block-content {
-  display: inline-block;
-  width: 92.5%;
+.maputnik-filter-editor-block {
+  display: flex;
+  column-gap: 6px;
+  margin-bottom: 2px;
 }
 
 .maputnik-radio-as-button {