ButtonDialog/ButtonDialogTitle: consistent 'width' handling

Make these 2 widget behave similarly, and don't rely on
ButtonTable default width for their own default width.
ButtonDialogTitle: also properly size its title.

frontend/ui/widget/buttondialog.lua

@@ -55,11 +55,19 @@ local Screen = require("device").screen
 
 local ButtonDialog = InputContainer:extend{
     buttons = nil,
+    width = nil,
+    width_factor = nil, -- number between 0 and 1, factor to the smallest of screen width and height
     tap_close_callback = nil,
     alpha = nil, -- passed to MovableContainer
 }
 
 function ButtonDialog:init()
+    if not self.width then
+        if not self.width_factor then
+            self.width_factor = 0.9 -- default if no width specified
+        end
+        self.width = math.floor(math.min(Screen:getWidth(), Screen:getHeight()) * self.width_factor)
+    end
     if Device:hasKeys() then
         local close_keys = Device:hasFewKeys() and { "Back", "Left" } or Device.input.group.Back
         self.key_events.Close = { { close_keys } }
@@ -81,6 +89,7 @@ function ButtonDialog:init()
             FrameContainer:new{
                 ButtonTable:new{
                     buttons = self.buttons,
+                    width = self.width - 2*Size.border.window - 2*Size.padding.button,
                     show_parent = self,
                 },
                 background = Blitbuffer.COLOR_WHITE,

frontend/ui/widget/buttondialogtitle.lua

@@ -61,12 +61,29 @@ function ButtonDialogTitle:init()
             }
         end
     end
+
     self.button_table = ButtonTable:new{
-        width = self.width,
+        width = self.width - 2*Size.border.window - 2*Size.padding.button,
         buttons = self.buttons,
         zero_sep = true,
         show_parent = self,
     }
+
+    local title_padding = self.use_info_style and self.info_padding or self.title_padding
+    local title_margin = self.use_info_style and self.info_margin or self.title_margin
+    local title_width = self.width - 2 * (Size.border.window + Size.padding.button + title_padding + title_margin)
+    local title_widget = FrameContainer:new{
+        padding = title_padding,
+        margin = title_margin,
+        bordersize = 0,
+        TextBoxWidget:new{
+            text = self.title,
+            width = title_width,
+            face = self.use_info_style and self.info_face or self.title_face,
+            alignment = self.title_align or "left",
+        },
+    }
+
     self[1] = CenterContainer:new{
         dimen = Screen:getSize(),
         ignore_if_over = "height",
@@ -74,17 +91,7 @@ function ButtonDialogTitle:init()
             FrameContainer:new{
                 VerticalGroup:new{
                     align = "center",
-                    FrameContainer:new{
-                        padding = self.use_info_style and self.info_padding or self.title_padding,
-                        margin = self.use_info_style and self.info_margin or self.title_margin,
-                        bordersize = 0,
-                        TextBoxWidget:new{
-                            text = self.title,
-                            width = math.floor(self.width * 0.9),
-                            face = self.use_info_style and self.info_face or self.title_face,
-                            alignment = self.title_align or "left",
-                        },
-                    },
+                    title_widget,
                     VerticalSpan:new{ width = Size.span.vertical_default },
                     self.button_table,
                 },