Manual sizing for buttons unless sizing is specified from outside

game_core/src/ui/components/button.rs

 use bevy::prelude::*;
+use kayak_font::{KayakFont, TextProperties};
 use kayak_ui::prelude::*;
 use kayak_ui::widgets::{ElementBundle, NinePatch, NinePatchBundle, TextProps, TextWidgetBundle};
 use micro_musicbox::prelude::MusicBox;
@@ -56,6 +57,7 @@ pub fn render_button_widget(
 	state_query: Query<&ButtonWidgetState>,
 	mut query: Query<(&ButtonWidgetProps, &KChildren, &mut ComputedStyles, &KStyle)>,
 	assets: Res<AssetHandles>,
+	fonts: Res<Assets<KayakFont>>,
 ) -> bool {
 	if let Ok((props, children, mut computed, style)) = query.get_mut(entity) {
 		let state_entity =
@@ -132,27 +134,49 @@ pub fn render_button_widget(
 				},
 			);
 
-			let button_height = props.font_size + 2.0 + 24.0; // + 8.0;
+			let font_data = fonts.get(&assets.kayak_font("equipment_pro")).unwrap();
+			let content_measurement = font_data.measure(
+				props.text.as_str(),
+				TextProperties {
+					font_size: props.font_size,
+					line_height: props.font_size + 2.0,
+					alignment: Alignment::Start,
+					tab_size: 4,
+					max_size: (100000.0, props.font_size + 2.0),
+				},
+			);
+
+			let edge_padding = 12.0;
+			let (text_width, text_height) = content_measurement.size();
+			let button_height = text_height + (edge_padding * 2.0); // + 8.0;
+			let mut button_width = text_width + (edge_padding * 2.0) + 8.0;
+
+			if !props.left_icon.is_none() {
+				button_width += props.font_size + 23.0;
+			}
+			if !props.right_icon.is_none() {
+				button_width += props.font_size + 23.0;
+			}
 
 			let nine_vals = if props.is_disabled {
 				NinePatch {
 					handle: assets.image("button_disabled"),
-					border: Edge::all(12.0),
+					border: Edge::all(edge_padding),
 				}
 			} else if state.is_pressed {
 				NinePatch {
 					handle: assets.image("button_down"),
-					border: Edge::all(12.0),
+					border: Edge::all(edge_padding),
 				}
 			} else if state.is_hovered {
 				NinePatch {
 					handle: assets.image("button_active"),
-					border: Edge::all(12.0),
+					border: Edge::all(edge_padding),
 				}
 			} else {
 				NinePatch {
 					handle: assets.image("button_idle"),
-					border: Edge::all(12.0),
+					border: Edge::all(edge_padding),
 				}
 			};
 
@@ -175,7 +199,7 @@ pub fn render_button_widget(
 			};
 
 			*computed = KStyle {
-				render_command: value(RenderCommand::Layout),
+				render_command: value(RenderCommand::Quad),
 				min_height: px(32.0),
 				min_width: px(32.0),
 				height: px(button_height),
@@ -183,6 +207,7 @@ pub fn render_button_widget(
 			}
 			.with_style(style.clone())
 			.with_style(KStyle {
+				width: px(button_width),
 				padding_bottom: stretch(0.0),
 				padding_top: stretch(0.0),
 				padding_left: stretch(0.0),

game_core/src/ui/widgets/town_menu.rs

@@ -126,9 +126,9 @@ pub fn render_town_menu_panel(
 				}}>
 					<ButtonWidget
 						styles={KStyle {
-							width: px(225.0),
-							padding_left: px(30.0),
-							padding_right: px(20.0),
+							// width: px(225.0),
+							// padding_left: px(30.0),
+							// padding_right: px(20.0),
 							..Default::default()
 						}}
 						props={ButtonWidgetProps {
@@ -139,9 +139,9 @@ pub fn render_town_menu_panel(
 					/>
 					<ButtonWidget
 						styles={KStyle {
-							width: px(260.0),
-							padding_left: px(30.0),
-							padding_right: px(20.0),
+							// width: px(260.0),
+							// padding_left: px(30.0),
+							// padding_right: px(20.0),
 							..Default::default()
 						}}
 						props={ButtonWidgetProps {
@@ -152,9 +152,9 @@ pub fn render_town_menu_panel(
 					/>
 					<ButtonWidget
 						styles={KStyle {
-							width: px(225.0),
-							padding_left: px(30.0),
-							padding_right: px(20.0),
+							// width: px(225.0),
+							// padding_left: px(30.0),
+							// padding_right: px(20.0),
 							..Default::default()
 						}}
 						props={ButtonWidgetProps {