fix(plugins): properly pad UI elements when they have a background (#…

…3806)

* fix(plugins): mark selected background up until component width

* style(fmt): rustfmt

default-plugins/configuration/src/presets_screen.rs

@@ -533,13 +533,7 @@ impl PresetsScreen {
         } else {
             (rows.saturating_sub(ui_size) / 2) + 2
         };
-        print_nested_list_with_coordinates(
-            list_items,
-            left_padding,
-            top_coordinates,
-            Some(max_width),
-            None,
-        );
+        print_nested_list_with_coordinates(list_items, left_padding, top_coordinates, None, None);
     }
     fn render_second_bulletin(
         &self,
@@ -672,13 +666,7 @@ impl PresetsScreen {
         } else {
             (rows.saturating_sub(ui_size) / 2) + 6
         };
-        print_nested_list_with_coordinates(
-            list_items,
-            left_padding,
-            top_coordinates,
-            Some(max_width),
-            None,
-        );
+        print_nested_list_with_coordinates(list_items, left_padding, top_coordinates, None, None);
     }
     fn render_leader_keys_indication(
         &self,

default-plugins/configuration/src/rebind_leaders_screen.rs

@@ -304,6 +304,7 @@ impl RebindLeadersScreen {
             } else {
                 (format!("{}", primary_modifier_key_text), 0)
             };
+        let primary_modifier_menu_width = primary_modifier_text.chars().count();
         print_text_with_coordinates(
             Text::new(primary_modifier_text).color_range(3, primary_modifier_start_position..),
             base_x,
@@ -330,7 +331,7 @@ impl RebindLeadersScreen {
                 .collect(),
             base_x,
             base_y + 6,
-            Some(screen_width / 2),
+            Some(primary_modifier_menu_width),
             None,
         );
     }
@@ -504,6 +505,7 @@ impl RebindLeadersScreen {
                 (format!("{}", secondary_modifier_key_text), 0)
             };
         let secondary_modifier_menu_x_coords = base_x + (screen_width / 2);
+        let secondary_modifier_menu_width = secondary_modifier_text.chars().count();
         print_text_with_coordinates(
             Text::new(secondary_modifier_text).color_range(0, secondary_modifier_start_position..),
             secondary_modifier_menu_x_coords,
@@ -530,7 +532,7 @@ impl RebindLeadersScreen {
                 .collect(),
             secondary_modifier_menu_x_coords,
             base_y + 6,
-            Some(screen_width / 2),
+            Some(secondary_modifier_menu_width),
             None,
         );
     }

zellij-server/src/ui/components/text.rs

@@ -65,6 +65,25 @@ pub fn stringify_text(
             stringified.push(character);
         }
     }
+    let coordinates_width = coordinates.as_ref().and_then(|c| c.width);
+    match (coordinates_width, text_style.background) {
+        (Some(coordinates_width), Some(_background_style)) => {
+            let text_width_with_left_padding = text_width + left_padding.unwrap_or(0);
+            let background_padding_length =
+                coordinates_width.saturating_sub(text_width_with_left_padding);
+            if text_width_with_left_padding < coordinates_width {
+                // here we pad the string with whitespace until the end so that the background
+                // style will apply the whole length of the coordinates
+                stringified.push_str(&format!(
+                    "{:width$}",
+                    " ",
+                    width = background_padding_length
+                ));
+            }
+            text_width += background_padding_length;
+        },
+        _ => {},
+    }
     (stringified, text_width)
 }