From 971fd4a4f7519dca7a5dfaf5f4868424e99a80a6 Mon Sep 17 00:00:00 2001
From: Aram Drevekenin <aram@poor.dev>
Date: Sun, 24 Nov 2024 16:46:13 +0100
Subject: [PATCH] fix(plugins): properly pad UI elements when they have a
 background (#3806)

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

* style(fmt): rustfmt
---
 .../configuration/src/presets_screen.rs       | 16 ++--------------
 .../src/rebind_leaders_screen.rs              |  6 ++++--
 zellij-server/src/ui/components/text.rs       | 19 +++++++++++++++++++
 3 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/default-plugins/configuration/src/presets_screen.rs b/default-plugins/configuration/src/presets_screen.rs
index 9a29b790..d783c00f 100644
--- a/default-plugins/configuration/src/presets_screen.rs
+++ b/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,
diff --git a/default-plugins/configuration/src/rebind_leaders_screen.rs b/default-plugins/configuration/src/rebind_leaders_screen.rs
index f87f3cfa..4e177228 100644
--- a/default-plugins/configuration/src/rebind_leaders_screen.rs
+++ b/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,
         );
     }
diff --git a/zellij-server/src/ui/components/text.rs b/zellij-server/src/ui/components/text.rs
index b7f95aa0..2173f72f 100644
--- a/zellij-server/src/ui/components/text.rs
+++ b/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)
 }