add padding to language select and server select menu buttons so that the scrollbar doesn't overlap them

assets/voxygen/i18n/en.ron

@@ -114,7 +114,6 @@ Is the client up to date?"#,
         "main.connecting": "Connecting",
         "main.creating_world": "Creating world",
         "main.tip": "Tip:",
-		"main.select_language": "Select a language",
 
         // Welcome notice that appears the first time Veloren is started
         "main.notice": r#"Welcome to the alpha version of Veloren!
@@ -159,6 +158,7 @@ https://veloren.net/account/."#,
         "main.login.not_on_whitelist": "You need a Whitelist entry by an Admin to join",
         "main.login.banned": "You have been banned with the following reason",
         "main.login.kicked": "You have been kicked with the following reason",
+        "main.login.select_language": "Select a language",
 
 		"main.servers.select_server": "Select a server",
 

voxygen/src/menu/main/ui/login.rs

@@ -1,4 +1,4 @@
-use super::{Imgs, LoginInfo, Message};
+use super::{Imgs, LoginInfo, Message, FILL_FRAC_ONE, FILL_FRAC_TWO};
 use crate::{
     i18n::Localization,
     ui::{
@@ -20,8 +20,6 @@ use iced::{
 };
 use vek::*;
 
-const FILL_FRAC_ONE: f32 = 0.77;
-const FILL_FRAC_TWO: f32 = 0.53;
 const INPUT_WIDTH: u16 = 280;
 const INPUT_TEXT_SIZE: u16 = 24;
 
@@ -217,47 +215,59 @@ impl LanguageSelectBanner {
         selected_language_index: Option<usize>,
         button_style: style::button::Style,
     ) -> Element<Message> {
-        let title = Text::new(i18n.get("main.select_language"))
+        // Reset button states if languages were added / removed
+        if self.language_buttons.len() != language_metadatas.len() {
+            self.language_buttons = vec![Default::default(); language_metadatas.len()];
+        }
+
+        let title = Text::new(i18n.get("main.login.select_language"))
             .size(fonts.cyri.scale(35))
             .horizontal_alignment(iced::HorizontalAlignment::Center);
 
         let mut list = Scrollable::new(&mut self.selection_list)
             .spacing(8)
             .height(Length::Fill)
-            .width(Length::Fill)
             .align_items(Align::Start);
 
-        if self.language_buttons.len() != language_metadatas.len() {
-            self.language_buttons = vec![Default::default(); language_metadatas.len()];
-        }
-
-        for (i, (state, lang)) in self
+        let list_items = self
             .language_buttons
             .iter_mut()
             .zip(language_metadatas)
             .enumerate()
-        {
-            let color = if Some(i) == selected_language_index {
-                (97, 255, 18)
-            } else {
-                (97, 97, 25)
-            };
-            let button = Button::new(
-                state,
-                Container::new(Text::new(lang.language_name.clone()).size(fonts.cyri.scale(25)))
-                    .padding(16)
-                    .center_y(),
-            )
-            .style(
-                style::button::Style::new(imgs.selection)
-                    .hover_image(imgs.selection_hover)
-                    .press_image(imgs.selection_press)
-                    .image_color(vek::Rgba::new(color.0, color.1, color.2, 192)),
-            )
-            .width(Length::Fill)
-            .min_height(56)
-            .on_press(Message::LanguageChanged(i));
-            list = list.push(button);
+            .map(|(i, (state, lang))| {
+                let color = if Some(i) == selected_language_index {
+                    (97, 255, 18)
+                } else {
+                    (97, 97, 25)
+                };
+                let button = Button::new(
+                    state,
+                    Row::with_children(vec![
+                        Space::new(Length::FillPortion(5), Length::Units(0)).into(),
+                        Text::new(lang.language_name.clone())
+                            .width(Length::FillPortion(95))
+                            .size(fonts.cyri.scale(25))
+                            .vertical_alignment(iced::VerticalAlignment::Center)
+                            .into(),
+                    ]),
+                )
+                .style(
+                    style::button::Style::new(imgs.selection)
+                        .hover_image(imgs.selection_hover)
+                        .press_image(imgs.selection_press)
+                        .image_color(vek::Rgba::new(color.0, color.1, color.2, 192)),
+                )
+                .min_height(56)
+                .on_press(Message::LanguageChanged(i));
+                Row::with_children(vec![
+                    Space::new(Length::FillPortion(3), Length::Units(0)).into(),
+                    button.width(Length::FillPortion(92)).into(),
+                    Space::new(Length::FillPortion(5), Length::Units(0)).into(),
+                ])
+            });
+
+        for item in list_items {
+            list = list.push(item);
         }
 
         let okay_button = Container::new(neat_button(
@@ -287,7 +297,7 @@ impl LanguageSelectBanner {
             .height(Length::Fill),
             content,
         )
-        .padding(Padding::new().horizontal(8).vertical(15).bottom(50))
+        .padding(Padding::new().horizontal(5).top(15).bottom(50))
         .max_width(350);
 
         selection_menu.into()

voxygen/src/menu/main/ui/mod.rs

@@ -33,6 +33,9 @@ const UI_HIGHLIGHT_0: Color = Color::Rgba(0.79, 1.09, 1.09, 1.0);*/
 pub const TEXT_COLOR: iced::Color = iced::Color::from_rgb(1.0, 1.0, 1.0);
 pub const DISABLED_TEXT_COLOR: iced::Color = iced::Color::from_rgba(1.0, 1.0, 1.0, 0.2);
 
+pub const FILL_FRAC_ONE: f32 = 0.77;
+pub const FILL_FRAC_TWO: f32 = 0.53;
+
 image_ids_ice! {
     struct Imgs {
         <VoxelGraphic>
@@ -218,7 +221,7 @@ impl Controls {
         let language_metadatas = crate::i18n::list_localizations();
         let selected_language_index = language_metadatas
             .iter()
-            .position(|f| &f.language_identifier == &settings.language.selected_language);
+            .position(|f| f.language_identifier == settings.language.selected_language);
 
         Self {
             fonts,

voxygen/src/menu/main/ui/servers.rs

@@ -1,4 +1,4 @@
-use super::{Imgs, Message};
+use super::{Imgs, Message, FILL_FRAC_ONE};
 use crate::{
     i18n::Localization,
     ui::{
@@ -48,7 +48,7 @@ impl Screen {
             Container::new(neat_button(
                 &mut self.back_button,
                 i18n.get("common.back"),
-                0.77_f32,
+                FILL_FRAC_ONE,
                 button_style,
                 Some(Message::Back),
             ))
@@ -63,33 +63,50 @@ impl Screen {
             .width(Length::Fill)
             .height(Length::Fill);
 
+        // Reset button states if servers were added / removed
         if self.server_buttons.len() != servers.len() {
             self.server_buttons = vec![Default::default(); servers.len()];
         }
 
-        for (i, (state, server)) in self.server_buttons.iter_mut().zip(servers).enumerate() {
-            let color = if Some(i) == selected_server_index {
-                (97, 255, 18)
-            } else {
-                (97, 97, 25)
-            };
-            let button = Button::new(
-                state,
-                Container::new(Text::new(server.as_ref()).size(fonts.cyri.scale(30)))
-                    .padding(24)
-                    .center_y()
-                    .height(Length::Fill),
-            )
-            .style(
-                style::button::Style::new(imgs.selection)
-                    .hover_image(imgs.selection_hover)
-                    .press_image(imgs.selection_press)
-                    .image_color(vek::Rgba::new(color.0, color.1, color.2, 255)),
-            )
-            .width(Length::Fill)
-            .min_height(100)
-            .on_press(Message::ServerChanged(i));
-            list = list.push(button);
+        let list_items =
+            self.server_buttons
+                .iter_mut()
+                .zip(servers)
+                .enumerate()
+                .map(|(i, (state, server))| {
+                    let color = if Some(i) == selected_server_index {
+                        (97, 255, 18)
+                    } else {
+                        (97, 97, 25)
+                    };
+                    let button = Button::new(
+                        state,
+                        Row::with_children(vec![
+                            Space::new(Length::FillPortion(5), Length::Units(0)).into(),
+                            Text::new(server.as_ref())
+                                .size(fonts.cyri.scale(30))
+                                .width(Length::FillPortion(95))
+                                .vertical_alignment(iced::VerticalAlignment::Center)
+                                .into(),
+                        ]),
+                    )
+                    .style(
+                        style::button::Style::new(imgs.selection)
+                            .hover_image(imgs.selection_hover)
+                            .press_image(imgs.selection_press)
+                            .image_color(vek::Rgba::new(color.0, color.1, color.2, 255)),
+                    )
+                    .min_height(100)
+                    .on_press(Message::ServerChanged(i));
+                    Row::with_children(vec![
+                        Space::new(Length::FillPortion(3), Length::Units(0)).into(),
+                        button.width(Length::FillPortion(92)).into(),
+                        Space::new(Length::FillPortion(5), Length::Units(0)).into(),
+                    ])
+                });
+
+        for item in list_items {
+            list = list.push(item);
         }
 
         Container::new(