KeyValuePage: proper padding between key and value

Use some HorizontalSpan for padding between key and value,
instead of prepending a space to the value text (which
won't work as expected if value text is RTL, as it would
be put on the right side of screen).

frontend/ui/widget/keyvaluepage.lua

@@ -145,18 +145,21 @@ function KeyValueItem:init()
 
     local frame_padding = Size.padding.default
     local frame_internal_width = self.width - frame_padding * 2
+    local middle_padding = Size.padding.default -- min enforced padding between key and value
+    local available_width = frame_internal_width - middle_padding
+
     -- Default widths (and position of value widget) if each text fits in 1/2 screen width
-    local key_w = frame_internal_width / 2
+    local key_w = frame_internal_width / 2 - middle_padding
     local value_w = frame_internal_width / 2
 
     local key_widget = TextWidget:new{
         text = self.key,
-        max_width = frame_internal_width,
+        max_width = available_width,
         face = self.tface,
     }
     local value_widget = TextWidget:new{
         text = tvalue,
-        max_width = frame_internal_width,
+        max_width = available_width,
         face = self.cface,
     }
     local key_w_rendered = key_widget:getWidth()
@@ -165,26 +168,23 @@ function KeyValueItem:init()
     -- As both key_widget and value_width will be in a HorizontalGroup,
     -- and key is always left aligned, we can just tweak the key width
     -- to position the value_widget
-    local value_prepend_space = false
     local value_align_right = false
     local fit_right_align = true -- by default, really right align
 
     if key_w_rendered > key_w or value_w_rendered > value_w then
         -- One (or both) does not fit in 1/2 width
-        if key_w_rendered + value_w_rendered > frame_internal_width then
+        if key_w_rendered + value_w_rendered > available_width then
             -- Both do not fit: one has to be truncated so they fit
             if key_w_rendered >= value_w_rendered then
                 -- Rare case: key larger than value.
                 -- We should have kept our keys small, smaller than 1/2 width.
                 -- If it is larger than value, it's that value is kinda small,
                 -- so keep the whole value, and truncate the key
-                key_w = frame_internal_width - value_w_rendered
+                key_w = available_width - value_w_rendered
             else
                 -- Usual case: value larger than key.
-                -- Keep our small key, fit the value in the remaining width,
-                -- prepend some space to separate them
+                -- Keep our small key, fit the value in the remaining width.
                 key_w = key_w_rendered
-                value_prepend_space = true
             end
             value_align_right = true -- so the ellipsis touches the screen right border
             if self.value_overflow_align ~= "right" and self.value_align ~= "right" then
@@ -204,28 +204,24 @@ function KeyValueItem:init()
         else
             -- Both can fit: break the 1/2 widths
             if self.value_overflow_align == "right" or self.value_align == "right" then
-                key_w = frame_internal_width - value_w_rendered
+                key_w = available_width - value_w_rendered
                 value_align_right = true
             else
                 key_w = key_w_rendered
-                value_prepend_space = true
             end
         end
         -- In all the above case, we set the right key_w to include any
-        -- needed in-between padding: value_w is what's left.
-        value_w = frame_internal_width - key_w
+        -- needed additional in-between padding: value_w is what's left.
+        value_w = available_width - key_w
     else
         if self.value_align == "right" then
-            key_w = frame_internal_width - value_w_rendered
+            key_w = available_width - value_w_rendered
             value_w = value_w_rendered
             value_align_right = true
         end
     end
 
-    -- Adjust widgets' max widths and text as needed
-    if value_prepend_space then
-        value_widget:setText(" "..tvalue)
-    end
+    -- Adjust widgets' max widths if needed
     value_widget:setMaxWidth(value_w)
     if fit_right_align and value_align_right and value_widget:getWidth() < value_w then
         -- Because of truncation at glyph boundaries, value_widget
@@ -250,6 +246,9 @@ function KeyValueItem:init()
                 },
                 key_widget,
             },
+            HorizontalSpan:new{
+                width = middle_padding,
+            },
             LeftContainer:new{
                 dimen = {
                     w = value_w,