Fix ugly UI for some arrow data (#5235)

### What
Improve the display of arbitrary arrow data, _slightly_.

There were several problems:
* We were displaying huge datatypes (unions)
* We were not respecting the max toolbar size
* We were falling back on datatype too early

Before:
<img width="2006" alt="Screenshot 2024-02-20 at 10 46 21"
src="https://github.com/rerun-io/rerun/assets/1148717/266183be-bad2-40e6-9a91-33404924db19">

After:
<img width="798" alt="Screenshot 2024-02-20 at 10 46 02"
src="https://github.com/rerun-io/rerun/assets/1148717/08a8c5eb-b425-469e-a5b8-b81e31d1c2ca">


### 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 newly built examples:
[app.rerun.io](https://app.rerun.io/pr/5235/index.html)
* Using examples from latest `main` build:
[app.rerun.io](https://app.rerun.io/pr/5235/index.html?manifest_url=https://app.rerun.io/version/main/examples_manifest.json)
* Using full set of examples from `nightly` build:
[app.rerun.io](https://app.rerun.io/pr/5235/index.html?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/5235)
- [Docs
preview](https://rerun.io/preview/74d98392d782ec79a9989d052115a439a271029a/docs)
<!--DOCS-PREVIEW-->
- [Examples
preview](https://rerun.io/preview/74d98392d782ec79a9989d052115a439a271029a/examples)
<!--EXAMPLES-PREVIEW-->
- [Recent benchmark results](https://build.rerun.io/graphs/crates.html)
- [Wasm size tracking](https://build.rerun.io/graphs/sizes.html)

crates/re_data_ui/src/component_ui_registry.rs

@@ -85,38 +85,45 @@ fn arrow_ui(ui: &mut egui::Ui, verbosity: UiVerbosity, array: &dyn arrow2::array
     if let Some(utf8) = array.as_any().downcast_ref::<Utf8Array<i32>>() {
         if utf8.len() == 1 {
             let string = utf8.value(0);
-            text_ui(string, ui, verbosity);
+            text_ui(ui, verbosity, string);
             return;
         }
     }
     if let Some(utf8) = array.as_any().downcast_ref::<Utf8Array<i64>>() {
         if utf8.len() == 1 {
             let string = utf8.value(0);
-            text_ui(string, ui, verbosity);
+            text_ui(ui, verbosity, string);
             return;
         }
     }
 
     let num_bytes = array.total_size_bytes();
-    if num_bytes < 256 {
+    if num_bytes < 3000 {
         // Print small items:
         let mut string = String::new();
         let display = arrow2::array::get_display(array, "null");
         if display(&mut string, 0).is_ok() {
-            ui.label(string);
+            text_ui(ui, verbosity, &string);
             return;
         }
     }
 
     // Fallback:
-    ui.label(format!(
-        "{} of {:?}",
-        re_format::format_bytes(num_bytes as _),
-        array.data_type()
-    ));
+    let bytes = re_format::format_bytes(num_bytes as _);
+
+    // TODO(emilk): pretty-print data type
+    let data_type_formatted = format!("{:?}", array.data_type());
+
+    if data_type_formatted.len() < 20 {
+        // e.g. "4.2 KiB of Float32"
+        text_ui(ui, verbosity, &format!("{bytes} of {data_type_formatted}"));
+    } else {
+        // Huge datatype, probably a union horror show
+        ui.label(format!("{bytes} of data"));
+    }
 }
 
-fn text_ui(string: &str, ui: &mut egui::Ui, verbosity: UiVerbosity) {
+fn text_ui(ui: &mut egui::Ui, verbosity: UiVerbosity, string: &str) {
     let font_id = egui::TextStyle::Monospace.resolve(ui.style());
     let color = ui.visuals().text_color();
     let wrap_width = ui.available_width();
@@ -143,11 +150,13 @@ fn text_ui(string: &str, ui: &mut egui::Ui, verbosity: UiVerbosity) {
         }
     }
 
+    let galley = ui.fonts(|f| f.layout_job(layout_job)); // We control the text layout; not the label
+
     if needs_scroll_area {
         egui::ScrollArea::vertical().show(ui, |ui| {
-            ui.label(layout_job);
+            ui.label(galley);
         });
     } else {
-        ui.label(layout_job);
+        ui.label(galley);
     }
 }

crates/re_ui/src/design_tokens.rs

@@ -185,6 +185,8 @@ fn apply_design_tokens(ctx: &egui::Context) -> DesignTokens {
     egui_style.spacing.scroll.bar_width = 6.0;
     egui_style.spacing.scroll.bar_outer_margin = 2.0;
 
+    egui_style.spacing.tooltip_width = 720.0;
+
     // don't color hyperlinks #2733
     egui_style.visuals.hyperlink_color = default;