ui: optimize wallet panels width, creations steps scroll and paddings

src/gui/views/wallets/content.rs

@@ -316,7 +316,7 @@ impl WalletsContent {
                         let mut rect = ui.available_rect_before_wrap();
                         let mut width = ui.available_width();
                         if !dual_panel {
-                            width = f32::min(width, Root::SIDE_PANEL_WIDTH * 1.3)
+                            width = f32::min(width, Root::SIDE_PANEL_WIDTH * 1.4)
                         }
                         if width == 0.0 {
                             return;

src/gui/views/wallets/creation/creation.rs

@@ -12,14 +12,14 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-use egui::{Id, Margin, RichText, TextStyle, vec2, Widget};
+use egui::{Id, Margin, RichText, ScrollArea, TextStyle, vec2, Widget};
 use egui_extras::{RetainedImage, Size, StripBuilder};
 
 use crate::built_info;
 use crate::gui::Colors;
 use crate::gui::icons::{CHECK, EYE, EYE_SLASH, FOLDER_PLUS, SHARE_FAT};
 use crate::gui::platform::PlatformCallbacks;
-use crate::gui::views::{Modal, View};
+use crate::gui::views::{Modal, Root, View};
 use crate::gui::views::types::ModalPosition;
 use crate::gui::views::wallets::creation::MnemonicSetup;
 use crate::gui::views::wallets::creation::types::Step;
@@ -94,9 +94,26 @@ impl WalletCreation {
                 })
                 .show_inside(ui, |ui| {
                     ui.vertical_centered(|ui| {
+                        ui.vertical_centered(|ui| {
+                            // Setup content width.
+                            let mut rect = ui.available_rect_before_wrap();
+                            let mut width = f32::min(
+                                ui.available_width(),
+                                Root::SIDE_PANEL_WIDTH * 2.0
+                            );
+                            if width == 0.0 {
+                                return;
+                            }
+                            rect.set_width(width);
+
+                            // Draw step control content.
+                            ui.allocate_ui(rect.size(), |ui| {
                                 self.step_control_ui(ui, on_create);
                             });
                         });
+
+                    });
+                });
         }
 
         // Show wallet creation step content panel.
@@ -112,8 +129,34 @@ impl WalletCreation {
                 ..Default::default()
             })
             .show_inside(ui, |ui| {
+                let id = if let Some(step) = &self.step {
+                    format!("creation_step_scroll_{}", step.name())
+                } else {
+                    "creation_step_scroll".to_owned()
+                };
+                ScrollArea::vertical()
+                    .id_source(id)
+                    .auto_shrink([false; 2])
+                    .show(ui, |ui| {
+                        ui.vertical_centered(|ui| {
+                            // Setup content width.
+                            let mut rect = ui.available_rect_before_wrap();
+                            let mut width = f32::min(
+                                ui.available_width(),
+                                Root::SIDE_PANEL_WIDTH * 2.0
+                            );
+                            if width == 0.0 {
+                                return;
+                            }
+                            rect.set_width(width);
+
+                            // Draw step content.
+                            ui.allocate_ui(rect.size(), |ui| {
                                 self.step_content_ui(ui, frame, cb);
                             });
+                        });
+                    });
+            });
     }
 
     /// Reset wallet creation to default values.

src/gui/views/wallets/creation/mnemonic.rs

@@ -82,10 +82,6 @@ impl MnemonicSetup {
         // Draw modal content for current ui container.
         self.current_modal_ui(ui, frame, cb);
 
-        ScrollArea::vertical()
-            .id_source("input_mnemonic_words_list")
-            .auto_shrink([false; 2])
-            .show(ui, |ui| {
         ui.add_space(10.0);
 
         // Show mode and type setup.
@@ -97,7 +93,6 @@ impl MnemonicSetup {
 
         // Show words setup.
         self.word_list_ui(ui, self.mnemonic.mode == PhraseMode::Import, cb);
-            });
     }
 
     /// Draw content for phrase confirmation step.
@@ -110,16 +105,11 @@ impl MnemonicSetup {
 
         ui.add_space(4.0);
         ui.vertical_centered(|ui| {
-            ui.label(RichText::new(t!("wallets.saved_phrase")).size(16.0).color(Colors::GRAY));
+            let text = format!("{}:", t!("wallets.saved_phrase"));
+            ui.label(RichText::new(text).size(16.0).color(Colors::GRAY));
         });
         ui.add_space(4.0);
-        ScrollArea::vertical()
-            .id_source("confirm_mnemonic_words_list")
-            .auto_shrink([false; 2])
-            .show(ui, |ui| {
-                // Show words setup.
         self.word_list_ui(ui, true, cb);
-            });
     }
 
     /// Draw mode and size setup.

src/gui/views/wallets/creation/types.rs

@@ -22,3 +22,14 @@ pub enum Step {
     /// Wallet connection setup.
     SetupConnection
 }
+
+impl Step {
+    /// Short name representing creation step.
+    pub fn name(&self) -> String {
+        match *self {
+            Step::EnterMnemonic => "enter_phrase".to_owned(),
+            Step::ConfirmMnemonic => "confirm_phrase".to_owned(),
+            Step::SetupConnection => "setup_conn".to_owned(),
+        }
+    }
+}

src/gui/views/wallets/setup/connection.rs

@@ -86,12 +86,9 @@ impl ConnectionSetup {
         // Draw modal content for current ui container.
         self.current_modal_ui(ui, frame, cb);
 
-        ScrollArea::vertical()
+        ui.add_space(2.0);
-            .id_source("wallet_connection_setup")
-            .auto_shrink([false; 2])
-            .show(ui, |ui| {
         View::sub_title(ui, format!("{} {}", GLOBE, t!("wallets.conn_method")));
-                View::horizontal_line(ui, Colors::STROKE);
+        View::horizontal_line(ui, Colors::ITEM_STROKE);
         ui.add_space(4.0);
 
         ui.vertical_centered(|ui| {
@@ -122,7 +119,6 @@ impl ConnectionSetup {
                 ui.add_space(12.0);
             }
         });
-            });
     }
 
     /// Show external connection adding [`Modal`].
@@ -187,7 +183,7 @@ impl ConnectionSetup {
 
             // Show error when specified URL is not valid.
             if self.ext_node_url_error {
-                ui.add_space(12.0);
+                ui.add_space(2.0);
                 ui.label(RichText::new(t!("wallets.invalid_url"))
                     .size(17.0)
                     .color(Colors::RED));

src/gui/views/wallets/wallet/content.rs

@@ -45,7 +45,7 @@ impl WalletContent {
               frame: &mut eframe::Frame,
               wallet: &mut Wallet,
               cb: &dyn PlatformCallbacks) {
-        // Show bottom tabs.
+        // Show wallet tabs panel.
         egui::TopBottomPanel::bottom("wallet_tabs")
             .frame(egui::Frame {
                 fill: Colors::FILL,
@@ -58,10 +58,23 @@ impl WalletContent {
                 ..Default::default()
             })
             .show_inside(ui, |ui| {
+                ui.vertical_centered(|ui| {
+                    // Setup tabs width.
+                    let mut rect = ui.available_rect_before_wrap();
+                    let mut width = f32::min(ui.available_width(), Root::SIDE_PANEL_WIDTH * 2.0);
+                    if width == 0.0 {
+                        return;
+                    }
+                    rect.set_width(width);
+
+                    // Draw wallet tabs.
+                    ui.allocate_ui(rect.size(), |ui| {
                         self.tabs_ui(ui);
                     });
+                });
+            });
 
-        // Show tab content.
+        // Show tab content panel.
         egui::CentralPanel::default()
             .frame(egui::Frame {
                 stroke: View::DEFAULT_STROKE,
@@ -75,8 +88,21 @@ impl WalletContent {
                 ..Default::default()
             })
             .show_inside(ui, |ui| {
+                ui.vertical_centered(|ui| {
+                    // Setup tab content width.
+                    let mut rect = ui.available_rect_before_wrap();
+                    let mut width = f32::min(ui.available_width(), Root::SIDE_PANEL_WIDTH * 2.0);
+                    if width == 0.0 {
+                        return;
+                    }
+                    rect.set_width(width);
+
+                    // Draw current tab content.
+                    ui.allocate_ui(rect.size(), |ui| {
                         self.current_tab.ui(ui, frame, wallet, cb);
                     });
+                });
+            });
 
         // Refresh content after 1 second for loaded wallet.
         if wallet.get_data().is_some() {