Replace custom filter layout code with atoms (#11236)

### Related

* follow up of #11195
* part of
https://linear.app/rerun/project/ability-to-filter-tables-in-the-viewer-8dcb9ff4e6bc/overview
* closes #11194

### What

Removes the custom layout code in filter_ui in favor of Atoms. This also
changes the color to match the color in the popup. I think the color
before was off because Label had a Sense::click which affected the text
color.

This is on main:
<img width="297" height="116" alt="Screenshot 2025-09-16 at 17 43 05"
src="https://github.com/user-attachments/assets/f61e445c-cd8d-48b6-a85c-2be49cbce085"
/>

This is with my changes:
<img width="229" height="128" alt="Screenshot 2025-09-16 at 17 44 26"
src="https://github.com/user-attachments/assets/0a8b2e29-b151-4ef4-bfed-7a40cd3dfb8f"
/>

I _do_ think the strong one looks better, so I'm happy to change both.

Also the spacing changed (it should use `icon_spacing` now) and I think
it's more even but I'm happy to revert that.

Author: lucasmerlin

Cargo.lock

@@ -7729,7 +7729,6 @@ dependencies = [
  "static_assertions",
  "thiserror 1.0.69",
  "tokio",
- "vec1",
 ]
 
 [[package]]

crates/viewer/re_dataframe_ui/Cargo.toml

@@ -46,7 +46,6 @@ nohash-hasher.workspace = true
 parking_lot.workspace = true
 serde.workspace = true
 thiserror.workspace = true
-vec1.workspace = true
 
 
 [dev-dependencies]

crates/viewer/re_dataframe_ui/src/filters/filter_ui.rs

@@ -1,6 +1,6 @@
-use std::sync::Arc;
+use std::mem;
 
-use egui::{Frame, Margin};
+use egui::{Atom, AtomLayout, Atoms, Frame, Margin, Sense};
 
 use re_ui::{SyntaxHighlighting, UiExt as _, syntax_highlighting::SyntaxHighlightedBuilder};
 
@@ -117,65 +117,35 @@ impl FilterState {
                 let active_index = self.active_filter.take();
                 let mut remove_idx = None;
 
-                // TODO(#11194): ideally, egui would allow wrapping `Frame` widget itself. Remove
-                // this when it does.
-                let prepared_uis = self
-                    .filters
-                    .iter()
-                    .map(|filter| filter.prepare_ui(ui))
-                    .collect::<Vec<_>>();
-                let item_spacing = ui.style().spacing.item_spacing.x;
-                let available_width = ui.available_width();
-                let mut rows = vec1::vec1![vec![]];
-                let mut current_left_position = 0.0;
-                for (index, prepared_ui) in prepared_uis.iter().enumerate() {
-                    if current_left_position > 0.0
-                        && current_left_position + prepared_ui.desired_width() > available_width
-                    {
-                        rows.push(vec![]);
-                        current_left_position = 0.0;
-                    }
-
-                    rows.last_mut().push(index);
-                    current_left_position += prepared_ui.desired_width() + item_spacing;
-                }
-
-                for row in rows {
-                    ui.horizontal(|ui| {
-                        for index in row {
-                            let filter = &mut self.filters[index];
-
-                            // egui uses this id to store the popup openness and size information,
-                            // so we must invalidate if the filter at a given index changes its
-                            // nature
-                            let filter_id = ui.make_persistent_id(egui::Id::new(index).with(
-                                match filter.operation {
-                                    FilterOperation::IntCompares { .. } => "int",
-                                    FilterOperation::FloatCompares { .. } => "float",
-                                    FilterOperation::StringContains(_) => "string",
-                                    FilterOperation::Boolean(_) => "bool",
-                                },
-                            ));
-
-                            let prepared_ui = &prepared_uis[index];
-
-                            let result =
-                                filter.ui(ui, prepared_ui, filter_id, Some(index) == active_index);
-
-                            action = action.merge(result.filter_action);
-
-                            if result.should_delete_filter {
-                                remove_idx = Some(index);
-                            }
+                ui.horizontal_wrapped(|ui| {
+                    for (index, filter) in self.filters.iter_mut().enumerate() {
+                        // egui uses this id to store the popup openness and size information,
+                        // so we must invalidate if the filter at a given index changes its
+                        // nature
+                        let filter_id = ui.make_persistent_id(egui::Id::new(index).with(
+                            match filter.operation {
+                                FilterOperation::IntCompares { .. } => "int",
+                                FilterOperation::FloatCompares { .. } => "float",
+                                FilterOperation::StringContains(_) => "string",
+                                FilterOperation::Boolean(_) => "bool",
+                            },
+                        ));
+
+                        let result = filter.ui(ui, filter_id, Some(index) == active_index);
+
+                        action = action.merge(result.filter_action);
+
+                        if result.should_delete_filter {
+                            remove_idx = Some(index);
                         }
-                    });
-                }
+                    }
 
-                if let Some(remove_idx) = remove_idx {
-                    self.active_filter = None;
-                    self.filters.remove(remove_idx);
-                    should_commit = true;
-                }
+                    if let Some(remove_idx) = remove_idx {
+                        self.active_filter = None;
+                        self.filters.remove(remove_idx);
+                        should_commit = true;
+                    }
+                });
             });
 
         action
@@ -188,79 +158,65 @@ struct DisplayFilterUiResult {
     should_delete_filter: bool,
 }
 
-// TODO(#11194): used by the manual wrapping code. Remove when no longer needed.
-struct FilterPreparedUi {
-    frame: Frame,
-    galley: Arc<egui::Galley>,
-    desired_width: f32,
-}
-
-impl FilterPreparedUi {
-    fn desired_width(&self) -> f32 {
-        self.desired_width
-    }
-}
-
 impl Filter {
-    /// Prepare the UI for this filter
-    fn prepare_ui(&self, ui: &egui::Ui) -> FilterPreparedUi {
-        let layout_job = SyntaxHighlightedBuilder::new()
-            .with_body(&self.column_name)
-            .with_keyword(" ")
-            .with(&self.operation)
-            .into_job(ui.style());
-
-        let galley = ui.fonts(|f| f.layout_job(layout_job));
-
-        let frame = Frame::new()
-            .inner_margin(Margin::symmetric(4, 4))
-            .stroke(ui.tokens().table_filter_frame_stroke)
-            .corner_radius(2.0);
-
-        let desired_width = galley.size().x
-            + ui.style().spacing.item_spacing.x
-            + ui.tokens().small_icon_size.x
-            + frame.total_margin().sum().x;
-
-        FilterPreparedUi {
-            frame,
-            galley,
-            desired_width,
-        }
+    pub fn close_button_id() -> egui::Id {
+        egui::Id::new("filter_close_button")
     }
 
     /// UI for a single filter.
     #[must_use]
     fn ui(
         &mut self,
         ui: &mut egui::Ui,
-        prepared_ui: &FilterPreparedUi,
         filter_id: egui::Id,
         activate_filter: bool,
     ) -> DisplayFilterUiResult {
         let mut should_delete_filter = false;
         let mut action_due_to_filter_deletion = FilterUiAction::None;
 
-        let response = prepared_ui
-            .frame
-            .show(ui, |ui| {
-                let text_response = ui.add(
-                    egui::Label::new(Arc::clone(&prepared_ui.galley))
-                        .selectable(false)
-                        .sense(egui::Sense::click()),
-                );
-
-                if ui
-                    .small_icon_button(&re_ui::icons::CLOSE_SMALL, "Remove filter")
-                    .clicked()
-                {
-                    should_delete_filter = true;
-                    action_due_to_filter_deletion = FilterUiAction::CommitStateToBlueprint;
-                }
+        let mut atoms = Atoms::default();
 
-                text_response
-            })
-            .inner;
+        let layout_job = SyntaxHighlightedBuilder::new()
+            .with_body_default(&self.column_name)
+            .with_keyword(" ")
+            .with(&self.operation)
+            .into_job(ui.style());
+
+        atoms.push_right(layout_job);
+
+        atoms.push_right(Atom::custom(
+            Self::close_button_id(),
+            ui.tokens().small_icon_size,
+        ));
+
+        let frame = Frame::new()
+            .inner_margin(Margin::symmetric(4, 4))
+            .stroke(ui.tokens().table_filter_frame_stroke)
+            .corner_radius(2.0);
+
+        let atom_layout = AtomLayout::new(atoms).sense(Sense::click()).frame(frame);
+
+        let atom_response = atom_layout.show(ui);
+
+        if let Some(rect) = atom_response.rect(Self::close_button_id()) {
+            // The default padding is (1.0, 0.0), making the button look weird
+            let button_padding = mem::take(&mut ui.style_mut().spacing.button_padding);
+            if ui
+                .place(
+                    rect,
+                    ui.small_icon_button_widget(&re_ui::icons::CLOSE_SMALL, "Remove filter")
+                        // Without small the button would grow to interact_size and be off-center
+                        .small(),
+                )
+                .clicked()
+            {
+                should_delete_filter = true;
+                action_due_to_filter_deletion = FilterUiAction::CommitStateToBlueprint;
+            }
+            ui.style_mut().spacing.button_padding = button_padding;
+        }
+
+        let response = atom_response.response;
 
         // Should the popup be open?
         //
@@ -375,7 +331,7 @@ fn numerical_comparison_operator_ui(
     op: &mut ComparisonOperator,
 ) {
     ui.horizontal(|ui| {
-        ui.label(SyntaxHighlightedBuilder::body(column_name).into_widget_text(ui.style()));
+        ui.label(SyntaxHighlightedBuilder::body_default(column_name).into_widget_text(ui.style()));
 
         egui::ComboBox::new("comp_op", "")
             .selected_text(
@@ -399,7 +355,7 @@ fn numerical_comparison_operator_ui(
 
 pub fn basic_operation_ui(ui: &mut egui::Ui, column_name: &str, operator_text: &str) {
     ui.label(
-        SyntaxHighlightedBuilder::body(column_name)
+        SyntaxHighlightedBuilder::body_default(column_name)
             .with_keyword(" ")
             .with_keyword(operator_text)
             .into_widget_text(ui.style()),