Better align toggleswitch in configdialog (#5420)

frontend/ui/widget/toggleswitch.lua

@@ -65,27 +65,38 @@ function ToggleSwitch:init()
     local item_padding = Size.padding.default -- only used to check if text truncate needed
     local item_border_size = Size.border.thin
     local frame_inner_width = self.width - 2*self.toggle_frame.padding - 2* self.toggle_frame.bordersize
-    local item_width = math.ceil(frame_inner_width / self.n_pos - 2*item_border_size)
-    local item_height = self.height / self.row_count
+    -- We'll need to adjust items width and distribute the accumulated fractional part to some
+    -- of them for proper visual alignment
+    local item_width_real = frame_inner_width / self.n_pos - 2*item_border_size
+    local item_width = math.floor(item_width_real)
+    local item_width_adjust = item_width_real - item_width
     -- Note: the height provided by ConfigDialog might be smaller than needed,
     -- it gets too thin if we account for padding & border
-    local center_dimen = Geom:new{
-        w = item_width,
-        h = item_height,
-    }
+    local item_height = self.height / self.row_count
+    local item_width_to_add = 0
     for i = 1, #self.toggle do
+        local real_item_width = item_width
+        item_width_to_add = item_width_to_add + item_width_adjust
+        if item_width_to_add >= 1 then
+            -- One pixel wider to better align the entire widget
+            real_item_width = item_width + math.floor(item_width_to_add)
+            item_width_to_add = item_width_to_add - math.floor(item_width_to_add)
+        end
         local text = self.toggle[i]
         local face = Font:getFace(self.font_face, self.font_size)
         local txt_width = RenderText:sizeUtf8Text(0, Screen:getWidth(), face, text, true, true).x
-        if  txt_width > item_width - item_padding then
-            text = RenderText:truncateTextByWidth(text, face, item_width - item_padding, true, true)
+        if  txt_width > real_item_width - item_padding then
+            text = RenderText:truncateTextByWidth(text, face, real_item_width - item_padding, true, true)
         end
         local label = ToggleLabel:new{
             text = text,
             face = face,
         }
         local content = CenterContainer:new{
-            dimen = center_dimen,
+            dimen = Geom:new{
+                w = real_item_width,
+                h = item_height,
+            },
             label,
         }
         local button = FrameContainer:new{
@@ -99,7 +110,6 @@ function ToggleSwitch:init()
         }
         table.insert(self.toggle_content[math.ceil(i / self.n_pos)], button)
     end
-
     self.toggle_frame[1] = self.toggle_content
     self[1] = self.toggle_frame
     self.dimen = Geom:new(self.toggle_frame:getSize())