Improve the colormap drop down menu (rerun-io#6401)

### What

- fixes rerun-io#6395

Before (must click on the label!):

<img width="324" alt="image"
src="https://github.com/rerun-io/rerun/assets/49431240/c96b80cf-7298-4b1f-8e41-6bc453449cb3">
<br/><br/>

After (can click anywhere!):

<img width="273" alt="image"
src="https://github.com/rerun-io/rerun/assets/49431240/80ed3067-32b2-43c1-9d86-24d6554d8227">



### Checklist
* [x] I have read and agree to [Contributor
Guide](https://github.com/rerun-io/rerun/blob/main/CONTRIBUTING.md) and
the [Code of
Conduct](https://github.com/rerun-io/rerun/blob/main/CODE_OF_CONDUCT.md)
* [x] I've included a screenshot or gif (if applicable)
* [x] I have tested the web demo (if applicable):
* Using examples from latest `main` build:
[rerun.io/viewer](https://rerun.io/viewer/pr/6401?manifest_url=https://app.rerun.io/version/main/examples_manifest.json)
* Using full set of examples from `nightly` build:
[rerun.io/viewer](https://rerun.io/viewer/pr/6401?manifest_url=https://app.rerun.io/version/nightly/examples_manifest.json)
* [x] The PR title and labels are set such as to maximize their
usefulness for the next release's CHANGELOG
* [x] If applicable, add a new check to the [release
checklist](https://github.com/rerun-io/rerun/blob/main/tests/python/release_checklist)!

- [PR Build Summary](https://build.rerun.io/pr/6401)
- [Recent benchmark results](https://build.rerun.io/graphs/crates.html)
- [Wasm size tracking](https://build.rerun.io/graphs/sizes.html)

To run all checks from `main`, comment on the PR with `@rerun-bot
full-check`.

crates/re_space_view_tensor/src/space_view_class.rs

@@ -436,7 +436,7 @@ impl ColorMapping {
         let Self { map, gamma } = self;
 
         re_ui.grid_left_hand_label(ui, "Color map");
-        colormap_dropdown_button_ui(render_ctx, ui, map);
+        colormap_dropdown_button_ui(render_ctx, re_ui, ui, map);
         ui.end_row();
 
         re_ui.grid_left_hand_label(ui, "Brightness");

crates/re_viewer/src/ui/selection_panel.rs

@@ -1253,6 +1253,7 @@ fn entity_props_ui(
 
 fn colormap_props_ui(
     ctx: &ViewerContext<'_>,
+    re_ui: &re_ui::ReUi,
     ui: &mut egui::Ui,
     entity_props: &mut EntityProperties,
 ) {
@@ -1266,7 +1267,7 @@ fn colormap_props_ui(
     };
 
     ui.label("Color map");
-    colormap_dropdown_button_ui(ctx.render_ctx, ui, &mut re_renderer_colormap);
+    colormap_dropdown_button_ui(ctx.render_ctx, re_ui, ui, &mut re_renderer_colormap);
 
     let new_colormap = match re_renderer_colormap {
         re_renderer::Colormap::Grayscale => Colormap::Grayscale,
@@ -1358,7 +1359,7 @@ fn depth_props_ui(
 
         // TODO(cmc): This should apply to the depth map entity as a whole, but for that we
         // need to get the current hardcoded colormapping out of the image cache first.
-        colormap_props_ui(ctx, ui, entity_props);
+        colormap_props_ui(ctx, ctx.re_ui, ui, entity_props);
     }
 
     Some(())

crates/re_viewer_context/src/gpu_bridge/colormap.rs

@@ -1,4 +1,5 @@
 use crate::gpu_bridge::{get_or_create_texture, render_image};
+use re_ui::{full_span, list_item};
 
 /// Show the given colormap as a horizontal bar.
 fn colormap_preview_ui(
@@ -61,24 +62,43 @@ fn colormap_preview_ui(
 
 pub fn colormap_dropdown_button_ui(
     render_ctx: &re_renderer::RenderContext,
+    re_ui: &re_ui::ReUi,
     ui: &mut egui::Ui,
     map: &mut re_renderer::Colormap,
 ) {
-    egui::ComboBox::from_id_source("color map select")
-        .selected_text(map.to_string())
-        .show_ui(ui, |ui| {
-            ui.style_mut().wrap = Some(false);
-
-            egui::Grid::new("colormap_selector")
-                .num_columns(2)
-                .show(ui, |ui| {
-                    for option in re_renderer::Colormap::ALL {
-                        ui.selectable_value(map, option, option.to_string());
+    let selected_text = map.to_string();
+    let content_ui = |ui: &mut egui::Ui| {
+        for option in re_renderer::Colormap::ALL {
+            let response = list_item::ListItem::new(re_ui)
+                .selected(&option == map)
+                .show_flat(
+                    ui,
+                    list_item::PropertyContent::new(option.to_string()).value_fn(|_, ui, _| {
                         if let Err(err) = colormap_preview_ui(render_ctx, ui, option) {
                             re_log::error_once!("Failed to paint colormap preview: {err}");
                         }
-                        ui.end_row();
-                    }
-                });
+                    }),
+                );
+
+            if response.clicked() {
+                *map = option;
+            }
+        }
+    };
+
+    egui::ComboBox::from_id_source("color map select")
+        .selected_text(selected_text)
+        .show_ui(ui, |ui| {
+            ui.set_width(200.0);
+
+            let background_x_range = ui
+                .spacing()
+                .menu_margin
+                .expand_rect(ui.max_rect())
+                .x_range();
+
+            list_item::list_item_scope(ui, "inner_scope", |ui| {
+                full_span::full_span_scope(ui, background_x_range, content_ui);
+            });
         });
 }