Nice tab title spacing

crates/egui_extras/src/dock/behavior.rs

@@ -35,34 +35,37 @@ pub trait Behavior<Leaf> {
         let text = self.tab_text_for_node(nodes, node_id);
         let font_id = TextStyle::Button.resolve(ui.style());
         let galley = text.into_galley(ui, Some(false), f32::INFINITY, font_id);
-        let (_, rect) = ui.allocate_space(galley.size());
+
+        let x_margin = self.tab_title_spacing(ui.visuals());
+        let (_, rect) = ui.allocate_space(vec2(
+            galley.size().x + 2.0 * x_margin,
+            ui.available_height(),
+        ));
         let response = ui.interact(rect, id, Sense::click_and_drag());
 
         // Show a gap when dragged
         if ui.is_rect_visible(rect) && !is_being_dragged {
-            {
+            let bg_color = self.tab_bg_color(ui.visuals(), active);
-                let mut bg_rect = rect;
+            let stroke = self.tab_outline_stroke(ui.visuals(), active);
-                bg_rect.min.y = ui.max_rect().min.y;
+            ui.painter().rect(rect.shrink(0.5), 0.0, bg_color, stroke);
-                bg_rect.max.y = ui.max_rect().max.y;
-                bg_rect = bg_rect.expand2(vec2(0.5 * ui.spacing().item_spacing.x, 0.0));
 
-                let bg_color = self.tab_bg_color(ui.visuals(), active);
+            if active {
-                let stroke = self.tab_outline_stroke(ui.visuals(), active);
+                // Make the tab name area connect with the tab ui area:
-                ui.painter().rect(bg_rect, 0.0, bg_color, stroke);
+                ui.painter().hline(
-
+                    rect.x_range(),
-                if active {
+                    rect.bottom(),
-                    // Make the tab name area connect with the tab ui area:
+                    Stroke::new(stroke.width + 1.0, bg_color),
-                    ui.painter().hline(
+                );
-                        bg_rect.x_range(),
-                        bg_rect.bottom(),
-                        Stroke::new(stroke.width + 1.0, bg_color),
-                    );
-                }
             }
 
             let text_color = self.tab_text_color(ui.visuals(), active);
-            ui.painter()
+            ui.painter().galley_with_color(
-                .galley_with_color(rect.min, galley.galley, text_color);
+                egui::Align2::CENTER_CENTER
+                    .align_size_within_rect(galley.size(), rect)
+                    .min,
+                galley.galley,
+                text_color,
+            );
         }
 
         response
@@ -74,10 +77,12 @@ pub trait Behavior<Leaf> {
     }
 
     /// Adds some UI to the top right of the tab bar.
+    ///
     /// You can use this to, for instance, add a button for adding new tabs.
+    ///
+    /// The widgets will be added right-to-left.
     fn top_bar_rtl_ui(&mut self, _ui: &mut Ui, _node_id: NodeId) {
         // if ui.button("➕").clicked() {
-        //     // TODO: add a new thing
         // }
     }
 
@@ -86,7 +91,7 @@ pub trait Behavior<Leaf> {
 
     /// The height of the bar holding tab names.
     fn tab_bar_height(&self, _style: &egui::Style) -> f32 {
-        20.0
+        24.0
     }
 
     /// Width of the gap between nodes in a horizontal or vertical layout,
@@ -112,6 +117,11 @@ pub trait Behavior<Leaf> {
         }
     }
 
+    /// Extra spacing to left and right of tab titles.
+    fn tab_title_spacing(&self, _visuals: &Visuals) -> f32 {
+        8.0
+    }
+
     /// The background color of the tab bar
     fn tab_bar_color(&self, visuals: &Visuals) -> Color32 {
         if visuals.dark_mode {

crates/egui_extras/src/dock/branch/tabs.rs

@@ -92,6 +92,8 @@ impl Tabs {
         ui.with_layout(egui::Layout::right_to_left(egui::Align::Center), |ui| {
             behavior.top_bar_rtl_ui(ui, node_id);
 
+            ui.spacing_mut().item_spacing.x = 0.0; // Tabs have spacing built-in
+
             ui.with_layout(egui::Layout::left_to_right(egui::Align::Center), |ui| {
                 for (i, &child_id) in self.children.iter().enumerate() {
                     let is_being_dragged = is_being_dragged(ui.ctx(), child_id);

examples/dock/src/main.rs

@@ -65,7 +65,7 @@ impl Default for DockBehavior {
     fn default() -> Self {
         Self {
             simplification_options: Default::default(),
-            tab_bar_height: 20.0,
+            tab_bar_height: 24.0,
             gap_width: 2.0,
             add_child_to: None,
         }