client: Ensure accounts dialog fits on small display devices

- Replace ellipsizing by wrapping
- Switch to vertical boxing if not enough space
- Fix welcome dialog

src/client/accounts/accounts-editor-edit-pane.vala

@@ -389,7 +389,8 @@ private class Accounts.MailboxRow : AccountRow<EditorEditPane,Gtk.Label> {
     public MailboxRow(Geary.AccountInformation account,
                       Geary.RFC822.MailboxAddress mailbox) {
         var label = new Gtk.Label("");
-        label.ellipsize = Pango.EllipsizeMode.END;
+        label.set_line_wrap_mode(Pango.WrapMode.WORD_CHAR);
+        label.set_line_wrap(true);
         base(account, "", label);
         this.mailbox = mailbox;
         enable_drag();

src/client/accounts/accounts-editor-list-pane.vala

@@ -276,7 +276,8 @@ private class Accounts.AccountListRow : AccountRow<EditorListPane,Gtk.Grid> {
         this.value.add(this.unavailable_icon);
         this.value.add(this.service_label);
 
-        this.service_label.set_ellipsize(Pango.EllipsizeMode.END);
+        this.service_label.set_line_wrap_mode(Pango.WrapMode.WORD_CHAR);
+        this.service_label.set_line_wrap(true);
         this.service_label.show();
 
         this.account.changed.connect(on_account_changed);

src/client/accounts/accounts-editor-row.vala

@@ -14,7 +14,10 @@ internal class Accounts.EditorRow<PaneType> : Gtk.ListBoxRow {
     };
 
 
-    protected Gtk.Grid layout { get; private set; default = new Gtk.Grid(); }
+    protected Gtk.Box layout {
+        get;
+        private set;
+        default = new Gtk.Box(Gtk.Orientation.HORIZONTAL, 5); }
 
     private Gtk.Container drag_handle;
     private bool drag_picked_up = false;
@@ -26,13 +29,10 @@ internal class Accounts.EditorRow<PaneType> : Gtk.ListBoxRow {
 
 
     public EditorRow() {
+
         get_style_context().add_class("geary-settings");
         get_style_context().add_class("geary-labelled-row");
 
-        this.layout.orientation = Gtk.Orientation.HORIZONTAL;
-        this.layout.show();
-        add(this.layout);
-
         // We'd like to add the drag handle only when needed, but
         // GNOME/gtk#1495 prevents us from doing so.
         Gtk.EventBox drag_box = new Gtk.EventBox();
@@ -48,9 +48,25 @@ internal class Accounts.EditorRow<PaneType> : Gtk.ListBoxRow {
         this.drag_handle.hide();
         // Translators: Tooltip for dragging list items
         this.drag_handle.set_tooltip_text(_("Drag to move this item"));
-        this.layout.add(drag_handle);
 
+        var box = new Gtk.Box(Gtk.Orientation.HORIZONTAL, 5);
+        box.add(drag_handle);
+        box.add(this.layout);
+        box.show();
+        add(box);
+
+        this.layout.show();
         this.show();
+
+         this.size_allocate.connect((allocation) => {
+            if (allocation.width < 500) {
+                if (this.layout.orientation == Gtk.Orientation.HORIZONTAL) {
+                    this.layout.orientation = Gtk.Orientation.VERTICAL;
+                }
+            } else if (this.layout.orientation == Gtk.Orientation.VERTICAL) {
+                this.layout.orientation = Gtk.Orientation.HORIZONTAL;
+            }
+        });
     }
 
     public virtual void activated(PaneType pane) {
@@ -216,8 +232,10 @@ internal class Accounts.LabelledEditorRow<PaneType,V> : EditorRow<PaneType> {
     public LabelledEditorRow(string label, V value) {
         this.label.halign = Gtk.Align.START;
         this.label.valign = Gtk.Align.CENTER;
+        this.label.hexpand = true;
         this.label.set_text(label);
-        this.label.set_ellipsize(Pango.EllipsizeMode.END);
+        this.label.set_line_wrap_mode(Pango.WrapMode.WORD_CHAR);
+        this.label.set_line_wrap(true);
         this.label.show();
         this.layout.add(this.label);
 
@@ -228,10 +246,15 @@ internal class Accounts.LabelledEditorRow<PaneType,V> : EditorRow<PaneType> {
             Gtk.Entry? entry = value as Gtk.Entry;
             if (entry != null) {
                 expand_label = false;
-                entry.xalign = 1;
                 entry.hexpand = true;
             }
+            Gtk.Label? vlabel = value as Gtk.Label;
+            if (vlabel != null) {
+                vlabel.set_line_wrap_mode(Pango.WrapMode.WORD_CHAR);
+                vlabel.set_line_wrap(true);
+            }
 
+            widget.halign = Gtk.Align.START;
             widget.valign = Gtk.Align.CENTER;
             widget.show();
             this.layout.add(widget);
@@ -499,6 +522,7 @@ internal class Accounts.TlsComboBox : Gtk.ComboBox {
         set_id_column(0);
 
         Gtk.CellRendererText text_renderer = new Gtk.CellRendererText();
+        text_renderer.ellipsize = Pango.EllipsizeMode.END;
         pack_start(text_renderer, true);
         add_attribute(text_renderer, "text", 2);
 
@@ -510,7 +534,7 @@ internal class Accounts.TlsComboBox : Gtk.ComboBox {
 }
 
 
-internal class Accounts.OutgoingAuthComboBox : Gtk.ComboBoxText {
+internal class Accounts.OutgoingAuthComboBox : Gtk.ComboBox {
 
 
     public string label { get; private set; }
@@ -535,29 +559,54 @@ internal class Accounts.OutgoingAuthComboBox : Gtk.ComboBoxText {
         // account
         this.label = _("Login");
 
-        append(
+        Gtk.ListStore store = new Gtk.ListStore(
+            2, typeof(string), typeof(string)
+        );
+        Gtk.TreeIter iter;
+
+        store.append(out iter);
+        store.set(
+            iter,
+            0,
             Geary.Credentials.Requirement.NONE.to_value(),
+            1,
             // Translators: ComboBox value for source of SMTP
             // authentication credentials (none) when adding a new
             // account
             _("No login needed")
         );
 
-        append(
+        store.append(out iter);
+        store.set(
+            iter,
+            0,
             Geary.Credentials.Requirement.USE_INCOMING.to_value(),
+            1,
             // Translators: ComboBox value for source of SMTP
             // authentication credentials (use IMAP) when adding a new
             // account
             _("Use same login as receiving")
         );
 
-        append(
+        store.append(out iter);
+        store.set(
+            iter,
+            0,
             Geary.Credentials.Requirement.CUSTOM.to_value(),
+            1,
             // Translators: ComboBox value for source of SMTP
             // authentication credentials (custom) when adding a new
             // account
             _("Use a different login")
         );
+
+        this.model = store;
+        set_id_column(0);
+
+        Gtk.CellRendererText text_renderer = new Gtk.CellRendererText();
+        text_renderer.ellipsize = Pango.EllipsizeMode.END;
+        pack_start(text_renderer, true);
+        add_attribute(text_renderer, "text", 1);
     }
 
 }

src/client/accounts/accounts-editor.vala

@@ -78,6 +78,14 @@ public class Accounts.Editor : Gtk.Dialog {
         push(this.editor_list_pane);
 
         update_command_actions();
+
+        if (this.accounts.size > 1) {
+            this.default_height = 650;
+            this.default_width = 800;
+        } else {
+            // Welcome dialog
+            this.default_width = 600;
+        }
     }
 
     public override bool key_press_event(Gdk.EventKey event) {

ui/accounts_editor.ui

@@ -4,8 +4,6 @@
   <requires lib="gtk+" version="3.20"/>
   <template class="AccountsEditor" parent="GtkDialog">
     <property name="modal">True</property>
-    <property name="default_width">800</property>
-    <property name="default_height">650</property>
     <property name="type_hint">dialog</property>
     <child type="titlebar">
       <placeholder/>

ui/accounts_editor_edit_pane.ui

@@ -220,7 +220,27 @@
                     <child>
                       <object class="GtkButtonBox">
                         <property name="visible">True</property>
-                        <property name="layout_style">end</property>
+                        <child>
+                          <object class="GtkButton" id="remove_button">
+                            <property name="visible">True</property>
+                            <property name="receives_default">False</property>
+                            <property name="tooltip_text" translatable="yes">Remove this account from Geary</property>
+                            <signal name="clicked" handler="on_remove_account_clicked" swapped="no"/>
+                            <style>
+                              <class name="destructive-action"/>
+                            </style>
+                            <child>
+                              <object class="GtkImage">
+                                <property name="visible">True</property>
+                                <property name="icon_name">user-trash-symbolic</property>
+                              </object>
+                            </child>"
+                          </object>
+                          <packing>
+                            <property name="pack_type">end</property>
+                            <property name="secondary">True</property>
+                          </packing>
+                        </child>"
                         <child>
                           <object class="GtkButton">
                             <property name="label" translatable="yes" comments="This is a button in the account settings to show server settings.">Server Settings</property>
@@ -231,27 +251,7 @@
                           <packing>
                             <property name="expand">True</property>
                             <property name="fill">True</property>
-                            <property name="pack_type">end</property>
+                            <property name="pack_type">start</property>
-                            <property name="position">0</property>
-                          </packing>
-                        </child>
-                        <child>
-                          <object class="GtkButton" id="remove_button">
-                            <property name="label" translatable="yes" comments="This is the remove account button in the account settings.">Remove Account</property>
-                            <property name="visible">True</property>
-                            <property name="receives_default">False</property>
-                            <property name="tooltip_text" translatable="yes">Remove this account from Geary</property>
-                            <signal name="clicked" handler="on_remove_account_clicked" swapped="no"/>
-                            <style>
-                              <class name="destructive-action"/>
-                            </style>
-                          </object>
-                          <packing>
-                            <property name="expand">True</property>
-                            <property name="fill">True</property>
-                            <property name="pack_type">end</property>
-                            <property name="position">1</property>
-                            <property name="secondary">True</property>
                           </packing>
                         </child>
                         <style>

ui/accounts_editor_list_pane.ui

@@ -35,7 +35,7 @@
         <property name="vexpand">True</property>
         <property name="vadjustment">pane_adjustment</property>
         <property name="hscrollbar_policy">never</property>
-        <property name="min_content_height">400</property>
+        <property name="min_content_height">300</property>
         <child>
           <object class="GtkViewport">
             <property name="visible">True</property>
@@ -50,11 +50,13 @@
                       <object class="GtkGrid" id="welcome_panel">
                         <property name="visible">True</property>
                         <property name="halign">center</property>
+                        <property name="valign">center</property>
+                        <property name="vexpand">True</property>
                         <property name="column_spacing">12</property>
                         <child>
                           <object class="GtkImage" id="welcome_icon">
                             <property name="visible">True</property>
-                            <property name="pixel_size">64</property>
+                            <property name="pixel_size">128</property>
                             <property name="use_fallback">True</property>
                           </object>
                           <packing>
@@ -69,7 +71,7 @@
                             <property name="halign">start</property>
                             <property name="valign">start</property>
                             <property name="wrap">True</property>
-                            <property name="label" translatable="yes">To get started, select an email provider below.</property>
+                            <property name="label" translatable="yes">To get started, add an email provider above.</property>
                             <property name="xalign">0</property>
                             <property name="wrap">True</property>
                           </object>

ui/geary.css

@@ -386,33 +386,23 @@ row.geary-labelled-row {
   padding: 0px;
 }
 
-row.geary-labelled-row > grid > * {
+row.geary-labelled-row > box > box {
   margin: 18px 6px;
 }
 
-row.geary-labelled-row > grid > *:first-child:dir(ltr),
-row.geary-labelled-row > grid > *:last-child:dir(rtl) {
-  margin-left: 18px;
-}
-
-row.geary-labelled-row > grid > *:last-child:dir(ltr),
-row.geary-labelled-row > grid > *:first-child:dir(rtl) {
-  margin-right: 18px;
-}
-
 /* Images should have some padding to offset them from adjacent
 widgets, but care ust be taken since images are also used as children
 of other widgets like entries, comboboxes and switches, and these
 shouldn't be be touched. */
 row.geary-labelled-row widget > image,
-row.geary-labelled-row grid > image {
+row.geary-labelled-row box > box > image {
   padding: 0px 6px;
 }
 
-row.geary-labelled-row > grid > combobox,
+row.geary-labelled-row > box > box > combobox,
-row.geary-labelled-row > grid > entry,
+row.geary-labelled-row > box > box > entry,
-row.geary-labelled-row:not(.geary-add-row) > grid > image,
+row.geary-labelled-row:not(.geary-add-row) > box > image,
-row.geary-labelled-row > grid > switch {
+row.geary-labelled-row > box > box > switch {
   /* These use more space than labels, so set their valign to center
   when adding them and free up some space around them here to keep a
   consistent row height. */
@@ -428,10 +418,6 @@ grid.geary-account-view image:dir(rtl) {
   margin-left: 6px;
 }
 
-grid.geary-welcome-panel {
-  margin-bottom: 32px;
-}
-
 label.geary-settings-heading {
   font-weight: bold;
   margin-top: 24px;